React Fiber架构为什么能实现可中断渲染

React 16 之前的版本使用“栈协调器”，渲染过程像是一次过山车，一旦开始就必须跑完全程。如果组件树很深，主线程会被长时间占用，导致用户输入无法响应，页面出现卡顿。React Fiber 架构的出现解决了这个问题，它将渲染任务变成了“可暂停、可恢复、可打断”的过程。

以下步骤将深入拆解 Fiber 架构实现这一机制的核心原理。

1. 理解从“递归”到“链表”的底层转变

在旧版 React 中，组件的渲染是通过递归调用的。递归依赖 JavaScript 的调用栈，一旦函数入栈，就必须等待其所有子函数执行完毕才能出栈。这种机制无法让出控制权，无法在执行中途暂停。

Fiber 架构废弃了递归，转而使用链表结构来遍历组件树。

构建一种名为 Fiber 节点的数据结构。每个组件（或 DOM 节点）都有一个对应的 Fiber 节点。这些节点通过 child（第一个子节点）、sibling（下一个兄弟节点）和 return（父节点）三个指针连接起来，形成一个单向链表树。

这种结构让 React 能够记录当前渲染到了哪一个节点。即使任务被中断，React 只需要保存当前节点的指针，下次恢复时直接从该指针继续即可，无需重新开始。

2. 定义 Fiber 节点的数据结构

为了实现可中断，每个工作单元必须包含足够的信息，以便在恢复工作时知道下一步该做什么。查看以下代码，了解一个简化的 Fiber 节点包含哪些关键属性：

// 这是一个简化的 Fiber 节点结构
const fiberNode = {
  // 组件类型，如 'div'、'span' 或函数组件本身
  type: 'div',       

  // 指向真实的 DOM 节点（对于原生 DOM 元素）
  stateNode: null,   

  // 指向第一个子节点的 Fiber 指针
  child: null,       

  // 指向下一个兄弟节点的 Fiber 指针
  sibling: null,     

  // 指向父节点的 Fiber 指针
  return: null,      

  // 用于双缓存技术，指向当前节点在另一棵树中的对应节点
  alternate: null,   

  // 标记该节点需要进行何种操作（如：PLACEMENT-插入、UPDATE-更新、DELETION-删除）
  effectTag: 'PLACEMENT' 
};

通过这些指针，React 可以不依赖递归，而是通过循环来遍历整棵树。

3. 模拟工作循环与时间分片

Fiber 架构实现可中断的核心在于“工作循环”。React 并不是一口气执行完所有渲染，而是将任务拆分成一个个小单元。

执行以下逻辑，模拟 React 的工作调度过程：

// 全局变量，记录当前正在处理的 Fiber 节点
let nextUnitOfWork = null;

// 工作循环函数
function workLoop() {
  // 只要还有下一个任务，且时间片未耗尽（shouldYield() 返回 false）
  while (nextUnitOfWork !== null && !shouldYield()) {
    // 执行当前单元的工作，并返回下一个单元
    nextUnitOfWork = performUnitOfWork(nextUnitOfWork);
  }

  // 如果还有任务没做完，但浏览器需要去处理别的任务（如响应用户点击）
  if (nextUnitOfWork !== null && shouldYield()) {
    // 主动让出主线程，告诉浏览器：“等你有空了再叫我继续”
    // 实际 React 使用 scheduler 包调度，这里用 requestIdleCallback 模拟
    requestIdleCallback(workLoop);
  } else {
    // 所有任务完成，提交更改到 DOM
    commitRoot();
  }
}

// 检查是否应该让出主线程
function shouldYield() {
  // 获取当前时间片剩余时间
  const timeRemaining = getTimeRemaining();
  // 如果剩余时间小于 1 毫秒，说明该暂停了
  return timeRemaining < 1;
}

注意这段代码中的 while 循环。它与无限循环不同，它在每次循环都会检查 shouldYield()。一旦时间片耗尽，循环终止，函数退出，主线程被释放。

4. 掌握单元工作的执行逻辑

performUnitOfWork 函数负责处理单个 Fiber 节点，并决定下一个处理谁。这个逻辑分为三个阶段：开始、完成、移动。

1. 处理当前节点：根据 fiberNode 的 effectTag 创建或更新对应的 DOM 节点，并将结果挂载到 fiberNode.stateNode 上。
2. 生成子节点链表：将 React 元素转换为 Fiber 节点，并建立 child 和 sibling 指针连接。
3. 返回下一个工作单元：这是实现遍历的关键。遵循“深度优先遍历”的原则，优先找子节点，没有子节点找兄弟节点，都没有则返回父节点。

阅读以下伪代码，理解遍历顺序：

function performUnitOfWork(fiber) {
  // 1. 开始阶段：处理当前节点（如创建 DOM）
  beginWork(fiber);

  // 2. 如果有子节点，返回子节点作为下一个任务
  if (fiber.child) {
    return fiber.child;
  }

  // 3. 如果没有子节点，说明当前分支到底了，开始向上回溯（完成阶段）
  let nextFiber = fiber;
  while (nextFiber) {
    completeWork(nextFiber);

    // 如果有兄弟节点，处理兄弟节点
    if (nextFiber.sibling) {
      return nextFiber.sibling;
    }

    // 没有兄弟节点，继续回溯到父节点
    nextFiber = nextFiber.return;
  }
}

正是这个 return 指针，让 React 在中断后恢复时，能够准确地找到“刚才是在哪里停下的”，以及“下一步该去哪里”。

5. 理解双缓存技术

为了实现无缝的可中断渲染，Fiber 引入了“双缓存”机制。React 在内存中同时维护两棵树：当前树（Current Tree）和 工作树（Work-in-progress Tree）。

• 当前树：屏幕上正在显示的内容对应的 Fiber 树。
• 工作树：正在更新构建中的 Fiber 树。

当工作循环开始时，React 会复制当前树的节点作为工作树的基础（利用 fiber.alternate 指针互相指向）。所有的更新计算（状态计算、DOM 创建）都在工作树中进行。

由于更新发生在内存中的工作树上，即使渲染过程被中断几十次，用户界面上显示的依然是“当前树”的旧内容，不会出现页面闪烁或渲染到一半的白屏。只有当所有组件都更新完毕，React 才会一次性把工作树替换成当前树。

6. 处理优先级与插队

可中断渲染不仅仅是为了“暂停”，更是为了“让路”。高优先级的任务（如用户点击、输入）需要打断低优先级的任务（如后台数据渲染）。

标记不同任务的优先级。React 内部使用 lane 模型（或之前的 expirationTime）来标识任务紧急程度。

当高优先级更新发生时：

1. 中断当前的 workLoop。
2. 保存当前工作树的进度（即 nextUnitOfWork 指针）。
3. 重启 render 阶段，从头开始构建一棵新的工作树来处理高优先级更新。
4. 完成高优先级渲染并提交到 DOM。
5. 恢复之前被中断的低优先级任务，基于最新的状态继续工作。

这一机制保证了关键交互永远是流畅的，用户感觉不到后台复杂的计算正在排队等待。