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

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

Fiber的起源

最早的Fiber官方解释来源于2016年React团队成员Acdlite的一篇介绍Fiber架构的实现原理 - 图1 (opens new window)。

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

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

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

Fiber的含义

Fiber包含三层含义：

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

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

  3. 作为动态的工作单元来说，每个Fiber节点保存了本次更新中该组件改变的状态、要执行的工作（需要被删除/被插入页面中/被更新…）。

Fiber的结构

你可以从这里看到Fiber节点的属性定义Fiber架构的实现原理 - 图2 (opens new window)。虽然属性很多，但我们可以按三层含义将他们分类来看

  1. function FiberNode(
  2.   tag: WorkTag,
  3.   pendingProps: mixed,
  4.   key: null | string,
  5.   mode: TypeOfMode,
  6. ) {
  7.   // 作为静态数据结构的属性
  8.   this.tag = tag;
  9.   this.key = key;
  10.   this.elementType = null;
  11.   this.type = null;
  12.   this.stateNode = null;
  14.   // 用于连接其他Fiber节点形成Fiber树
  15.   this.return = null;
  16.   this.child = null;
  17.   this.sibling = null;
  18.   this.index = 0;
  20.   this.ref = null;
  22.   // 作为动态的工作单元的属性
  23.   this.pendingProps = pendingProps;
  24.   this.memoizedProps = null;
  25.   this.updateQueue = null;
  26.   this.memoizedState = null;
  27.   this.dependencies = null;
  29.   this.mode = mode;
  31.   this.effectTag = NoEffect;
  32.   this.nextEffect = null;
  34.   this.firstEffect = null;
  35.   this.lastEffect = null;
  37.   // 调度优先级相关
  38.   this.lanes = NoLanes;
  39.   this.childLanes = NoLanes;
  41.   // 指向该fiber在另一次更新时对应的fiber
  42.   this.alternate = null;
  43. }

作为架构来说

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

  1. // 指向父级Fiber节点
  2. this.return = null;
  3. // 指向子Fiber节点
  4. this.child = null;
  5. // 指向右边第一个兄弟Fiber节点
  6. this.sibling = null;

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

  1. function App() {
  2.   return (
  3.     <div>
  4.       i am
  5.       <span>KaSong</span>
  6.     </div>
  7.   )
  8. }

对应的Fiber树结构： Fiber架构

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

作为静态的数据结构

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

  1. // Fiber对应组件的类型 Function/Class/Host...
  2. this.tag = tag;
  3. // key属性
  4. this.key = key;
  5. // 大部分情况同type，某些情况不同，比如FunctionComponent使用React.memo包裹
  6. this.elementType = null;
  7. // 对于 FunctionComponent，指函数本身，对于ClassComponent，指class，对于HostComponent，指DOM节点tagName
  8. this.type = null;
  9. // Fiber对应的真实DOM节点
  10. this.stateNode = null;

作为动态的工作单元

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

  2. // 保存本次更新造成的状态改变相关信息
  3. this.pendingProps = pendingProps;
  4. this.memoizedProps = null;
  5. this.updateQueue = null;
  6. this.memoizedState = null;
  7. this.dependencies = null;
  9. this.mode = mode;
  11. // 保存本次更新会造成的DOM操作
  12. this.effectTag = NoEffect;
  13. this.nextEffect = null;
  15. this.firstEffect = null;
  16. this.lastEffect = null;

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

  1. // 调度优先级相关
  2. this.lanes = NoLanes;
  3. this.childLanes = NoLanes;

注意

在2020年5月，调度优先级策略经历了比较大的重构。以expirationTime属性为代表的优先级模型被lane取代。详见这个PRFiber架构的实现原理 - 图4 (opens new window)

如果你的源码中fiber.expirationTime仍存在，请参照调试源码章节获取最新代码。

总结

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

我们会在下一节讲解。

参考资料

Lin Clark - A Cartoon Intro to Fiber - React Conf 2017Fiber架构的实现原理 - 图5 (opens new window)