Fiber 架构

在最新的 React.js 18 中， React 添加了期待已久的并发渲染器，并且支持开启并发更新功能（不会有并发更新模式），并发更新的体系结构如下图所示。本文将会从 Fiber 架构出发，一步步深挖 React 并发原理。

Fiber === React DOM

Fiber 架构其实是 React 中 VDOM 的实现，它是 16 版本后 React 对核心算法的一次重新实现。

它的主要目标是提高动画、布局、手势等操作的响应速度。 Fiber 有能力将渲染工作分割成多块，并将它们分散到多个帧中去渲染。其他关键功能包括有能力暂停、渲染，有新的更新时可以重复使用；有能力对不同的更新增加优先级；新的并发模式。

React 16 以前

当调用 ReactDOM 的 render 方法或者触发更新（ setState ）时，都会触发 React 的两个阶段，分别是 reconciler 和 renderer ，中文的解释是协调器和渲染器。从功能的实现上看， 这两个阶段分别对应 Diff 和 渲染过程，如下图：

协调阶段（Reconciler）： 官方解释。 React 会自顶向下通过递归，遍历新数据生成新的 Virtual DOM ，然后通过 Diff 算法，找到需要变更的元素 (Patch)，放到更新队列里面去。

渲染阶段（Renderer）：遍历更新队列，通过调用宿主环境的 API，实际更新渲染对应元素。宿主环境，比如 DOM、 Native、 WebGL 等。

在协调阶段阶段，由于是采用的递归的遍历方式，这种也被成为 Stack Reconciler ，主要是为了区别 Fiber Reconciler 取的一个名字。这种方式有一个特点：一旦任务开始进行，就无法中断，那么 JavaScript 将一直占用主线程， 一直要等到整棵 Virtual DOM 树计算完成之后，才能把执行权交给渲染引擎，那么这就会导致一些用户交互、动画等任务无法立即得到处理，就会有卡顿，非常的影响用户体验。

想要解决这个问题， React 现在的做法是引入 并发功能，通过一套优先级算法实现任务中断 / 恢复。原有的 Stack Reconciler 架构无法做到任务中断 / 恢复，不支持异步更新，因此 16 版本进行了重构，引进了 Fiber 架构。

什么是 Fiber

在上面的介绍中，我们已经确定 Fiber 的主要目标是让 React 能够使用并发调度。具体来说，需要实现以下目标：

任务中断与恢复

为不同类型的任务分配优先级

为了做到这一点，我们需要设计一种方法将这些 “任务（Task）” 分解为单元，用于保存当前的更新中的一些信息，同时还需要保存一些静态数据（如当前 Task 对应的 节点信息），这就是一个 Fiber 节点（FiberNode）， Fiber 架构就是由多个 FiberNode 组成的树状结构。不同 FiberNode 间由 child、return、sibling 等属性连接。

总的来说， Fiber 包含三层含义：

作为架构，Fiber 是由 FiberNode 组成的树状结构，区别于 16 版本前的 Stack Reconciler，16 版本的 Reconciler 基于 Fiber 实现。

作为数据结构，每一个 FiberNode 对应一个 ReactElement，保存了该组件的类型、DOM 结构等信息。

作为工作单元，每一个 FiberNode 保存了本次更新中该组件需要改变的状态，需要执行的工作。

Fiber 架构的组成

总的来说，Fiber 架构由三部分组成：

FiberRootNode：保存挂载的根节点等信息，也是执行更新开始的节点。

负责 Current Fiber Tree 与 Wip Fiber Tree 的转换

保存任务的调度信息

HostRoot：应用在宿主环境上挂载的根节点，连接整颗 Fiber Tree

Fiber 工作原理

Fiber 架构中会存在两条 Fiber Tree，一颗是真实 UI 对应的 Fiber Tree，另外一颗是正在内存中构建的 Fiber Tree，分别被称为 “current” 和 “workInProgress”， 这两颗 Fiber Tree 通过 alternate 属性相互连接。

这是一种被称为 Multiple buffering - Wikipedia --- 多重缓冲 - 维基百科 （双缓存）的工作机制。试想一下，在 Fiber 需要更新时，我们不需要直接使用 current Fiber Tree 进行更新，而是基于 current Fiber Tree 复制一份 workInProgress Fiber Tree 进行更新。在更新完成后，只需要将两颗 Fiber Tree 互换就完成了 Fiber Tree 的更新。

总结

本文简单介绍了 React 16 及以后版本引入的并发模型，介绍 Fiber 结构的组成及其工作原理。在接下来的章节中，将会介绍 React 中的三大核心流程及其交互，进一步分析 React 并发原理。