在 React 的 Fiber 架构中，“Fiber” 是一种表示组件及其状态的内部数据结构。它是对 React 组件的详细描述，旨在提高组件的渲染性能和用户体验。以下是 Fiber 的含义和数据结构的详细解释：
1. Fiber 的含义
- Fiber 是一种内部数据结构：它用于表示每个 React 组件的状态和属性。每个 Fiber 对象包含有关组件的信息，如更新状态、子组件、位置信息等。
- Fiber 的目标：通过 Fiber 数据结构，React 可以更高效地处理 UI 更新，支持增量渲染、任务中断和优先级调度。
2. Fiber 数据结构
Fiber 数据结构由多个字段组成，每个字段用于存储与组件相关的不同信息。主要字段包括：
tag：指示 Fiber 节点的类型，如函数组件、类组件或 DOM 元素。key：唯一标识 Fiber 节点的键，用于优化子节点的匹配。elementType：组件的类型，表示组件的类型（函数组件、类组件等）。type：组件的具体类型或组件实例。例如，对于 DOM 元素，它可能是'div'或'span'；对于类组件，它是类构造函数。return：指向 Fiber 节点的父节点。形成 Fiber 树的父子关系。child：指向 Fiber 节点的第一个子节点。用于构建 Fiber 树的结构。sibling：指向 Fiber 节点的下一个兄弟节点。用于在同一层级遍历子节点。stateNode：保存与组件关联的实际 DOM 节点或组件实例。例如，对于类组件，它是组件的实例；对于 DOM 元素，它是实际的 DOM 节点。alternate：指向 Fiber 节点的旧版本（即上一次渲染时的 Fiber 节点）。用于比较新旧 Fiber 树，进行更新和协调。updateQueue：保存组件的更新队列，包含需要应用的更新信息。每个更新记录可能包含一个新的状态或属性。effectTag：用于标记 Fiber 节点的更新效果（如插入、更新或删除）。在提交阶段，React 会根据这些标记进行实际的 DOM 更新。pendingProps和memoizedProps：分别表示待处理的属性和已记忆的属性。pendingProps是新传入的属性，而memoizedProps是上一次渲染时的属性。
3. Fiber 树
- Fiber 树结构：Fiber 树类似于虚拟 DOM 树，表示组件的层级结构。每个 Fiber 节点代表一个组件或 DOM 元素。Fiber 树通过
return、child和sibling字段构建成树形结构。 - 更新和协调：在 Fiber 架构中，React 使用 Fiber 数据结构来处理组件更新和协调（Reconciliation）。通过比较新旧 Fiber 树，React 可以计算出需要更新的部分并生成补丁。
4. Fiber 的优势
- 增量渲染：Fiber 支持将渲染任务拆分为多个增量的工作单元，允许中断和恢复渲染，避免长时间的阻塞。
- 优先级调度：Fiber 引入了任务优先级调度，允许高优先级的任务（如用户输入）优先处理，提高响应性。
- 错误边界：Fiber 提供了更好的错误处理机制，可以局部地处理渲染中的错误，保证应用的稳定性。