Fiber 是 React 16 引入的底层协调引擎，在 React 19 中完成了生产级稳定化、自适应调度优化，是 并发渲染、时间分片、优先级调度 的核心基石。
它彻底解决了旧版 React 同步递归渲染阻塞主线程的痛点，实现了可中断、可恢复、可插队、可批量提交的增量渲染，是 React 19 所有高性能特性的底层载体。

---

一、前置：旧版 Stack Reconciler 的致命缺陷

React 15 及更早版本使用 Stack Reconciler（栈协调器），采用同步递归遍历组件树：

1. 渲染一旦开始，不可中断、不可暂停
2. 大型组件树渲染时，独占浏览器主线程
3. 用户输入、点击、滚动等交互会被阻塞，页面卡顿
4. 无优先级调度，所有更新同等重要

Mermaid：Stack 同步渲染流程（缺陷可视化）

核心痛点：任务不可拆分，主线程长期阻塞。

---

二、Fiber 架构核心定义

2.1 什么是 Fiber？

1. 最小工作单元：将组件树拆分为独立的 Fiber 节点，替代递归栈调用
2. 链表数据结构：通过指针遍历组件树，支持中断/恢复/插队
3. 调度单元：绑定优先级，React 调度器按优先级执行任务
4. React 19 定位：并发渲染、Actions、Suspense、流式渲染的底层支撑

2.2 Fiber 三大核心目标

✅ 可中断：拆分大型渲染任务，定时让出主线程
✅ 可优先级调度：高优先级交互（输入/点击）插队低优先级任务
✅ 可批量提交：内存计算完成后，一次性更新 DOM，保证界面一致性

---

三、Fiber 节点：核心数据结构（React 19 精简版）

每个 React 组件/元素对应一个 Fiber 节点，是架构的最小单元。
仅保留关键核心字段（简化理解，剔除底层冗余字段）：

分类	关键字段	核心作用
链表指针	child/sibling/return	构建单向链表树，替代递归
双缓存	alternate	指向另一棵树的对应节点（双缓存核心）
状态数据	memoizedState/props	缓存组件状态、属性
调度标记	lanes/flags	优先级车道（React18+）、副作用标记

Mermaid：Fiber 链表结构（组件树 → 链表）

以组件树 App → div → Header + List 为例：

关键设计：用链表遍历替代递归，随时可以暂停/继续/中断。

---

四、Fiber 架构灵魂：双缓存机制

React 19 始终维护两棵 Fiber 树（双缓存），是实现无缝 UI 更新、无卡顿渲染的核心：

1. Current Tree：当前屏幕显示的 UI 对应的 Fiber 树
2. WorkInProgress Tree（WIP）：内存中静默构建的新 UI 树

工作流程

1. 触发更新 → 基于 Current 树克隆 WIP 树
2. 内存中增量构建 WIP 树（可中断）
3. 构建完成 → 一次性切换 WIP 为 Current 树
4. 旧树复用为新 WIP 树，循环利用

Mermaid：Fiber 双缓存机制

核心优势：内存构建不影响界面；一次性切换，无视觉闪烁。

---

五、Fiber 工作循环（WorkLoop）：React 19 并发核心

Fiber 渲染分为两个绝对分离的阶段，这是 React 19 并发能力的底层保障：

5.1 两大核心阶段

阶段	可中断？	操作 DOM？	核心作用
Render 阶段（协调）	✅ 是	❌ 不操作	构建 WIP 树、标记副作用
Commit 阶段（提交）	❌ 否	✅ 操作	更新 DOM、执行副作用、切换树

5.2 React 19 自适应时间分片

React 19 优化了动态时间分片：

• 废弃固定 5ms 分片
• 根据设备性能 + 浏览器状态自动调整任务分片
• 低端机更流畅，高端机效率更高

Mermaid：React 19 Fiber WorkLoop 完整流程

---

六、React 19 对 Fiber 架构的专属优化

React 19 并非重构 Fiber，而是底层稳定化 + 深度绑定并发特性，这是区别于 16/18 版本的关键：

1. 优先级调度：Lane 模型最终稳定

• 废弃旧版数字优先级，使用 Lane（车道）模型，精细化控制更新优先级
• 自动合并批量优先级，大幅降低调度开销

2. 自适应时间分片

• 动态调整任务分片时长，全设备性能最优

3. 与 Actions/Transition 原生集成

• Fiber 节点直接支持异步过渡任务
• 自动管理 pending 状态，无需手动编写异步逻辑

4. Suspense + Fiber 流式渲染

• Fiber 支持挂起状态，遇到 Suspense 自动暂停分支渲染
• 服务端渲染：选择性水合增强，优先渲染用户交互区域

5. 全场景自动批处理

• Fiber 底层自动合并所有更新（事件/Promise/setTimeout/原生事件）
• 零代码成本减少重复渲染

---

七、完整链路：React 19 Fiber 全生命周期渲染

Mermaid：从更新触发到 DOM 渲染的终极流程

---

八、核心总结：Fiber 架构的本质

从 React 16 实验性引入，到 React 19 最终稳定，Fiber 架构的本质是：

1. 用链表结构实现可中断的最小工作单元
2. 用双缓存机制实现无缝、无闪烁的 UI 更新
3. 用两阶段渲染保证 DOM 操作的安全性
4. 用自适应调度支撑 React 19 全套并发特性

React 19 所有高级能力（并发渲染、异步 Actions、Suspense 优化、流式 SSR），全部建立在 Fiber 架构之上。

---

关键点回顾

1. Fiber = 最小工作单元 + 链表 + 调度单元
2. 双缓存树是 React 流畅渲染的核心
3. Render 可中断，Commit 不可中断
4. React 19 优化了自适应时间分片 + Lane 优先级 + Actions 集成
5. Fiber 是 React 并发架构的底层基石