五、Fiber架构的实现原理

在

三、React 新版架构章节中，我们提到了虚拟 DOM 在 React 中有一个正式的称呼——Fiber。在之后的学习中，我们会逐渐用 Fiber 来取代 React16 虚拟 DOM这一称呼。

接下来让我们了解一下 Fiber 因何而来？他的作用是什么？

最早的 Fiber 官方解释来源于 2016 年 React 团队成员 Acdlite 的一篇介绍。

从上一章节的学习我们知道：

在 React15 及之前，Reconciler 采用递归的方式创建虚拟 DOM，递归的过程是不能中断的。如果组件树的层级很深，递归会占用线程很多时间，造成卡顿。

为了解决这个问题，React16 将递归的无法中断的更新重构为异步的可中断更新。由于曾经用于递归的虚拟 DOM 数据结构已经无法满足需求。于是，全新的 Fiber 架构应运而生。

Fiber 包含三层含义：

作为架构来说，之前的 React15 的 Reconciler 采用递归的方式执行，数据保存在递归的调用栈中，所以被称为 Stack Reconciler。React16 的 Reconciler 基于 Fiber 节点实现的，被称为 Fiber Reconciler。

作为静态的数据结构来说，每个 Fiber 节点对应一个 React element，保存了该组件的类型（函数组件/类组件/原生组件…）、对应的 DOM 节点等信息。

你可以从这里看到 Fiber 节点的属性定义。虽然属性很多，但是我们可以按三层含义将他们分类来看：

每个 Fiber 节点有个对应的React element，多个 Fiber 节点是如何连接形成树呢？靠如下三个属性：

举个例子，如下的组件结构：

对应的 Fiber 树结构：

这里需要提一下，为什么父级指针叫做 return 而不是 parent 或者 father 呢？因为作为一个工作单元，return 指节点执行完 completeWork 后会返回的下一个节点。子 Fiber节点及其兄弟节点完成工作后会返回其父级节点，所以用 return 指代父级节点。

作为一种静态的数据结构，保存了组件相关的信息:

作为动态的工作单元，Fiber 中使用了如下参数保存了本次更新相关的信息，我们会在后续的更新流程中使用到具体属性时再详细介绍

如下两个字段保存调度优先级相关的信息。会在讲解 Scheduler 时介绍。

注意在2020年5月，调度优先级策略经历了比较大的重构。以 expirationTime 属性为代表的优先级模型被 lane 取代。详见这个PR 如果你的源代码中 fiber.expirationTime 仍存在，请参照调试源码章节获取最新代码。

在这个章节我们了解了Fiber的起源与架构，其中Fiber节点可以构成Fiber树。那么Fiber树和页面呈现的DOM树有什么关系，React又是如何更新DOM的呢？

繁体雲