react15与react16的本质区别-Toy模板网

这篇具有很好参考价值的文章主要介绍了react15与react16的本质区别。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

React 15 和 React 16 在架构和一些核心特性上存在本质性的区别。

1.Reconciliation（协调）算法：

React 15: React 15 使用了递归的协调算法，即采用深度优先遍历整个组件树来协调更新。这种方式在处理大型组件树或深度嵌套组件时可能导致性能问题。
React 16: React 16 引入了 Fiber 架构，使用了一种更灵活的协调算法。Fiber 架构的核心思想是将协调过程拆分成可中断的小任务单元，允许在渲染过程中中断和恢复，以更好地响应用户输入，提高性能。

React Fiber 架构：

React Fiber 架构是 React 16 引入的一种新的协调引擎，它重新设计了 React 的核心算法，提供了更灵活的调度和渲染机制。Fiber 架构的目标是改善 React 在大型应用中的性能，同时提供更好的用户体验和交互响应性。
以下是 React Fiber 架构的一些关键特性和概念：
1. Fiber 节点：在 Fiber 架构中，每个 React 元素都对应一个 Fiber 节点。Fiber 节点是一个轻量的 JavaScript 对象，用于描述 React 元素的信息，例如元素的类型、属性、子元素等。
2. 协调：Fiber 架构引入了新的协调机制，通过协调器（Reconciler）来处理元素的更新和渲染。协调器使用一种深度优先遍历的算法来协调和调度 Fiber 节点，使得 React 能够更加灵活地处理更新和渲染的优先级。
3. Fiber 树：Fiber 架构中的元素被组织成一个 Fiber 树。与传统的递归调度不同，Fiber 树的节点可以在不同时间点暂停、中断和恢复。这使得 React 能够在渲染时对任务进行切片，提高对用户输入的响应速度。
4. 时间片（Time Slicing）：Fiber 架构引入了时间片的概念，将任务切分成小的时间片单元。这使得浏览器能够在每个时间片之间进行中断，执行其他任务，提高页面的交互响应性。
5. 异步渲染： Fiber 架构支持异步渲染，可以将渲染工作分散到多个帧中，避免一次性渲染大量元素导致的卡顿。异步渲染使得 React 能够更好地适应复杂的应用场景，提高了整体的性能。
6. 优先级调度： Fiber 架构引入了优先级调度的概念，通过任务的优先级来决定任务的执行顺序。这允许 React 在处理高优先级任务时能够更快地响应用户输入，同时在处理低优先级任务时避免阻塞主线程。
7. 增量渲染：Fiber 架构支持增量渲染，可以在每个时间片中只更新发生变化的部分，而不是整体重新渲染。这减少了不必要的计算和 DOM 操作，提高了渲染的效率。
总的来说，React Fiber 架构是为了解决在大型应用中渲染性能和用户体验问题而引入的。它通过重新设计协调机制、引入时间片和优先级调度等特性，使得 React 能够更加灵活地处理复杂的更新和渲染任务，提高了整体的性能和响应速度。

时间片：

时间片（Time Slicing）是 React 16 引入的一项特性，旨在提高应用在处理大型任务时的性能和用户体验。时间片将任务分割成小块，使得浏览器能够在每个时间片之间进行中断，从而更好地响应用户输入和保持页面的流畅性。

时间片的主要目标是解决两个问题：

1. 用户交互响应性：在进行大型渲染任务时，如果一直占用主线程，可能会导致页面在渲染完成之前无法响应用户的输入，造成页面卡顿和交互迟滞。

2. 动画和滚动卡顿：当页面中有大量的 DOM 元素需要渲染时，如果一次性渲染所有元素，可能导致动画和滚动的卡顿，影响用户体验。

时间片通过将任务切分成小的时间片单元，允许浏览器在每个时间片之间进行中断，执行其他任务，如处理用户输入或执行高优先级的代码。这样，即使有大型任务在进行，浏览器也能够更及时地响应用户的输入和保持页面的流畅性。

时间片的作用包括：

1. 更好的用户体验：通过将渲染任务分解成小块，可以更好地响应用户输入，提高页面的交互响应性。

2. 减轻主线程压力：时间片允许浏览器在每个时间片之间进行中断，执行其他任务，减轻了主线程的压力，提高了页面的性能。

3. 避免卡顿：在动画和滚动等场景下，时间片的引入可以避免一次性渲染大量元素导致的卡顿问题，提高了流畅度。

那是不是就说明react15是单线程，react16是多线程的呢？

不是：

React 15 及之前的版本是单线程的，它使用了浏览器的事件循环（event loop）来处理用户交互和更新渲染。在 React 15 中，更新是通过递归方式同步执行的，一旦开始更新，就会一直递归遍历组件树，直到所有组件都完成渲染。这样的机制可能会导致在更新较大的组件树时，主线程被长时间占用，造成页面卡顿。

React 16 及 React 17 引入了 Scheduler 模块和异步渲染的概念，但仍然是在主线程上执行的。这并不是说 React 变成了多线程框架，而是通过优先级调度和异步渲染的方式，更好地利用了主线程的时间片，提高了对用户交互的响应速度，减少了卡顿的可能性。