当前位置：首页 > news >正文

透析React Fiber架构

news 来源：原创 2025/5/16 8:13:36

React Fiber 是 React 16 引入的全新协调（Reconciliation）算法和架构，它的核心数据结构是一个链表（Linked List），但具体实现上更复杂。以下是详细解释：

1. Fiber 的本质

React Fiber 是 对虚拟 DOM 节点的增强描述，每个 Fiber 节点对应一个 React 元素（如组件、DOM 节点等）。它的核心目标是：

支持可中断的异步渲染（Concurrent Mode）。
细化任务优先级（如高优先级更新优先渲染）。
实现增量渲染（将渲染拆分为多个可中断的小任务）。

2. Fiber 的链表结构

每个 Fiber 节点通过 三个指针 组成一个树形结构，但整体遍历方式类似于链表：

child: 指向第一个子节点（如组件的子组件）。
sibling: 指向下一个兄弟节点。
return: 指向父节点。

这种设计让 React 以深度优先的顺序遍历组件树，但通过链表的灵活性，可以随时中断遍历并恢复。

示例结构：

// 假设组件树结构如下：
<Parent>
  <Child1 />
  <Child2 />
</Parent>

// 对应的 Fiber 链表关系：
ParentFiber
  ├─ child ➔ Child1Fiber
  │    ├─ return ➔ ParentFiber
  │    └─ sibling ➔ Child2Fiber
  └─ Child2Fiber
       ├─ return ➔ ParentFiber
       └─ sibling ➔ null

3. 为什么用链表？

可中断性：链表允许 React 暂停遍历过程（如处理高优先级任务），记录当前节点的指针（workInProgress），稍后从中断处恢复。
高效更新：仅修改链表中需要更新的节点，无需重新生成整棵树。
无需连续内存：链表节点分散存储，适合动态增减场景。

4. Fiber 的双缓存机制

React 通过 两棵 Fiber 树 实现高效更新：

current 树：当前已渲染的 UI 对应的 Fiber 树。
workInProgress 树：正在构建的新 Fiber 树（用于下一次更新）。

更新过程中，React 复用 current 树的结构，逐步构建 workInProgress 树。完成后，两棵树交换指针，避免完全重建。

5. Fiber 节点的关键字段

每个 Fiber 节点包含以下核心信息：

字段	用途
`type`	节点类型（如函数组件、DOM 元素类型）。
`stateNode`	关联的实际对象（如 DOM 节点、类组件实例）。
`memoizedState`	Hook 链表的头节点（用于函数组件的状态管理）。
`pendingProps`	新的 Props（等待处理的属性）。
`memoizedProps`	上一次渲染使用的 Props。
`effectTag`	标记节点需要进行的操作（如插入、更新、删除）。
`alternate`	指向另一棵树中对应的 Fiber 节点（用于双缓存机制）。