React 的 Fiber 架构，是如何将 Diff 分片执行的？-EW帮帮网

React 的 Fiber 架构是 React 16 引入的一项重大改进，它的核心目标是提升渲染性能，尤其是在复杂应用中实现更流畅的交互体验。Fiber 架构通过将 Diff 和渲染过程“分片”（time slicing）并“可中断”（interruptible），避免了长时间阻塞主线程。下面我会详细解释 Fiber 的工作原理，以及它如何实现 Diff 的分片执行。

1. 什么是 Fiber？

Fiber 是 React 内部的一种数据结构，可以看作是对虚拟 DOM 树的重构。它将传统的树形结构拆解为一个链表形式的“工作单元”（work unit），每个 Fiber 节点代表一个组件或 DOM 元素，包含以下关键信息：

类型（tag）：如 DOM 元素、类组件、函数组件等。
属性（props）：节点的属性。
状态（state）：组件的状态。
指针（child、sibling、return）：分别指向第一个子节点、下一个兄弟节点和父节点。
工作状态（effectTag）：标记需要执行的操作（如插入、更新、删除）。

这种链表结构让 React 可以更灵活地遍历和操作节点，而不像传统递归那样一次性完成所有工作。

2. 为什么需要分片执行？

在 React 15 及之前的版本中，虚拟 DOM 的 Diff 和渲染是同步完成的，整个过程是一个深度优先的递归调用（称为“Stack Reconciliation”）。这种方式有以下问题：

阻塞主线程：如果组件树很大，递归可能耗时较长，导致页面卡顿，用户交互（如点击、输入）无法及时响应。
无法中断：一旦开始，整个 Diff 和 DOM 更新必须一气呵成，无法暂停或分步执行。

Fiber 架构解决了这些问题，通过以下方式实现分片执行：

任务分解：将 Diff 和渲染拆分为多个小任务（每个 Fiber 节点是一个任务）。
时间分片：利用浏览器空闲时间（requestIdleCallback 或类似机制）逐步完成这些任务。
优先级调度：通过调度器（Scheduler）动态调整任务优先级，确保高优先级任务（如用户输入）优先执行。

3. Fiber 如何分片执行 Diff？

Fiber 架构将 Diff 过程分为两个阶段：Reconciliation（协调） 和 Commit（提交），并通过分片处理 Reconciliation 阶段。

阶段 1: Reconciliation（协调阶段）

工作循环（Work Loop）
Fiber 使用一个主循环（workLoop）来遍历 Fiber 树，每次处理一个 Fiber 节点。代码大致如下：

function workLoop(deadline) {
  let shouldYield = false;
  while (nextUnitOfWork && !shouldYield) {
    nextUnitOfWork = performUnitOfWork(nextUnitOfWork);
    shouldYield = deadline.timeRemaining() < 1; // 检查是否还有剩余时间
  }
  if (!nextUnitOfWork) {
    // 所有任务完成，进入 Commit 阶段
    commitRoot();
  } else {
    // 未完成，请求下一帧继续
    requestIdleCallback(workLoop);
  }
}

function performUnitOfWork(fiber) {
  // 处理当前 Fiber（Diff、更新状态等）
  beginWork(fiber);
  // 返回下一个工作单元
  if (fiber.child) return fiber.child;
  let next = fiber;
  while (next) {
    if (next.sibling) return next.sibling;
    next = next.return;
  }
  return null;
}

requestIdleCallback(workLoop);

分片执行
- workLoop 利用 deadline.timeRemaining() 检查当前帧是否有剩余时间。
- 如果时间不足（shouldYield 为 true），暂停当前工作，交还控制权给浏览器，主线程可以处理其他任务（如动画、用户输入）。
- 下一次空闲时，requestIdleCallback 继续从中断处恢复执行。
Diff 的分片
- 每次 performUnitOfWork 只处理一个 Fiber 节点，对比其新旧状态（props、state），标记更新类型（如 Placement、Update、Deletion）。
- 不一次性完成整棵树的 Diff，而是逐步推进，遇到时间限制就暂停。

阶段 2: Commit（提交阶段）

一旦 Reconciliation 完成，所有 Fiber 节点的更新标记（effectTag）已经计算好，React 会一次性将更改提交到真实 DOM。
Commit 阶段是同步的，不能中断，因为 DOM 更新必须保持一致性，避免用户看到不完整的界面。

4. 分片执行的例子

假设组件树如下：

       A
    /     \
   B       C
  / \     / \
 D   E   F   G

传统递归方式

React 15 会一次性递归遍历 A -> B -> D -> E -> C -> F -> G，完成所有 Diff 和 DOM 更新。
如果树很深或节点很多，主线程可能被阻塞几十甚至上百毫秒。

Fiber 分片方式

帧 1：处理 A，计算其状态更新，标记子节点 B 和 C，时间用尽，暂停。
帧 2：处理 B，计算其 Diff，标记子节点 D 和 E，时间用尽，暂停。
帧 3：处理 D，完成 Diff，继续处理 E，时间用尽，暂停。
帧 4：处理 C -> F -> G，完成剩余 Diff。
提交：所有 Diff 完成后，统一更新 DOM。

每个帧只处理部分节点，浏览器可以在帧间隙响应用户操作（如动画或点击），避免卡顿。

5. 关键技术支持

Scheduler（调度器）
React 使用独立的 Scheduler 包管理任务优先级。比如：
- 高优先级：用户输入、动画。
- 低优先级：后台数据更新。
  如果高优先级任务插入，Fiber 会暂停低优先级任务，优先处理。
requestIdleCallback
浏览器提供的 API，用于在主线程空闲时执行任务。React 还实现了自己的 polyfill，确保跨浏览器兼容。
链表结构
Fiber 的 child、sibling、return 指针让遍历可以随时中断和恢复，而不像递归那样依赖调用栈。

6. 对 Diff 的影响

分片带来的灵活性
传统 Diff 是一次性完成的，而 Fiber 将 Diff 分解为小块，逐步对比新旧虚拟 DOM。这样即使组件树很大，也不会一次性耗尽主线程时间。
性能提升
对于大型应用，Fiber 显著减少了卡顿，尤其是在初次渲染或频繁更新时。
局限性
分片只发生在 Reconciliation 阶段，Commit 阶段仍需同步执行，因此 DOM 操作本身仍是性能瓶颈。

7. 总结

React 的 Fiber 架构通过以下方式实现 Diff 的分片执行：

将组件树拆分为 Fiber 链表，分解为小任务。
使用工作循环逐步处理每个 Fiber，检查时间限制以暂停或继续。
通过调度器动态调整任务优先级，确保流畅的用户体验。

这种机制让 React 在处理复杂 UI 时更具弹性和效率，尤其适用于需要高响应性的场景。

React 的 Fiber 架构，是如何将 Diff 分片执行的？