第 24 章

Fiber 架构：React 为什么重写了渲染引擎

第24章：Fiber 架构：React 为什么重写了渲染引擎

React 16 用近两年时间秘密重写了渲染引擎，没有改变任何公开 API，却从根本上改变了内部工作方式。

本章核心问题：Fiber 用什么数据结构替代了递归？双缓冲技术解决了什么问题？ 读完本章你将理解：

Fiber 用链表替代递归——遍历可在任意节点暂停，下次从该节点继续
双缓冲：current tree 和 work-in-progress tree 通过 alternate 指针互换
渲染阶段可中断、可丢弃；提交阶段不可中断、同步完成

Level 1 · 你需要知道的（1-3年经验）

Stack Reconciler 的致命缺陷

React 15 及之前使用的是被称为 Stack Reconciler 的渲染引擎。它的工作方式可以用一个词概括：递归。

当你调用 setState 触发重新渲染时，Stack Reconciler 会从根节点开始，递归遍历整棵组件树，比较新旧虚拟 DOM，生成更新操作，然后一次性提交到 DOM。这个过程是同步的、不可中断的。

// React 15 Stack Reconciler 的核心逻辑（伪代码）
function updateComponent(instance, nextElement) {
  const prevRenderedElement = instance._renderedElement;
  const nextRenderedElement = instance.render();
  
  // 递归向下，无法暂停
  updateComponent(
    instance._renderedComponent,
    nextRenderedElement
  );
}

这种递归调用会占用 JavaScript 的调用栈（Call Stack）。当组件树很深、组件数量很多时，一次完整的渲染可能耗时 100ms 甚至更长。在这段时间内，主线程被完全占用，浏览器无法响应用户输入，无法执行动画帧，页面彻底失去响应。

浏览器的刷新频率通常是 60Hz，即每 16.6ms 渲染一帧。如果 JavaScript 执行时间超过这个阈值，用户就会感知到掉帧和卡顿。对于一个复杂的 React 应用，这几乎是必然发生的。

Stack Reconciler 的问题不在于算法效率，而在于架构上的不可中断性。你无法在递归调用的中途"暂停一下，先处理用户点击，再回来继续"。JavaScript 是单线程的，调用栈一旦开始就必须执行完毕。

Fiber：用链表重新定义工作单元

React 团队的解决方案是彻底放弃递归，用可暂停的循环替代它。这要求把"渲染一棵树"这个整体工作，分解成一个个独立的、可以单独执行的小工作单元（Unit of Work）。

每个工作单元对应一个 Fiber 节点。整棵 Fiber 树不再是嵌套的对象结构，而是通过指针连接的链表——具体来说，是一棵用三个指针（return、child、sibling）表示的树形链表结构。

这种数据结构的关键优势在于：遍历可以随时停止，只需记住当前处理到哪个节点，下次可以从该节点继续。

FiberNode 数据结构

以下是 React 源码中 FiberNode 的核心结构，来自 packages/react-reconciler/src/ReactFiber.js：

// 简化自 packages/react-reconciler/src/ReactFiber.js
function FiberNode(tag, pendingProps, key, mode) {
  // 标识节点类型（FunctionComponent=0, ClassComponent=1, HostRoot=3, HostComponent=5...）
  this.tag = tag;
  this.key = key;
  this.elementType = null;  // JSX 中的原始类型（如函数引用）
  this.type = null;         // 解析后的类型（可能经过 lazy 包装解析）
  this.stateNode = null;    // 对应的真实节点（DOM 元素或类组件实例）

  // Fiber 树结构：三个核心指针
  this.return = null;   // 指向父节点（注意：不叫 parent）
  this.child = null;    // 指向第一个子节点
  this.sibling = null;  // 指向下一个兄弟节点
  this.index = 0;       // 在兄弟节点中的位置

  // Props 与 State
  this.pendingProps = pendingProps;  // 本次渲染的新 props
  this.memoizedProps = null;         // 上次渲染完成的 props
  this.updateQueue = null;           // 更新队列（setState 产生的更新）
  this.memoizedState = null;         // 上次渲染完成的 state（Hooks 链表的头节点）
  this.dependencies = null;          // Context 依赖

  // 模式标志（Concurrent、StrictMode 等）
  this.mode = mode;

  // 副作用标志
  this.flags = NoFlags;           // 本节点需要执行的操作（Placement、Update、Deletion 等）
  this.subtreeFlags = NoFlags;    // 子树中汇总的 flags（React 18+ 优化）
  this.deletions = null;          // 需要删除的子节点列表

  // 调度优先级
  this.lanes = NoLanes;
  this.childLanes = NoLanes;

  // 双缓冲指针
  this.alternate = null;  // 指向另一棵树中对应的 Fiber 节点
}

理解这个结构是理解 React 工作原理的核心。几个关键点需要特别说明：

return 而非 parent：React 将父节点指针命名为 return，这暗示了其设计意图——当一个 Fiber 节点的工作完成后，工作控制权应该"返回"给父节点继续处理。这与函数调用栈中的返回语义高度吻合。

stateNode 的含义随节点类型变化：对于宿主组件（div、span 等），stateNode 是对应的真实 DOM 节点；对于类组件，stateNode 是类的实例；对于根节点（FiberRoot），stateNode 是 FiberRootNode。

memoizedState 是 Hooks 链表的入口：对于函数组件，memoizedState 不是一个简单的状态值，而是 Hooks 链表的第一个节点。每个 useState、useEffect 调用都对应链表中的一个节点。

双缓冲技术：alternate 指针实现了双缓冲（Double Buffering）机制。React 同时维护两棵 Fiber 树——当前显示在屏幕上的"current tree"和正在构建的"work-in-progress tree"。两棵树中对应节点通过 alternate 相互指向。渲染完成后，两棵树互换角色。

两个工作循环：同步与并发

React 提供了两种工作循环模式，它们的唯一区别在于是否在每个工作单元执行完后检查是否需要让出控制权。

// packages/react-reconciler/src/ReactFiberWorkLoop.js

// 同步模式：不可中断，一口气执行完
function workLoopSync() {
  while (workInProgress !== null) {
    performUnitOfWork(workInProgress);
  }
}

// 并发模式：每执行完一个工作单元，检查是否需要让出
function workLoopConcurrent() {
  while (workInProgress !== null && !shouldYield()) {
    performUnitOfWork(workInProgress);
  }
}

shouldYield() 来自 Scheduler 包，它会检查当前帧是否还有剩余时间。如果时间不够了，workLoopConcurrent 会停止循环，将控制权还给浏览器，等待下一帧再继续。

这就是并发模式的本质：渲染工作被分散到多个帧中完成，每帧只做一部分。

两个阶段：渲染与提交

整个更新流程分为两个截然不同的阶段：

渲染阶段（Render Phase / Reconciliation Phase）

渲染阶段的工作是构建新的 work-in-progress Fiber 树，确定哪些节点需要更新。这个阶段：

可以被中断：使用 workLoopConcurrent，随时可以让出控制权
没有副作用：不修改 DOM，不执行生命周期中的副作用方法
可以被丢弃：如果有更高优先级的更新进来，当前工作可以直接丢弃，从头开始处理新的更新

渲染阶段由 beginWork 和 completeWork 两个函数驱动：

beginWork：处理节点，创建或协调子 Fiber 节点，打上相应的 flags
completeWork：节点工作完成后，创建真实 DOM（但不插入），将 flags 向上冒泡到父节点的 subtreeFlags

提交阶段（Commit Phase）

提交阶段将渲染阶段的结果应用到真实 DOM，并执行所有副作用。这个阶段：

不可中断：必须同步完成，不能被中断
有副作用：操作 DOM，调用 useLayoutEffect、useEffect、生命周期方法等
分三个子阶段：

// packages/react-reconciler/src/ReactFiberCommitWork.js（简化）
function commitRoot(root) {
  // 子阶段 1：BeforeMutation（DOM 修改前）
  // 调用 getSnapshotBeforeUpdate，调度 useEffect
  commitBeforeMutationEffects(root, finishedWork);
  
  // 子阶段 2：Mutation（修改 DOM）
  // 执行插入、更新、删除操作
  // 调用 useLayoutEffect 的 cleanup 函数
  commitMutationEffects(root, finishedWork, lanes);
  
  // 切换 current 树
  root.current = finishedWork;
  
  // 子阶段 3：Layout（DOM 修改后）
  // 调用 useLayoutEffect 的 setup 函数
  // 调用 componentDidMount / componentDidUpdate
  commitLayoutEffects(finishedWork, root, lanes);
  
  // 异步调度 useEffect
  scheduleCallback(NormalSchedulerPriority, () => {
    flushPassiveEffects();
  });
}

提交阶段不可中断的原因很直接：DOM 操作要么全做，要么不做，不能做一半——否则用户看到的是残缺的界面状态。

Level 2 · 它是怎么运行的（3-5年经验）

树的遍历：深度优先的链表遍历

Fiber 树的遍历不再是递归，而是一个深度优先的循环。遍历过程遵循以下规则：

从根节点开始，优先向下探索（child）
没有子节点时，处理当前节点，然后向右探索兄弟节点（sibling）
没有兄弟节点时，通过 return 返回父节点，继续其兄弟节点

这个过程可以在任意节点暂停，只需保存当前的 workInProgress（当前工作节点的指针），下次直接从这里继续。

// packages/react-reconciler/src/ReactFiberWorkLoop.js（简化）
function performUnitOfWork(unitOfWork) {
  const current = unitOfWork.alternate;
  
  // beginWork：处理当前节点，返回子节点（如果有）
  let next = beginWork(current, unitOfWork, renderLanes);
  
  unitOfWork.memoizedProps = unitOfWork.pendingProps;
  
  if (next === null) {
    // 没有子节点，完成当前节点
    completeUnitOfWork(unitOfWork);
  } else {
    // 有子节点，返回子节点作为下一个工作单元
    workInProgress = next;
  }
}

Level 3 · 规范怎么定义的（资深）

React 18 与 React 19 的演进

React 18 在 Fiber 架构基础上完善了并发特性，React 19 进一步优化了调度和提交阶段：

在 React 19 中，subtreeFlags 的计算逻辑经过优化，减少了不必要的子树遍历。同时，React 19 对 Fiber 节点的内存布局进行了调整，将热路径上的字段放在更接近对象头部的位置，以利用 V8 引擎的内联缓存（Inline Cache）优化。

// React 19 中，FiberNode 的创建改用对象字面量（部分场景）
// 这有助于 V8 更好地优化对象形状（Hidden Class）
function createFiberImplObject(tag, pendingProps, key, mode) {
  return {
    tag,
    key,
    elementType: null,
    type: null,
    stateNode: null,
    return: null,
    child: null,
    sibling: null,
    // ... 其他字段
  };
}

理解 Fiber 架构之后，React 的很多设计决策就变得清晰了：为什么不能在条件语句中调用 Hooks（因为 Hooks 链表必须有固定顺序），为什么 useLayoutEffect 是同步的而 useEffect 是异步的（因为前者在提交阶段同步执行，后者在提交后异步调度），为什么并发模式可以实现优先级调度（因为工作循环可以在任意时刻中断并重新开始）。

Fiber 不只是一个实现细节，它是 React 并发哲学的物质载体。

Level 4 · 边界与陷阱（所有人）

生产环境常见问题

在实际项目中，本章涵盖的概念最常见的问题包括：

忽视边界条件：在正常路径下工作正常的代码，在异常路径（网络失败、用户快速操作、组件卸载）下可能产生 bug。始终考虑清理和取消逻辑。
过早优化：在没有测量的情况下添加优化代码，增加了复杂度但不一定提升性能。先用 Profiler 确认问题存在，再实施优化。
文档与实际行为的差异：React 的行为在不同版本间可能有微妙差异，尤其是并发模式相关的特性。始终以实际测试结果为准。

本章评分

4.6 / 5 (5 评分)