React源码学习（一）—— Fiber架构

一、协调算法Reconciliation

在React 16以前底层使用了协调算法reconciliation，是普遍被理解为‘虚拟DOM’的算法，即所谓的react diff算法，用于比较更新前后的虚拟DOM树差异，从而使用最小的代价将原始DOM按照新的状态、属性进行更新，遍历算法采用 ‘双端比较(Two-Ended Diffing)’ 的高效算法比较，结合前序遍历pre-order(树深层节点)和后序遍历post-order(树浅层节点)，在虚拟 DOM 树的起点和终点同时进行比较，如果在新旧节点之间找到了差异，则将该节点标记为"脏节点"，并跳过它的子节点的比较，如果新旧节点相同，继续比较它们的子节点，当两个遍历指针相遇时，表示整个树的比较过程完成，至于为什么采取前序遍历和后序遍历以及如何实现，请移步另一篇文章

二、Fiber

Fiber是react 16(2017发布)新增的数据结构，由对应的react Element生成，用于改进React调度器的技术，它的目标是实现更高效的组件更新和渲染处理，以提供更好的用户体验和性能，Fiber架构的核心思想是将原本同步的、递归的调度方式改为异步的、可中断的调度方式。这意味着React可以在渲染过程中根据优先级和时间片切割的策略，对任务进行调度和优化，在Fiber架构下，React将组件更新过程划分为更小的任务单元，并根据任务的优先级决定任务的执行顺序。每个任务单元都被称为一个Fiber节点，Fiber节点包含了组件的状态和相关信息。

• 任务优先级

React使用了一种称为"优先级调度"的算法来进行任务的区分和划分优先级

高优先级任务：

• 用户交互事件：例如点击按钮、输入文本等操作，需要立即响应用户的操作。
• 动画效果：例如平滑的过渡动画、滚动等，需要保持流畅性和实时性。

中优先级任务：

• 异步数据获取：例如异步请求数据、懒加载组件等，虽不需要立即响应，但仍然需要及时获取数据以保证页面加载性能。
• 布局和样式计算：例如根据组件变化计算布局或样式的变化，需要在用户感知之前完成，但不要求立即响应。

低优先级任务：

• 数据更新和状态管理：例如更改应用状态、局部数据更新，通常不要求立即响应，可以在后台进行。
• 优化操作：例如对列表进行优化、性能监测和调试等，这些操作可以在浏览器空闲时进行。

使用Fiber架构带来的一些重要特性和好处包括：

1. 异步渲染: Fiber架构允许React以非阻塞的方式进行渲染和更新操作。通过中断和恢复任务的执行，React可以更好地响应用户的交互操作，提高应用程序的响应性能。

2. 增量渲染: Fiber架构可以将渲染操作分成多个时间片，逐步完成，而不是一次性完成整个渲染过程。这种增量渲染的方式能够更均匀地分配计算资源，减少长时间的阻塞，提高界面的流畅度和用户体验。

3. 任务优先级: Fiber引入了任务的优先级的概念，可以根据任务的重要性和紧迫性来对任务进行优化和调度。高优先级的任务会优先执行，以保证关键操作的及时完成。

4. 错误边界: Fiber架构引入了错误边界（Error Boundary）的概念，使得在组件渲染中出现的错误可以被捕获和处理，而不会导致整个应用程序崩溃。

总的来说，Fiber架构是React 16中一个重大的改进，它通过引入异步渲染、增量渲染、任务优先级和错误边界等特性，提高了React应用的性能和可维护性。使用Fiber架构可以更好地处理复杂的应用场景，并为用户带来更流畅的交互体验。