React原理之Fiber详解

前置文章：

1. React原理之 React 整体架构解读
2. React原理之整体渲染流程

-----读懂这一篇需要对 React 整体架构和渲染流程有大致的概念 😊-----

在React原理之 React 整体架构解读中，简单介绍了 Fiber 架构，也了解了 Fiber 节点的概念。

Fiber 节点是 Fiber 架构的核心概念之一，它是一种虚拟 DOM 的实现方式。

Fiber 本质上是一个对象， 使用了链表结构。

双重缓冲是一种渲染优化技术，其使用两个 Fiber 树来管理渲染，即当前树 current tree和工作树 work-in-progress tree。当前树代表屏幕上当前显示的内容，而工作树用于准备下一次的渲染更新，用以实现平滑的更新。

Fiber 的含义

前面反复提到，与 React16 之前的栈式架构相比，Fiber 架构中的更新工作是可以中断的循环过程。

fiber 译为“纤维”，React 的 Fiber 架构借鉴了 Fiber 作为轻量级、可调度执行单元的概念，将其应用于组件的渲染和更新过程中。

实际上，Fiber包含三层含义：

1. fiber 架构
2. 静态的数据结构
3. 动态的工作单元

fiber 架构

React16之前的Reconciler采用递归的方式执行，数据保存在递归调用栈中，所以被称为stack Reconciler。React16的Reconciler基于Fiber节点实现，被称为Fiber Reconciler，各个 FiberNode 之间通过链表的形式串联起来。

看一下简化版源码：

function FiberNode(tag, pendingProps, key, mode) {//...// Fiber树结构:周围的 Fiber Node 通过链表的形式进行关联this.return = null; // 上一级节点this.child = null; // 第一个子节点this.sibling = null; // 下一个同级节点this.index = 0; // 在上一级节点中的索引//...
}

静态的数据结构

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

function FiberNode(tag, pendingProps, key, mode) {//...// 实例属性：// 节点类型标记 Function/Class/Host...this.tag = tag;// key属性this.key = key;// 组件的元素类型，大部分情况同type，某些情况不同，比如FunctionComponent使用React.memo包裹this.elementType = null;// 实际的 JavaScript 对象类型。对于 FunctionComponent，指函数本身，对于ClassComponent，指class，对于HostComponent，指DOM节点tagNamethis.type = null;// 节点对应的真实DOM节点this.stateNode = null;//...
}

动态的工作单元

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

// Props和State 改变相关信息
this.pendingProps = pendingProps; // 当前待处理的props
this.memoizedProps = null; // 上次渲染完成，已应用到组件的props
this.updateQueue = null; // 更新队列，用于存储状态更新和回调
this.memoizedState = null; // 上次渲染完成后的state，即组件的当前状态
this.dependencies = null; // 依赖列表，用于追踪副作用this.mode = mode; // Fiber的模式// Effects 副作用
this.flags = NoFlags; // Fiber的标志位，表示Fiber的生命周期状态
this.subtreeFlags = NoFlags; // 子树的标志位
this.deletions = null; // 待删除的子Fiber列表// 优先级调度
this.lanes = NoLanes; // 当前Fiber的优先级
this.childLanes = NoLanes; // 子Fiber的优先级

下一篇：React原理之Fiber双缓冲