3-2 理解什么是Fiber架构？Fiber对象（React内部数据结构）
Fiber 的工作原理概述
Fiber 架构的核心思想是将所有工作拆分成一系列小单元（Fiber 对象），并引入异步调度机制。它的工作方式可以用长列表分页加载来类比——不需要一次性加载所有数据，而是按需、按优先级分批处理。
Fiber 将工作分成两个阶段：
| 阶段 | 特性 | 说明 |
|---|---|---|
| 渲染阶段（Render Phase） | 异步、可中断 | 计算 Diff，确定需要哪些变更，不操作真实 DOM |
| 提交阶段（Commit Phase） | 同步、不可中断 | 将变更一次性提交到真实 DOM |
渲染阶段的工作可以被暂停、中断和恢复，不会导致用户可见的界面不一致。只有提交阶段才会真正操作 DOM，这个过程是同步且原子性的。
Fiber 的源码位置
React 源码中 Fiber 的核心定义位于：
packages/react-reconciler/src/ReactFiber.js
text
在这个文件中可以找到 FiberNode 的定义，它包含了 Fiber 对象的所有属性。
注意：从 React 17 开始，大版本采用渐进更新策略，后续版本的 Fiber 架构不会有破坏性改变。即使 React 版本已经更新到 19 或 20，也不会影响对 Fiber 核心概念的理解。
FiberNode 的核心属性
Instance 相关属性
| 属性 | 类型 | 说明 |
|---|---|---|
tag | WorkTag | 定义 Fiber 的类型（函数组件、类组件、原生元素等） |
key | string | 与 React Element 的 key 一致，用于 Diff |
elementType | any | 与 React Element 的 type 一致 |
type | any | 异步组件解析后的 type |
stateNode | object | 关联的真实 DOM 节点或组件实例 |
tag（WorkTag） 是 Fiber 最核心的分类标签，它决定了 React 如何处理这个 Fiber 节点：
WorkTag 类型（部分）：
├── FunctionComponent = 0 // 函数式组件
├── ClassComponent = 1 // 类组件
├── HostComponent = 5 // 原生 DOM 元素（如 div、span）
├── HostText = 6 // 文本节点
├── Fragment = 7 // Fragment 组件
├── Mode = 8 // StrictMode 等
├── ContextConsumer = 9 // Context 消费者
├── ContextProvider = 10 // Context 提供者
└── ...更多类型
text
stateNode 用于记录 Fiber 与真实 DOM 节点或组件实例的关联关系。每个 Fiber 通过 tag 标识类型，通过 stateNode 关联到具体的 DOM 节点或组件实例——这就是 Fiber 与 DOM/组件的一对一关联。
Fiber 与 React Element 的关系
Fiber 对象在组件初次挂载（mount）时由 React Element 创建，两者共享 type 和 key：
// Fiber 由 React Element 创建
function createFiberFromElement(element) {
const type = element.type; // 共享 type
const key = element.key; // 共享 key
// ...创建 Fiber 对象
}
javascript
关键区别在于：
| 维度 | React Element | Fiber |
|---|---|---|
| 创建时机 | 每次渲染都重建 | 初次挂载时创建，后续缓存复用 |
| 生命周期 | 短暂，渲染后丢弃 | 持久，跨渲染周期存在 |
| 包含信息 | 描述 UI 结构 | 包含工作状态、优先级、副作用等 |
React Element 可能会在每次渲染时重建，但 Fiber 不会——Fiber 会被缓存和复用，这正是 Fiber 性能优势的重要来源。
相关的创建方法包括：
createFiberFromElement—— 从 React Element 创建createFiberFromFragment—— 从 Fragment 创建createFiberFromText—— 从文本节点创建
Fiber 的本质
Fiber 对象是 React 内部状态更新机制的基本单元。把 Fiber 翻译成中文是"纤维"——代表极细的意思。它对应着 React 把复杂任务拆分成极细粒度的工作单元的设计理念。
Fiber 与 JavaScript 中协程（Coroutine）的理念非常相似：在浏览器空闲时执行细小的任务，高优先级任务（如动画、用户输入）可以随时抢占执行权。Fiber 就是 React 对"协程式调度"的一种具体实现。
↑