【React源码03】深入学习React 源码实现——Fiber 架构与任务调度

深入学习 React 源码实现之 Fiber 架构与任务调度

---

一、引言：Fiber 架构的诞生背景

1.1 传统递归渲染的问题

在 React 15 及更早版本中，React 使用的是递归渲染（Stack Reconciler）：

• 渲染过程是同步且不可中断的；
• 如果组件树非常大，主线程会被长时间占用，导致页面卡顿；
• 用户交互无法及时响应。

这违背了现代 Web 应用对 “响应性” 和 “可中断性” 的需求。

1.2 Fiber 架构的引入

从 React 16 开始，Facebook 团队引入了全新的 Fiber 架构：

• 将整个更新过程拆分为多个小任务；
• 支持异步调度和优先级管理；
• 实现了并发模式（Concurrent Mode）的基础能力；
• 提高了用户体验和性能表现。

---

二、源码结构概览与核心文件介绍

React 的 Fiber 架构主要实现在 react-reconciler 包中，以下是关键源码文件：

文件路径	功能描述
packages/react-reconciler/src/ReactFiber.js	定义 Fiber 节点结构与创建逻辑
packages/react-reconciler/src/ReactFiberRoot.js	管理 Fiber 树根节点（root）
packages/react-reconciler/src/ReactFiberWorkLoop.js	工作循环主流程，负责任务调度与执行
packages/react-reconciler/src/ReactFiberLane.js	Lane 模型，用于表示更新的优先级
packages/scheduler/src/Scheduler.js	任务调度器核心，基于 requestIdleCallback 或 setTimeout

---

三、Fiber 节点结构设计详解

3.1 Fiber 节点定义（简化版）

// packages/react-reconciler/src/ReactFiber.js

function FiberNode(
  tag,             // 节点类型（FunctionComponent / ClassComponent / HostComponent 等）
  pendingProps,    // 待处理的 props
  key,             // 唯一标识符
  mode             // 模式（如 ConcurrentMode）
) {
  this.tag = tag;
  this.key = key;
  this.type = null;       // 组件类型或 DOM 标签名
  this.stateNode = null;  // 对应的真实 DOM 或组件实例

  // 父子兄弟指针
  this.return = null;     // 父节点
  this.child = null;      // 第一个子节点
  this.sibling = null;    // 下一个兄弟节点

  // 当前状态
  this.memoizedState = null; // 上一次渲染时的状态（如 state、context）
  this.updateQueue = null;   // 更新队列
  this.memoizedProps = null; // 上一次渲染时的 props

  // 优先级相关
  this.lanes = NoLanes;       // 表示当前 Fiber 的优先级
  this.childLanes = NoLanes;  // 子节点的优先级集合

  // 双缓冲机制（current <-> workInProgress）
  this.alternate = null;
}

3.2 Fiber 节点的关键属性说明

属性名	含义
tag	表示该节点的类型（HostComponent、FunctionComponent 等）
type	组件类型或 DOM 标签名称
stateNode	对应的真实 DOM 或类组件实例
return, child, sibling	构建 Fiber 树的链表结构
pendingProps	新传入的 props
memoizedProps	上次渲染使用的 props
memoizedState	上次渲染使用的 state
lanes	当前节点的优先级
alternate	指向另一个 Fiber（用于双缓冲机制）

---

四、任务拆分与中断恢复机制

4.1 引入背景

为了实现 “时间切片（Time Slicing）” 和 “可中断渲染”，React 使用了以下机制：

• requestIdleCallback（浏览器原生 API，但兼容性差）；
• setTimeout / setImmediate（polyfill 方案）；
• scheduler 包：封装了统一的任务调度接口。

4.2 工作循环（Work Loop）

工作循环的核心逻辑在 ReactFiberWorkLoop.js 中，主要函数如下：

function workLoopConcurrent() {
  while (workInProgress !== null && !shouldYield()) {
    performUnitOfWork(workInProgress);
  }
}

• workInProgress：当前正在处理的 Fiber 节点；
• performUnitOfWork：处理单个 Fiber 节点；
• shouldYield()：判断是否应该让出主线程给更高优先级任务；

4.3 shouldYield 判断逻辑（来自 scheduler）

function shouldYield() {
  return !didTimeout && getCurrentTime() >= deadline;
}

• deadline：当前帧的时间限制；
• didTimeout：是否超时强制执行；
• 若返回 true，则暂停当前渲染任务，等待下一帧再继续。

---

五、优先级调度系统（Lane 模型）

5.1 什么是 Lane？

React 使用 Lane 模型 来表示更新的优先级。每个 Lane 是一个位掩码（bitmask），支持组合使用。

示例：

• SyncLane：同步更新（如点击事件）；
• InputDiscreteLane：离散输入（如按键）；
• DefaultLane：普通更新；
• IdleLane：低优先级更新（如非关键 UI）；

5.2 Lane 模型的优势

• 更细粒度的优先级控制；
• 支持批量合并相同优先级的更新；
• 支持嵌套更新的优先级继承；
• 避免不必要的重渲染。

5.3 源码片段参考（ReactFiberLane.js）

export const SyncLane: Lanes = 0b0000000000000000000000000000001;
export const InputDiscreteLane: Lanes = 0b0000000000000000000000000000100;
export const DefaultLane: Lanes = 0b0000000000000000000000000100000;
export const IdleLane: Lanes = 0b1000000000000000000000000000000;

export function getHighestPriorityLane(lanes: Lanes): Lane {
  return lanes & -lanes;
}

以下是对这段 React Lane 模型代码的逐行详细解释，包括位掩码（bitmask）表示优先级、Lane 的定义以及如何获取最高优先级 Lane 的函数逻辑。

---

一、Lane 的定义（位掩码）

export const SyncLane: Lanes = 0b0000000000000000000000000000001;

• 定义了一个同步优先级的 Lane。
• 使用二进制 0b 表示法，只有最低位为 1，代表最高优先级（React 中同步更新优先级最高）。
• 十进制值为 1。

export const InputDiscreteLane: Lanes = 0b0000000000000000000000000000100;

• 离散输入事件（如点击按钮、键盘输入）的优先级。
• 第三位为 1，优先级低于 Sync，高于普通更新。
• 十进制值为 4。

export const DefaultLane: Lanes = 0b0000000000000000000000000100000;

• 默认优先级，用于大多数普通的 UI 更新。
• 第六位为 1。
• 十进制值为 32。

export const IdleLane: Lanes = 0b1000000000000000000000000000000;

• 最低优先级，用于非关键任务（如懒加载组件、埋点等）。
• 第 31 位为 1（注意：JS 中 Number 是双精度浮点数，这里用的是 32 位掩码模拟）。
• 十进制值为 2147483648。

---

二、Lanes 类型说明

在 React 中：

• Lanes 是一个 位掩码集合，可以同时包含多个 Lane；
• 每个 Lane 是一个单独的二进制位；
• 多个 Lane 合并使用按位或 |，例如：

  const updateLanes = SyncLane | DefaultLane;
  

• 判断某个 Lane 是否存在使用按位与 &，例如：

  if (updateLanes & InputDiscreteLane) {
    // 存在这个优先级
  }
  

---

三、getHighestPriorityLane 函数详解

export function getHighestPriorityLane(lanes: Lanes): Lane {
  return lanes & -lanes;
}

✅ 功能说明：

该函数用于从一组 Lane 中提取出 优先级最高的那个 Lane。

原理说明（位运算技巧）：

• lanes & -lanes 是一个经典的 “取最低位的 1” 的位运算技巧。
• 因为 React 的 Lane 是按照 低位优先级更高 的方式设计的，所以最低位的 1 就是最高优先级的 Lane。

示例演示：

const lanes = SyncLane | DefaultLane; // 二进制：0000000000000000000000000100001

getHighestPriorityLane(lanes); // 返回 SyncLane（0b0000000000000000000000000000001）

运算过程：

1. lanes = 0b0000000000000000000000000100001（十进制：33）
2. -lanes = 0b1111111111111111111111111011111（补码形式）
3. lanes & -lanes = 0b0000000000000000000000000000001（即 SyncLane）

---

四、Lane 模型的优势总结

特性	描述
位掩码机制	支持组合多个优先级，节省内存和提高性能
优先级判断高效	通过位运算快速判断优先级高低
支持并发更新	可以区分紧急更新和低优先级更新，实现中断恢复
细粒度控制	每个 Lane 表示一类更新类型，便于调度器做决策

---

五、扩展建议

如果你想进一步理解 Lane 模型在 React 源码中的实际应用，可以继续学习以下内容：

1. LanePriority 类型：将 Lane 映射到具体的优先级等级（如 ImmediatePriority、UserBlockingPriority）；
2. scheduler 包：React 使用的调度器是如何基于 Lane 实现异步调度的；
3. Lane 对应的 Fiber 调度流程：如何触发更新、合并 Lane、执行 workLoop；
4. Lane 合并与嵌套更新处理：React 如何避免重复渲染和优化更新队列；

---

六、完整代码实现（简化版 Fiber 架构与调度）

---

✅ 1. 简化版 Fiber 结构定义

// 创建一个 Fiber 节点的函数（工厂函数）
function createFiber(tag, pendingProps, key) {
  // 返回一个表示 Fiber 的对象，包含核心属性
  return {
    // 节点类型：如 FunctionComponent、ClassComponent、HostComponent（div/span）等
    tag,

    // 唯一标识符，用于 Diffing 算法中判断是否是同一个节点
    key,

    // 新传入的 props，尚未处理
    pendingProps,

    // 组件类型或 DOM 标签名（如 'div'、MyComponent）
    type: null,

    // 对应的真实 DOM 或类组件实例
    stateNode: null,

    // 指向父 Fiber 节点
    return: null,

    // 第一个子 Fiber 节点
    child: null,

    // 下一个兄弟 Fiber 节点
    sibling: null,

    // 上一次渲染时使用的 state（如组件状态、context 等）
    memoizedState: null,

    // 存储更新队列（如 useState、useReducer 的更新）
    updateQueue: null,

    // 上一次渲染时使用的 props
    memoizedProps: null,

    // 表示当前 Fiber 的优先级（Lane 模型中的位掩码）
    lanes: 0,

    // 双缓冲机制：指向另一个 Fiber 实例（current <-> workInProgress）
    alternate: null,
  };
}

---

✅ 2. 工作循环模拟器初始化

// 当前正在处理的 Fiber 节点
let workInProgress = null;

---

✅ 3. 调度更新函数

/**
 * 调度一个 Fiber 更新任务
 * @param {Object} fiber - 需要更新的 Fiber 节点
 * @param {number} lane - 该更新的优先级（Lane 模型）
 */
function scheduleUpdateOnFiber(fiber, lane) {
  // 打印日志：记录即将调度哪个 Fiber 和它的优先级
  console.log(`Scheduled update on ${fiber.key} with lane ${lane}`);

  // 设置当前工作节点为传入的 fiber
  workInProgress = fiber;

  // 使用 requestIdleCallback 来异步执行任务（模拟）
  requestIdleCallback(performUnitOfWork);
}

---

✅ 4. 执行单个工作单元（递归方式）

/**
 * 执行一个 Fiber 工作单元（即处理一个 Fiber 节点）
 * @param {Object} unitOfWork - 正在处理的 Fiber 节点
 */
function performUnitOfWork(unitOfWork) {
  // 获取当前要处理的 Fiber 节点
  const fiber = unitOfWork;

  // 打印日志：表示开始处理这个 Fiber
  console.log(`Processing fiber: ${fiber.key}`);

  // 如果有子节点，则递归处理子节点
  if (fiber.child) {
    performUnitOfWork(fiber.child); // 处理子节点
  }

  // 如果有兄弟节点，则递归处理兄弟节点
  if (fiber.sibling) {
    performUnitOfWork(fiber.sibling); // 处理兄弟节点
  }

  // 当前 Fiber 完成处理后调用完成函数
  completeUnitOfWork(fiber);
}

---

✅ 5. Fiber 完成阶段（提交准备）

/**
 * 当某个 Fiber 节点处理完成后执行的逻辑
 * @param {Object} fiber - 已处理完成的 Fiber 节点
 */
function completeUnitOfWork(fiber) {
  // 打印日志：表示该 Fiber 已完成处理
  console.log(`Completed processing fiber: ${fiber.key}`);
}

---

✅ 6. 模拟浏览器空闲时间调度器

/**
 * 模拟浏览器的 requestIdleCallback API
 * 在实际 React 中使用的是 scheduler 包来实现更精确的任务调度
 * @param {Function} cb - 要执行的回调函数
 */
function requestIdleCallback(cb) {
  /**
   * 使用 setTimeout 模拟浏览器空闲时间
   * 0ms 后执行回调，并传入一个带有 timeRemaining 方法的对象
   * timeRemaining 模拟剩余可用时间（单位：毫秒）
   */
  setTimeout(() => cb({ timeRemaining: () => 5 }), 0); // 模拟每次最多执行 5ms
}

---

总结说明

这段代码是对 React Fiber 架构与任务调度机制的一个简化模拟版本，虽然没有涉及真实 React 的双缓冲、副作用收集、优先级 Lane 模型等复杂机制，但已经涵盖了以下核心思想：

• Fiber 节点结构的设计；
• 递归式的工作循环（work loop）；
• 利用 requestIdleCallback 模拟异步调度；
• 通过 child/sibling/return 实现 Fiber 树的遍历；
• 支持中断与恢复的基本思想（虽然这里是同步递归模拟）；

---

七、设计模式分析

React 的 Fiber 架构与任务调度中涉及多个经典设计模式：

设计模式	应用场景
链表结构（Linked List）	Fiber 树通过 return、child、sibling 构建
双缓冲（Double Buffering）	current 与 workInProgress Fiber 的交替使用
策略模式（Strategy）	不同优先级（Lane）采用不同调度策略
观察者模式（Observer）	状态变化触发重新渲染
命令模式（Command）	收集副作用（Placement / Update / Deletion）统一提交
责任链模式（Chain of Responsibility）	从 root 到子节点依次处理更新任务

---

八、总结与延伸阅读

本教程深入剖析了 React 的 Fiber 架构与任务调度机制，包括：

• Fiber 节点的结构设计；
• 任务拆分与中断恢复机制；
• 优先级调度系统（Lane 模型）；
• 源码文件路径与主要函数职责；
• 简化版 Fiber 架构与调度实现；
• 涉及的设计模式。

延伸阅读建议：

1. React 官方文档 - Concurrent Mode
2. React GitHub 源码仓库
3. 精读《React Fiber》
4. 书籍推荐：《React 设计模式与最佳实践》《React 源码解析系列》

---