在 React 16 发布时，一项名为“Fiber”的内部重写悄悄改变了整个框架的底层逻辑。彼时开发者更多关注新的生命周期方法或 Fragment 等 API 的易用性，却很少有人意识到，真正驱动这一切变革的核心，竟是一个看似朴素的数据结构——Fiber 节点。正是这个节点，让 React 从“一次性渲染”的旧时代，迈入了“可中断、可恢复、可优先调度”的新纪元。

从“瓶颈”到“重构”：为什么需要 Fiber？

在 React 16 之前，React 使用递归调用的“堆栈协调器”。当组件树发生变化时，React 会同步地深度遍历整个虚拟 DOM 树，为每个节点执行协调（reconciliation）操作，直到整棵树更新完成。这种“一次性渲染”的模式在复杂页面或动画场景中暴露了致命短板：一旦更新任务耗时过长，浏览器的主线程就会被持续占用，导致用户输入、滚动、动画等高频交互出现明显的卡顿与丢帧。

问题的本质在于，传统的协调器无法“分时工作”——它不知道哪些任务可以暂停，哪些需要优先处理。于是，React 团队在 2016 年启动了 Fiber 重构工程，目标是打造一个能够 根据浏览器帧率动态分配时间片、按优先级中断与恢复任务 的新型协调器。而实现这一切的基石，就是 Fiber 节点。

数据结构的力量：Fiber 节点长什么样？

Fiber 节点本质上是一个 JavaScript 对象，但它不是普通的对象：它被设计为一种 双向链表节点，同时携带了足够丰富的字段来描述组件的状态、副作用、优先级以及与其他节点之间的关系。

一个典型的 Fiber 节点包含以下核心信息： - 类型与 key：标识组件类型（函数组件、类组件、原生标签等）和列表 Diff 的依据。 - 状态节点：指向组件实例或 DOM 节点的引用，用于保存本地状态。 - 子节点、兄弟节点、父节点：通过 child、sibling、return 三个指针，将整棵组件树组织成 可遍历的链表结构。这与旧版虚拟 DOM 的树形递归截然不同——链表允许 React 在遍历过程中随时中断、保存当前节点位置，并在后续恢复。 - 优先级：每个 Fiber 节点都被分配一个“到期时间”（expirationTime）或“车道”（lane），用于标记更新的紧急程度。高优先级任务（如用户点击）可以打断低优先级任务（如数据加载）。 - 副作用列表：标记当前节点是否需要插入、更新、删除或触发生命周期函数。React 在完成遍历后，会将这些副作用收集成单向链表，一次性提交给 DOM。

正是这种“树+链表+优先级”的组合设计，让 React 拥有了精确控制渲染流水线的能力。

从“全有或全无”到“时间分片”：运行时如何运作？

Fiber 架构的运行时分为两个阶段：协调（Reconciliation）阶段 与 提交（Commit）阶段。

在协调阶段，React 从根 Fiber 节点开始，深度优先遍历这棵链表。每达到一个节点，React 会判断其是否需要更新（通过 shouldComponentUpdate 等机制），并对比新旧虚拟 DOM 生成新的 Fiber 子节点。关键之处在于：每处理完一个 Fiber 节点，React 都会检查是否还有剩余时间片（通过 requestIdleCallback 或 requestAnimationFrame 实现）。如果时间耗尽，React 会立即挂起当前遍历，记录当前暂停位置（即某个 Fiber 节点的索引），并将控制权交还给浏览器用于处理渲染、输入等任务。当浏览器空闲时，React 再从上一次中断的 Fiber 节点继续执行。

这种“协作式中断”机制彻底改变了 React 的运行行为：一个耗时的 diff 操作不再阻塞主线程，而是被拆分成多个小任务，优雅地穿插在浏览器帧之间。用户因此获得了流畅的交互体验，而开发者几乎不需要修改代码——Fiber 架构在 API 层面保持了完全的向后兼容。

承载未来：从 Hooks 到并发模式

Fiber 节点之所以能“承载整个 React 运行时”，还因为它为后续的重大特性提供了底层支撑。

Hooks 的背后：useState、useEffect 等 Hook 之所以能打破类组件的生命周期限制，正是因为 Fiber 节点存储了每个 Hook 的状态链表。每次函数组件渲染时，React 都会根据 Fiber 节点上的 Hook 链表顺序执行对应的 Hook 逻辑，从而保证状态与副作用的正确性。

Concurrent Mode（并发模式）：Fiber 的优先级调度能力直接催生了并发模式。在并发模式下，React 可以根据用户交互的紧急程度，动态调整不同属性 Fiber 节点的渲染优先级：一个输入框的实时响应会优先于一个异步数据的加载渲染；甚至可以在渲染中途插入更高优先级的更新，而不会造成页面闪烁。

此外，Suspense、错误边界、Portals 等特性，本质上都是在 Fiber 节点上添加了额外的副作用标记或状态管理逻辑。可以说，React 的每一次运行时决策，最终都会映射到一个或多个 Fiber 节点的字段上。

结语：一个数据结构，一次底层革命

从一个数据结构的诞生，到整个运行时的重塑，Fiber 节点看似只是工程优化中的一个小巧选择，却深刻影响了 React 的设计哲学。它证明了在复杂系统中，数据结构的选择往往比算法优化更能带动架构跃迁。对于前端开发者而言，理解 Fiber 节点不仅是为了“知其所以然”，更是在面对性能瓶颈时，拥有一种从底层看问题的视角。正如 React 团队所言：“我们不是在写代码，我们是在构建一个能优雅处理不确定性的运行时。”而这一切的起点，正是那个小小的 JavaScript 对象。