React Fiber架构原理与核心机制详解

1. 问题背景：React 15架构的瓶颈

React 15及之前的版本使用Stack Reconciler（栈协调器）进行虚拟DOM的差异比较（Diff算法）和更新。其核心问题在于：

• 递归更新不可中断：当组件树层级深或更新计算量大时，JavaScript主线程会长时间占用，导致浏览器无法处理高优先级的用户交互或渲染任务，出现卡顿。
• 缺乏优先级调度：所有更新任务平等对待，无法区分用户交互（如输入框输入）与数据渲染（如列表更新）的紧急程度。

2. Fiber架构的设计目标

React 16引入Fiber架构，核心目标包括：

1. 可中断与恢复：将递归的同步更新拆分为多个可中断的异步任务单元。
2. 优先级调度：根据任务类型（如动画、用户输入）分配优先级，高优先级任务可插队执行。
3. 并发渲染支持：为后续的并发模式（Concurrent Mode）打下基础。

3. Fiber的核心概念

3.1 Fiber节点

Fiber是React内部的工作单元，本质是一个JavaScript对象，存储了以下信息：

{
  type: 'div',           // 节点类型（组件、HTML标签）
  key: null,             // 唯一标识
  stateNode: divDOM,     // 对应的真实DOM节点
  return: Fiber,         // 父节点
  child: Fiber,          // 第一个子节点
  sibling: Fiber,        // 下一个兄弟节点
  alternate: Fiber,      // 指向当前Fiber的备份（用于Diff比较）
  effectTag: Placement,  // 副作用标记（新增、更新、删除）
  pendingProps: {},      // 待更新的props
  memoizedProps: {},     // 当前已更新的props
}

3.2 双缓存机制

React同时维护两棵Fiber树：

• Current Tree：当前屏幕上显示内容对应的Fiber树。
• WorkInProgress Tree：正在构建中的新Fiber树。
  两棵树通过alternate指针相互引用，更新完成后直接切换指针，避免频繁创建对象。

4. Fiber的工作流程（Reconciliation + Commit）

4.1 阶段一：Reconciliation（可中断）

1. 遍历阶段：

   • 从根节点开始，以深度优先遍历方式处理每个Fiber节点。
   • 对每个节点执行beginWork：根据组件类型（函数组件/类组件）调用渲染逻辑，生成子节点，并标记副作用（如需更新DOM）。
   • 若子节点不存在，则通过sibling指针跳到兄弟节点。

2. 中断与恢复机制：

   • 浏览器每帧的空闲时间（通过requestIdleCallback模拟）执行任务单元。
   • 若当前帧时间耗尽，则暂停更新，将控制权交还浏览器，下一帧继续执行。

3. 完整示例（简化）：

   // 更新前：A -> B -> C（深度优先遍历）
   // 中断后：记录当前处理的节点B，下次从B的子节点C继续
   

4.2 阶段二：Commit（不可中断）

1. 副作用提交：遍历WorkInProgress树，根据effectTag执行DOM更新（增删改）。
2. 生命周期调用：执行componentDidMount、useEffect等副作用钩子。
3. 切换树：将WorkInProgress树设置为Current Tree，完成渲染。

5. 优先级调度原理

React内部定义优先级等级（如Immediate、UserBlocking、Normal、Low），通过以下步骤调度：

1. 任务分类：根据更新来源（如事件处理器、网络请求）分配优先级。
2. 高优先级插队：若低优先级任务执行中遇到高优先级任务，则中断当前任务，重新生成高优先级的WorkInProgress树。
3. 丢弃陈旧渲染：若某次更新已被更高优先级更新覆盖，则跳过其渲染阶段。

6. 实际应用场景

• 输入框响应优化：用户输入时，输入框的更新（高优先级）会中断列表渲染（低优先级），保证输入流畅。
• Suspense异步加载：Fiber支持将异步加载的组件标记为“暂停”，等待数据就绪后继续渲染。

7. 总结

Fiber架构通过将同步更新拆解为异步可中断任务，结合优先级调度和双缓存机制，实现了更流畅的用户体验，为React的并发特性奠定基础。