React 技术揭秘 2-1：剖析 Fiber 架构

2023-12-19 10:23:47

纤维的诞生：对性能的孜孜不倦的追求

在计算机科学领域，总有一种不满足于现状、勇于探索和开拓创新的精神在不断推动着技术的发展和进步。 React 也不例外，它一直在寻求新的方法来提高其性能和用户体验。 Fiber 架构的诞生就是这一探索过程中的一个里程碑。

在 React 15 及更早的版本中，Reconciler 采用递归的方式创建虚拟 DOM。 这种方式虽然简单明了，但它也有一个致命的缺陷：递归过程是不能中断的。一旦 Reconciler 开始递归创建虚拟 DOM，它就必须一直运行下去，直到整个虚拟 DOM 被创建完成。这会导致两个问题：

性能问题： 当虚拟 DOM 很大的时候，递归过程会消耗大量的时间和资源，从而导致性能问题。
用户体验问题： 在递归过程中，用户无法与应用程序进行交互，这会对用户体验造成负面影响。

为了解决这些问题，React 16 引入了 Fiber 架构。 Fiber 架构采用了一种新的方式来创建虚拟 DOM。这种方式被称为深度优先搜索（DFS）。深度优先搜索是一种遍历树形结构的算法，它从树的根节点开始，沿着一条路径一直向下遍历，直到遇到叶节点。然后，它回溯到上一个节点，并沿着另一条路径继续向下遍历，以此类推。

深度优先搜索与递归的主要区别在于，深度优先搜索可以中断。 当需要中断时，深度优先搜索会将当前的搜索状态保存起来，然后继续执行其他任务。当需要继续搜索时，深度优先搜索会从保存的搜索状态继续进行。

Fiber 架构利用深度优先搜索的这种特性来创建虚拟 DOM。 当 Reconciler 需要创建虚拟 DOM 时，它会从根节点开始，沿着一条路径一直向下遍历，直到遇到叶节点。然后，它回溯到上一个节点，并沿着另一条路径继续向下遍历，以此类推。但是，如果在遍历过程中需要中断，Reconciler 可以将当前的搜索状态保存起来，然后继续执行其他任务。当需要继续创建虚拟 DOM 时，Reconciler 会从保存的搜索状态继续进行。

Fiber 架构的引入带来了许多好处。 它提高了 React 的性能，因为深度优先搜索比递归更有效率。它还改善了 React 的用户体验，因为用户可以在应用程序创建虚拟 DOM 的过程中与应用程序进行交互。此外，Fiber 架构还为 React 提供了更多的灵活性，使得 React 可以更好地处理复杂的任务。

深入剖析 Fiber 架构

Fiber 架构的核心数据结构是 Fiber。 Fiber 是一个轻量级的对象，它包含了虚拟 DOM 节点的信息，例如节点的类型、属性和子节点。Fiber 还包含了指向父节点和子节点的指针。

Reconciler 通过遍历 Fiber 来创建虚拟 DOM。 当 Reconciler 遍历到一个 Fiber 时，它会根据 Fiber 的信息创建相应的虚拟 DOM 节点。然后，它会继续遍历 Fiber 的子节点，并为每个子节点创建相应的虚拟 DOM 节点。以此类推，直到遍历完所有的 Fiber。

Fiber 架构还包含一个任务队列。 任务队列是一个先进先出的队列，它存储需要执行的任务。Reconciler 会将创建虚拟 DOM 的任务添加到任务队列中。然后，任务队列会按照先进先出的原则执行这些任务。

Fiber 架构还包含一个调度器。 调度器负责管理任务队列中的任务。调度器会根据任务的优先级和应用程序的当前状态来决定执行哪些任务。