发布于 由admin

React 优先级调度：Lane 模型如何取代过期时间（ExpirationTime）解决高优任务插队

各位，大家好。欢迎来到 React 内部架构的“地下城”。

今天我们不聊怎么写组件，不聊 Hooks 的奇技淫巧，咱们来聊聊 React Scheduler——也就是那个负责决定“谁先跑，谁后跑，谁还得等会儿”的幕后黑手。

在 React 18 之前，这个黑手手里拿的是一把“过期时间票”（ExpirationTime）。这玩意儿就像食堂的饭票，上面写着“10:00 前有效”。如果任务没在 10:00 前做完，系统就强制让你跳过，哪怕你才做了一半。

但这就带来一个大问题：如果这时候有个 VIP 用户（高优任务）冲进来了，你的票虽然过期了，但你还在排队（任务还在跑），那 VIP 谁让？

于是，React 18 引入了 Lane 模型。这不仅仅是一个名字的升级，这是一场底层调度逻辑的“政变”。

今天，我们就来扒一扒这场政变的内幕，看看 Lane 模型是如何用“位图”的逻辑，彻底取代“时间戳”，让高优任务插队变得优雅而丝滑。

第一章：浏览器是个暴君，16ms 是它的极限

在讲 Lane 之前，我们必须先理解 React 为什么要这么折腾。

浏览器的渲染周期是残酷的。为了达到 60fps（或者更高），你必须在 16ms 之内完成所有的计算、布局、绘制。这 16ms 里还要分给 JS 执行、合成、布局、绘制。

想象一下，你的 React 应用里挂载了 100 个组件。每个组件的渲染都需要计算、比对 DOM。如果 React 毫无节制地把这 100 个任务一股脑全塞进这 16ms 里，浏览器就会卡顿，页面就会掉帧，用户就会看到“正在加载”的圈圈转个不停。

所以，React 必须得有个调度器，得有个裁判。

第二章：旧时代的“过期时间票” (ExpirationTime) —— 残酷的截断

在 React 18 之前，React Scheduler 的核心逻辑是这样的：

  1. 发票：给每个任务分配一个时间戳，比如 expirationTime = now + 500ms。这代表你必须在 500ms 后完成，否则就算过期。
  2. 排队：Scheduler 把任务扔进一个队列，按时间戳排序。
  3. 执行：在每一帧里，Scheduler 会检查当前时间。如果 currentTime >= expirationTime，说明任务过期了。怎么办？截断！ 强行停止当前任务，把剩余的工作扔掉，直接渲染当前的状态，然后告诉浏览器“我干完了”。

这个机制有什么问题？

这就好比你正在食堂排队打饭（执行任务），虽然你只排了一半（任务刚开始），但是时间到了（过期），阿姨直接把你轰出去了，不给你打了。这时候，隔壁来了一个拿着“加急单”的 VIP（高优任务），阿姨一看时间没到，就把 VIP 的饭先给了 VIP。

但是！ 如果你已经在队伍里了，阿姨虽然把你轰出去了，但你的身体还在队伍里啊！这时候 VIP 来了，阿姨可能会说：“哎，那边那个被轰出去的，你虽然过期了，但你还在队伍里，VIP 要插队，你先让开。”

这就是旧模型最大的痛点：高优任务无法打断低优任务。

一旦低优任务开始执行，它就会像一堵墙，挡住所有后来者，直到它跑完或者过期。这在 React 18 的“并发模式”下是绝对不允许的。

第三章：Lane 模型 —— 高速公路上的车道

为了解决这个问题，React 团队决定抛弃“时间”这个概念，改用优先级。

Lane 模型的核心思想很简单：不要管时间，管车道。

想象一下高速公路。有 32 条车道（React 使用了 32 位整数）。

  • Lane 0：最慢的车道，跑得最慢。
  • Lane 29：最快的车道，法拉利专用。
  • Lane 31：同步车道，那是救护车用的，谁也不能挡。

每个任务被分配一个或多个 Lane。如果任务分配到了 Lane 29，它就拥有了最高优先级。

为什么用 Lane？

因为 Lane 是基于位图的。

在 JavaScript 里，一个 32 位的整数，每一位都可以是 0 或者 1。
比如 0b000...001 代表 Lane 0。
比如 0b000...100 代表 Lane 2。
比如 0b000...101 代表 Lane 0 和 Lane 2 都有任务。

这太神奇了！这意味着我们可以用按位或（OR）运算来合并优先级，用按位与（AND）运算来检查优先级。这种计算方式快得惊人，而且没有精度问题。

第四章：代码实战 —— 从 0 到 1 的 Lane 模型

让我们来手写一个简化版的 Lane 模型调度器，看看它是怎么工作的。

1. 定义车道优先级

在 React 源码中，Lane 是通过位运算生成的。

// 模拟 React 源码中的 Lane 定义
// 我们有 32 个 Lane，从 0 到 31
// Lane 0: Idle (低优)
// Lane 29: DiscreteEventPriority (高优，如点击)
// Lane 30: ContinuousEventPriority (更高优，如滚动)
// Lane 31: SyncLane (同步，如 setState)

const NO_LANES = 0b0;
const InputContinuousLane = 0b1000000000000000000000000000000; // 1 << 29
const DefaultLane = 0b0100000000000000000000000000000;  // 1 << 28
const IdleLane = 0b0010000000000000000000000000000;     // 1 << 27
const SyncLane = 0b1000000000000000000000000000000;     // 1 << 31

// 获取最高优先级 Lane 的辅助函数
function getHighestPriorityLane(lanes) {
  // 按位与 0xFFFFFFFF 是为了防止符号位干扰（JavaScript 的位运算会处理有符号整数）
  return lanes & 0xFFFFFFFF;
}

你看，这里没有时间戳，只有数字。而且这个数字的大小直接代表了优先级。

2. 合并任务：把两个任务加到队列里

假设我们有一个 taskQueue。当新任务进来时，我们需要把它和队列里现有的任务合并优先级。

React 使用 mergeLanes 函数。

function mergeLanes(a, b) {
  return a | b; // 按位或，把两个 Lane 的位图拼在一起
}

// 场景：
// 1. 当前队列里有一个低优任务 (Lane 0)
let currentLanes = 0b1; 

// 2. 用户点击了屏幕，这是一个高优任务 (Lane 29)
const highPriorityLane = InputContinuousLane;

// 3. 合并
currentLanes = mergeLanes(currentLanes, highPriorityLane);

console.log(currentLanes); 
// 结果是：0b1 | 0b1000000000000000000000000000000
// 结果是：0b1000000000000000000000000000001
// 现在队列里既有低优又有高优，系统知道必须处理高优。

3. 判断是否需要插队：按位与

怎么判断队列里有没有高优任务？

function includesLane(lanes, lane) {
  // 如果 lanes & lane 不为 0，说明这个 lane 的位是 1，存在
  return (lanes & lane) !== 0;
}

// 场景：
const lanes = 0b1000000000000000000000000000001; // 包含高优和低优

if (includesLane(lanes, InputContinuousLane)) {
  console.log("检测到高优任务！必须插队！");
}

第五章：插队的艺术 —— Lane 模型如何解决高优任务

现在我们有了 Lane，接下来看 Scheduler 是怎么运作的。

React 18 的核心函数是 performConcurrentWorkOnRoot。它不是一次性把所有任务跑完，而是跑一会儿，然后检查一下，看看有没有“更牛”的任务插队了。

逻辑流程：

  1. 开始工作：Scheduler 调度器开始执行当前任务。此时，它手里拿着 currentLanes（当前需要处理的车道）。
  2. 执行一小段：它开始渲染、计算、更新 DOM。在这个过程中，它会不断检查 requestPaint 或者 shouldYield（浏览器是否空闲）。
  3. 检测插队：这是关键！在每一帧的循环里，React 会去检查：
    • 有没有新的更新进来了？
    • 这些新进来的更新有没有比当前正在跑的任务优先级更高？
  4. 如果高优插队：
    • React 会调用 updateLanes，把新的高优 Lane 拼接到 currentLanes 中。
    • 因为使用了按位或，currentLanes 现在包含了高优 Lane。
    • 调度器一看：哎？currentLanes 里有个高优位是 1！
    • Action！ React 会立即中断当前正在跑的低优任务，把控制权交还给浏览器（让浏览器渲染一帧），然后重新进入调度循环，这次优先处理那个高优任务。

代码模拟插队逻辑

// 模拟 Scheduler 的工作循环
let isWorking = true;
let currentTaskLane = DefaultLane; // 当前正在跑的任务优先级是默认的

function schedulerLoop() {
  while (isWorking) {

    // 1. 检查有没有高优任务插队
    // 假设有一个新的点击事件来了，Lane 是 InputContinuousLane
    const incomingHighPriorityLane = InputContinuousLane; 

    // 按位与检查
    if ((currentTaskLane & incomingHighPriorityLane) !== 0) {
      console.log("警报！高优任务插队了！");
      // 2. 重新合并 Lane
      currentTaskLane = currentTaskLane | incomingHighPriorityLane;
      // 3. 放弃当前任务，让出主线程
      return; 
    }

    // 4. 如果没有高优任务，继续执行当前任务
    console.log("继续执行低优任务...");
    doWork(currentTaskLane); // 执行渲染逻辑
  }
}

// 启动调度
schedulerLoop();

这就是 Lane 模型的神来之笔。它不再依赖“时间”来判断谁过期，而是依赖“位图”来判断谁更牛。

第六章：为什么 Lane 模型比 ExpirationTime 更强？

你可能会问：“既然都能判断优先级，为什么 React 非要大动干戈换掉 ExpirationTime？”

这里有两个核心原因：精度问题和并发能力。

1. 浮点数的精度陷阱

ExpirationTime 使用的是时间戳，本质上是 Date.now() + timeout。这是浮点数。

在 JavaScript 中，浮点数是有精度限制的。
如果你有 1000 个任务，每个任务间隔 1ms。
任务 1: T + 0ms
任务 2: T + 1ms
…
任务 1000: T + 999ms

在极端情况下，浮点数的累加误差可能导致 Task 1000 的过期时间比 Task 1 还要早！这会导致任务执行的顺序完全错乱。

Lane 模型使用的是整数位运算。整数的计算是精确的，永远不会出现“任务 999 比任务 1 优先级还低”这种荒谬的事情。

2. 饥饿问题

在旧模型中，如果一个低优任务占据了主线程，高优任务会一直等待，直到低优任务完成或者过期。这叫“饥饿”。

在 Lane 模型中，高优任务拥有独立的 Lane。只要 Lane 是 1，它就有权随时打断低优任务。它不会饿死，因为它不需要等到时间戳，它只需要等到“自己”这个 Lane 被处理。

第七章：深入源码 —— Lane 的具体实现细节

让我们稍微深入一点，看看 React 源码里 Lane 到底长什么样。

Lane 类

React 内部定义了一个 Lane 类，本质上它就是一个 32 位的整数。

class Lane {
  constructor(lane) {
    this.lane = lane;
  }
}

// 生成不同的 Lane
export const InputContinuousLane = 1 << 29;
export const DefaultLane = 1 << 28;
export const IdleLane = 1 << 27;

优先级映射表

React 定义了一个映射表，把 Lane 映射成数字优先级，方便比较。

// LaneToLanePriority 映射
// 0: SyncLane
// 1: InputContinuousLane
// 2: DefaultLane
// 3: IdleLane
function laneToPriority(lane) {
  switch (lane) {
    case SyncLane:
      return 0;
    case InputContinuousLane:
      return 1;
    case DefaultLane:
      return 2;
    case IdleLane:
      return 3;
    default:
      return 4;
  }
}

优先级合并：lanesToPriority

当队列里有多个任务时，我们需要知道整个队列的优先级是多少。React 提供了一个 lanesToPriority 函数，它会遍历所有的 Lane，找出数值最大的那个（也就是优先级最高的那个）。

function lanesToPriority(lanes) {
  let priority = -1;

  // 遍历所有 Lane
  for (let i = 0; i < 32; i++) {
    const lane = 1 << i;
    if ((lanes & lane) !== 0) {
      const lanePriority = laneToPriority(lane);
      if (lanePriority > priority) {
        priority = lanePriority;
      }
    }
  }

  return priority;
}

这个函数在 Scheduler 的 shouldYield 逻辑中起到了关键作用。如果新任务的优先级比当前正在跑的任务优先级高，那就必须让出控制权。

第八章：并发模式下的“车道”博弈

Lane 模型是 React 18 并发模式的基础。

在旧模型里，render 函数执行完就结束了。在 Lane 模型里，render 函数被拆碎了。

时间切片 是怎么实现的？就是靠 Lane。

每次执行 performConcurrentWorkOnRoot 时，React 会从 workInProgressRootRenderLanes 中取出一个或多个 Lane 来处理。

function performConcurrentWorkOnRoot(root, lanes) {
  // 1. 计算一下这一帧能跑多少 Lane
  // 假设这一帧有 5ms，能跑 2 个 Lane
  const nextLanes = pickNextLanes(root, lanes);

  // 2. 执行渲染
  renderRootSync(root, nextLanes);

  // 3. 检查有没有更高优先级的任务插队
  const remainingLanes = root.pendingLanes;
  if (includesHighPriorityLane(remainingLanes, nextLanes)) {
    // 如果有，下次循环再处理
    requestEventTime(); // 标记一下这是哪一帧的事件
    return;
  }

  // 4. 没有插队，提交 DOM
  commitRoot(root);
}

举个生动的例子：

假设你在修路。

  • Lane 模型：你有一辆挖掘机。你正在修慢车道（DefaultLane）。突然，一辆救护车（SyncLane）来了。你立刻放下挖掘机，推开通往救护车道的门，让救护车过去。救护车过去后，你继续修慢车道。
  • ExpirationTime 模型：你正在修慢车道，票过期了（10:00 到了）。你停工，但救护车来了，救护车没票，或者救护车票没过期但被你挡住了，你也停着不动。救护车只能等。

第九章：Lane 的层级体系

Lane 模型不仅仅是一个数字，它是一个层级体系。

从低到高：

  1. SyncLane (Lane 31)：同步优先级。这是最极端的情况，比如 flushSync。这就像是在高铁上强制关门，不管你在做什么，立刻停止，执行完这个任务再开门。
  2. InputContinuousLane (Lane 29)：连续输入优先级。比如滚动事件、拖拽。这种操作必须非常跟手，不能卡顿。
  3. DefaultLane (Lane 28)：默认优先级。普通的 setState，组件渲染。
  4. IdleLane (Lane 27)：空闲优先级。这是 React 18 引入的新概念。当浏览器空闲的时候，React 才会去处理这些任务。比如后台数据更新，或者非关键的计算。

这种分层设计，让 React 在处理不同类型任务时有了更精细的控制权。

第十章：性能优化与位运算的魔力

为什么 React 不直接用数组存优先级，非要用位运算？

因为位运算在 CPU 层面是极其高效的。OR 和 AND 指令只需要几个时钟周期。

在复杂的调度逻辑中，React 需要频繁地进行优先级比较、合并和检查。如果用数组或者对象，每次都要遍历、比较、创建新对象，那性能开销会非常大。

Lane 模型利用了 JavaScript 整数的特性，把“优先级”变成了“二进制位图”。

// 检查某个 Lane 是否被占用
const hasLane = (lanes, lane) => (lanes & lane) !== 0;

// 合并两个优先级
const merge = (a, b) => a | b;

// 移除某个 Lane
const removeLane = (a, b) => a & ~b;

这些操作都是瞬间完成的。

第十一章：总结与展望

Lane 模型的出现，标志着 React 从“命令式渲染”向“声明式并发”的彻底跨越。

它解决了旧模型无法解决的痛点：无法打断。

通过引入 Lane（车道）和位图（Bitmap），React 实现了一个灵活、高效、无精度误差的调度系统。在这个系统里，优先级不再是死板的“时间”，而是动态的“状态”。

当用户点击屏幕，当页面滚动，当数据更新，Lane 模型会自动识别这些高优事件，并像超级英雄一样从低优任务中“插队”而出，确保用户的交互永远是最流畅的。

这就是 React 18 的秘密武器。下次当你写代码时，如果遇到性能问题，想想那个 32 位的整数，想想那些穿梭在二进制位图中的 Lane，你就知道，你的 React 正在后台用最优雅的方式，为你处理着千军万马的任务。

好了，今天的讲座就到这里。下课！

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注