Fiber 是 React 16 引入的底层协调引擎，在 React 19 中完成了生产级稳定化、自适应调度优化 ，是 并发渲染、时间分片、优先级调度 的核心基石。
它彻底解决了旧版 React 同步递归渲染阻塞主线程的痛点，实现了可中断、可恢复、可插队、可批量提交的增量渲染，是 React 19 所有高性能特性的底层载体。
一、前置：旧版 Stack Reconciler 的致命缺陷
React 15 及更早版本使用 Stack Reconciler（栈协调器） ，采用同步递归遍历组件树：
- 渲染一旦开始，不可中断、不可暂停
- 大型组件树渲染时，独占浏览器主线程
- 用户输入、点击、滚动等交互会被阻塞，页面卡顿
- 无优先级调度，所有更新同等重要
Mermaid：Stack 同步渲染流程（缺陷可视化）
是
否
触发组件更新
同步递归渲染整棵组件树
主线程被占用?
用户交互/浏览器重绘 强制等待
渲染完成 → 更新DOM
核心痛点：任务不可拆分，主线程长期阻塞。
二、Fiber 架构核心定义
2.1 什么是 Fiber？
- 最小工作单元 ：将组件树拆分为独立的
Fiber节点，替代递归栈调用 - 链表数据结构 ：通过指针遍历组件树，支持中断/恢复/插队
- 调度单元：绑定优先级，React 调度器按优先级执行任务
- 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 为例：
child
child
sibling
return
return
return
App Fiber
div Fiber
Header Fiber
List Fiber
关键设计 ：用链表遍历替代递归，随时可以暂停/继续/中断。
四、Fiber 架构灵魂：双缓存机制
React 19 始终维护两棵 Fiber 树 （双缓存），是实现无缝 UI 更新、无卡顿渲染的核心：
- Current Tree：当前屏幕显示的 UI 对应的 Fiber 树
- WorkInProgress Tree（WIP） ：内存中静默构建的新 UI 树
工作流程
- 触发更新 → 基于 Current 树克隆 WIP 树
- 内存中增量构建 WIP 树（可中断）
- 构建完成 → 一次性切换 WIP 为 Current 树
- 旧树复用为新 WIP 树，循环利用
Mermaid：Fiber 双缓存机制
克隆节点
中断/恢复/插队
Commit 阶段
Current Tree
✅ 屏幕渲染
WIP Tree
⚙️ 内存构建
完成构建
WIP → 新Current
屏幕更新
旧Current → 新WIP
内存复用
核心优势：内存构建不影响界面；一次性切换，无视觉闪烁。
五、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 完整流程
是
否
触发更新
调度器分配优先级Lane
恢复渲染
时间片耗尽?
高优先级插队?
暂停任务 → 让出主线程
执行高优先级任务
完成 Render → 标记副作用
Commit 阶段
❌ 不可中断
更新DOM + 执行副作用 + 切换双缓存
渲染完成
六、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 渲染的终极流程
否
是
用户输入/State更新/Actions调用
React 触发更新
Fiber调度器：分配优先级Lane
Render阶段：构建WIP树
可中断/可插队
渲染完成?
Commit阶段：一次性提交
DOM更新 + 副作用执行
双缓存树切换 → UI渲染完成
八、核心总结：Fiber 架构的本质
从 React 16 实验性引入，到 React 19 最终稳定，Fiber 架构的本质是：
- 用链表结构实现可中断的最小工作单元
- 用双缓存机制实现无缝、无闪烁的 UI 更新
- 用两阶段渲染保证 DOM 操作的安全性
- 用自适应调度支撑 React 19 全套并发特性
React 19 所有高级能力（并发渲染、异步 Actions、Suspense 优化、流式 SSR），全部建立在 Fiber 架构之上。
关键点回顾
- Fiber = 最小工作单元 + 链表 + 调度单元
- 双缓存树是 React 流畅渲染的核心
- Render 可中断，Commit 不可中断
- React 19 优化了自适应时间分片 + Lane 优先级 + Actions 集成
- Fiber 是 React 并发架构的底层基石