fiber架构

在咱们深入 Fiber 之前，先想想一个问题：为什么 React 需要 Fiber？

1. 为什么需要 Fiber？——旧架构的痛点

在 Fiber 之前，React 的协调（Reconciliation）过程是基于“栈（Stack）”的。这意味着，当组件状态发生变化时，React 会同步地、递归地遍历整个组件树，计算出需要更新的部分，然后一次性地更新 DOM。

这种同步递归的模式有一个巨大的缺点：

• 不可中断： 一旦更新开始，就必须一口气执行完，直到整个组件树的更新完成。
• 阻塞主线程： 如果组件树很大，或者更新很复杂，这个过程就会占用 JavaScript 主线程很长时间，导致浏览器无法响应用户操作（比如点击、输入），页面就会出现卡顿、不流畅的感觉，也就是所谓的“掉帧”。

想象一下，你正在做一桌大餐，旧的 React 就像一个厨师，一旦开始切菜，就必须把所有菜都切完才能开始炒。如果菜太多，客人就得饿着肚子等很久。这就是旧架构的痛点。

为了解决这个痛点，React 团队彻底重写了协调器，引入了 Fiber 架构。

2. 什么是 Fiber？——可中断的工作单元

Fiber 可以理解为 React 协调器（Reconciler）的全新实现。它将组件的渲染过程拆分成一个个可中断、可恢复的工作单元。

• Fiber Node (Fiber 节点)： 在 Fiber 架构中，每个 React 元素（比如你写的 <Div>、<MyComponent>）在内部都会对应一个 Fiber 节点。这个 Fiber 节点是一个 JavaScript 对象，包含了组件的类型、属性、状态、以及与其他 Fiber 节点（父、子、兄弟）的连接关系。它就像一个“任务清单”上的一个任务项。
• Fiber 树： 所有的 Fiber 节点会构成一棵 Fiber 树，它就是组件树的运行时表示。这棵树会不断地被构建和更新。

核心理念： React 不再是同步递归地处理组件树，而是将工作拆分成小块，每处理完一小块就检查一下有没有更高优先级的任务（比如用户输入），如果有，就暂停当前工作，先去处理紧急任务，处理完再回来继续之前的工作。

3. Fiber 架构的核心优势：让应用“会呼吸”

正是因为这种“可中断、可恢复”的特性，Fiber 带来了巨大的优势：

• 可中断与可恢复 (Interruptible and Resumable)：
  • 这是 Fiber 最核心的能力。React 可以在渲染过程中暂停，把控制权交还给浏览器，让浏览器处理高优先级的事件（比如动画、用户输入），避免卡顿。
  • 等浏览器空闲时，React 再从上次暂停的地方继续渲染。这就让用户界面感觉更加流畅、响应迅速。
• 优先级调度 (Priority Scheduling)：
  • 不同的更新可以有不同的优先级。例如，用户输入的响应（如打字）优先级最高，动画次之，网络请求返回的数据更新可能优先级较低。
  • Fiber 可以根据优先级来决定先处理哪些任务，后处理哪些任务，确保关键的用户交互始终保持流畅。
• 副作用列表 (Effect List)：
  • Fiber 在渲染阶段（稍后会讲）会构建一个副作用列表（Effect List）。这个列表包含了所有需要对 DOM 进行操作（新增、删除、更新）的节点。
  • 在提交阶段，React 只需要遍历这个副作用列表，一次性地完成所有 DOM 操作，大大减少了 DOM 操作的次数和性能开销。
• 错误边界 (Error Boundaries)：
  • Fiber 使得错误边界（Error Boundaries）的实现成为可能。如果组件树的某个子树在渲染过程中发生错误，Fiber 可以捕获这个错误，然后卸载错误的子树，而不会导致整个应用崩溃。这大大提升了应用的健壮性。

4. Fiber 的工作流程：两大阶段

Fiber 的工作可以分为两个主要阶段：

阶段一：协调/渲染阶段 (Reconciliation/Render Phase) - “计划与比较”

• 过程：

  这个阶段是可中断的。React 会遍历 Fiber 树，从根节点开始向下，对每个 Fiber 节点执行“工作”（Work）。

  • 构建新的 Fiber 树： React 会根据最新的 state 和 props，与当前的 Fiber 树进行比较（Diff 算法），找出需要更新的 Fiber 节点，并生成一个新的 Fiber 树（被称为“WorkInProgress”树）。
  • 标记副作用： 在比较过程中，如果发现某个节点需要进行 DOM 操作（比如新增、删除、更新属性、更新文本内容），就会在这个 Fiber 节点上打上“副作用标记”（Effect Tag），并将其添加到副作用列表中。
  • 不操作 DOM： 在这个阶段，React 不会进行任何真实的 DOM 操作。它只是在内存中构建和标记。

• 中断与恢复： 这个阶段，React 会周期性地检查剩余的时间片，如果时间片用完，或者有更高优先级的任务，它就会暂停当前的工作，把控制权交给浏览器。等到下次空闲时，再从上次暂停的地方继续。

阶段二：提交阶段 (Commit Phase) - “执行与更新”

• 过程： 这个阶段是不可中断的。一旦进入提交阶段，React 会遍历在协调阶段生成的副作用列表，并一次性地执行所有真实的 DOM 操作（插入、更新、删除等）。
• 同步执行： 这个阶段必须同步完成，因为一旦开始修改 DOM，就不能中断，否则可能导致 UI 不一致。
• 生命周期/Hook 触发： 在这个阶段，一些生命周期方法（如 componentDidMount、componentDidUpdate）和 useEffect 的回调函数也会被执行，因为 DOM 已经准备就绪。

形象比喻：

想象一下，你是一个餐厅老板，需要给顾客准备饭菜。

• 旧的 React (Stack Reconciler)： 你是同步厨师。接到订单后，你一个人从买菜、洗菜、切菜、炒菜、摆盘，全程一口气干完，期间无论顾客多催，你都不能停下来。如果菜多，顾客就得等很久。

• 新的 React (Fiber Reconciler)：

  你是一个项目经理。

  • 协调/渲染阶段 (计划与比较)： 你接到订单后，会先列一个详细的“任务清单”（WorkInProgress Fiber 树），记录每道菜需要做什么（比如：这道菜要切土豆、那道菜要炒肉）。这个清单你可以边做边检查，如果发现有顾客很着急（高优先级），你就放下手头的任务，先去处理紧急的，比如给他们上杯水。你只是在脑子里和纸上规划，不实际动手炒菜。
  • 提交阶段 (执行与更新)： 当你确认所有菜品的“计划”都排好，并确定哪些菜需要实际操作（副作用列表）后，你就会进入厨房，找来一个厨师，把任务清单交给Ta。厨师会一次性地把所有需要实际操作的菜全部炒好、摆盘上桌。这个阶段是不可中断的，因为厨师一旦开始炒菜就不能停，否则菜就糊了。

5. Fiber Node 的结构（简单了解）

每个 Fiber 节点大致包含以下核心属性：

• type：组件类型（函数、类、原生 DOM 元素等）。
• props：组件的 props。
• stateNode：对于类组件，指向组件实例；对于 DOM 元素，指向 DOM 节点。
• child：指向第一个子 Fiber 节点。
• sibling：指向下一个兄弟 Fiber 节点。
• return：指向父 Fiber 节点（构成单向链表，方便回溯）。
• memoizedState：存储 Hook 的链表（关键！）。
• memoizedProps：上次渲染的 props。
• flags：副作用标记，指示这个 Fiber 节点需要执行的 DOM 操作类型（新增、删除、更新等）。

通过 child、sibling、return 属性，Fiber 节点构建了一个链表结构，React 可以在内存中高效地遍历和操作这棵树。

6. Fiber 与 Hook/性能优化的联系

虽然 Fiber 是 React 内部的实现，但它对我们写 React 代码和理解性能优化至关重要：

• Hook 的基石： Fiber 架构的可中断性，以及它在每个 Fiber 节点上存储 memoizedState（一个 Hook 链表）的能力，正是 Hook 能够实现的关键。如果 Fiber 不支持暂停和恢复，Hook 的状态就无法在渲染之间保持一致。
• 理解 useEffect 的执行时机和清理： 掌握 Fiber 的协调和提交阶段，能更好地理解 useEffect 为什么会在 DOM 更新之后执行，以及它的清理函数为什么会在下一次 effect 执行前或组件卸载时执行。
• 强化 React.memo / useCallback / useMemo 的必要性： 这些性能优化 Hook 的作用，就是帮助 Fiber 在协调阶段跳过不必要的比较和计算。如果 props 或计算结果没有变化，Fiber 就可以直接复用旧的 Fiber 节点，节省了大量计算资源，让应用更流畅。
• key 的重要性： key 帮助 Fiber 在协调阶段高效地识别列表项的变化，避免了不必要的 DOM 重建，从而提升列表渲染性能。
• Suspense 和并发模式： Suspense（用于数据加载等待）和 React 18 的并发模式，正是基于 Fiber 架构的可中断、可调度能力才能实现。

总结与未来展望

理解 Fiber 架构，就像是拿到了 React 引擎的说明书。你可能不需要亲自去“修理”引擎，但知道它如何工作，能让你更好地“驾驶”它，写出更高效、更稳定的 React 应用。

在面试中，当你能清晰地解释 Fiber 解决了什么问题，它是如何通过可中断的工作单元、优先级调度来提升用户体验，以及它如何支撑 Hook 和其他性能优化手段时，你展示的不仅是知识，更是对技术深度的追求。

Fiber 架构是 React 迈向未来（并发模式、服务端组件等）的关键一步，理解它，你就站在了前端技术的前沿。继续加油，你一定能完全掌握它，并在面试中大放异彩！