React 的 Fiber 架构详解

React 的 Fiber 架构 是 React 16 引入的核心机制，它彻底重构了 React 的渲染和协调（Reconciliation）过程，为 并发渲染（Concurrent Rendering）奠定了基础。Fiber 架构的核心目标是：将渲染任务拆分成小块，支持中断、恢复和优先级调度，从而提升应用性能和用户体验。

1.Fiber的核心概念 

1. Fiber 节点

定义：Fiber 是 React 内部的最小渲染单元，每个组件对应一个 Fiber 节点（Fiber可以理解为是React自定义的一个带有链接关系的DOM树，每个节点代表一个可中断的渲染单元，其实可以理解为是一个更强大的虚拟DOM。）。

作用：Fiber 节点保存组件的类型、状态、子节点、父节点等信息，并记录当前任务的进度和优先级。

结构

{
  // 基本信息
  tag: 'ClassComponent' | 'FunctionComponent' | 'HostComponent' | ..., // 节点类型
  key: string | number, // 唯一标识
  stateNode: Component | Element, // 实际的组件实例或 DOM 节点
  type: Function | string, // 组件类型（函数或类）

  // 子树相关
  return: Fiber, // 父节点
  child: Fiber, // 第一个子节点
  sibling: Fiber, // 下一个兄弟节点

  // 渲染相关
  pendingProps: object, // 新的 props
  memoizedProps: object, // 上次的 props
  updateQueue: UpdateQueue, // 更新队列
  memoizedState: object, // 上次的 state

  // 优先级相关
  priorityLevel: number, // 当前任务的优先级
  lanes: Lanes, // 优先级掩码（React 18 的新机制）
}

2. 双缓冲技术

• 工作树：React 在渲染时会构建一棵新的 Fiber 树（工作树），与当前树（Current Tree）并行存在。
• 作用：通过双缓冲技术，React 可以在工作树上进行渲染和计算，而不会影响当前树的 UI 显示。
• 切换机制：当工作树渲染完成后，React 会通过 commit 阶段将工作树替换为当前树。

3.任务队列管理

维护按优先级排序的任务队列，动态调度渲染任务。 

2.Fiber 架构的核心流程 

1. 渲染阶段（Reconciliation）

渲染阶段分为两个主要步骤：协调（Reconciliation） 和 提交（Commit）。

(1) 协调（Reconciliation）

• 目标：比较当前树（Current Tree）和工作树（Work-in-Progress Tree），确定需要更新的部分。
• Fiber 的作用：
  • 递归遍历：React 通过 Fiber 节点的 child、sibling、return 指针递归遍历组件树。
  • 任务拆分：将渲染任务拆分为小块（如单个组件的渲染），每个小块称为一个 工作单元（Work Unit）。
  • 优先级调度：每个工作单元会标记优先级，React 会优先处理高优先级任务。

(2) 提交（Commit）

• 目标：将工作树的变更应用到真实 DOM。
• 特点：
  • 不可中断：提交阶段是同步的，必须一次性完成。
  • 原子性：确保 UI 更新的完整性，避免中间状态显示。

2. 优先级调度（Priority-based Scheduling）

• 优先级等级：React 定义了 5 个优先级（从高到低）：
  1. ImmediatePriority（立即）
  2. UserBlockingPriority（用户阻塞）
  3. NormalPriority（正常）
  4. LowPriority（低）
  5. IdlePriority（空闲）
• 动态调整：React 会根据用户交互的紧急程度动态调整任务优先级。例如，用户点击按钮的更新会被标记为高优先级，而数据加载的更新可能被标记为低优先级。
• 中断与恢复：当检测到更高优先级任务时，React 会中止当前低优先级任务的渲染，并优先处理高优先级任务。