前端小卒

Appearance

5.4 Lanes 模型：优先级的管理 ​

在 React 的并发世界中，并非所有更新都生而平等。用户的点击操作显然比后台的数据预加载更需要被立即响应。为了在复杂的场景中精确地控制和调度不同类型的更新，React 引入了一套精密的优先级管理系统——Lanes 模型。

Lanes 模型是 React 并发模式的基石，它取代了早期版本中基于“过期时间”（expirationTime）的简单模型。Lanes 提供了更强大、更灵活的方式来表示和操作更新的优先级，是实现 useTransition、Suspense 等高级特性的底层核心。

什么是 Lanes？位掩码的艺术 ​

从本质上讲，Lanes 模型是一个使用 31位二进制数 来表示不同优先级的系统。每一位（或多位）代表一个“车道”（Lane），不同的“车道”对应着不同的更新优先级。一个 31 位的整数可以同时表示多个待处理的更新优先级，这种数据结构被称为位掩码（Bitmask）。

javascript
// react/packages/react-reconciler/src/ReactFiberLane.js (概念简化)

// NoLanes 是 0，表示没有待处理的工作
export const NoLanes: Lanes = /*                        */ 0b0000000000000000000000000000000;

// SyncLane，用于同步更新，优先级最高
export const SyncLane: Lane = /*                        */ 0b0000000000000000000000000000001;

// InputContinuousLane，用于连续的用户输入，如拖拽
export const InputContinuousLane: Lane = /*             */ 0b0000000000000000000000000000100;

// DefaultLane，默认的异步更新
export const DefaultLane: Lane = /*                     */ 0b0000000000000000000000010000000;

// IdleLane，空闲时执行的最低优先级任务
export const IdleLane: Lane = /*                        */ 0b0100000000000000000000000000000;

React 使用位运算来高效地操作这些 Lanes：

  • 合并 Lanes (添加优先级)：使用“按位或” |const newLanes = DefaultLane | InputContinuousLane;
  • 检查是否包含某个 Lane：使用“按位与” &const hasSyncLane = (lanes & SyncLane) !== 0;
  • 移除某个 Lane：使用“按位与” & 和“按位非” ~const lanesWithoutSync = lanes & ~SyncLane;

设计思考：为什么选择位掩码？因为它极其高效。位运算是 CPU 能执行的最基本、最快速的操作之一，并且使用一个数字就能紧凑地存储一组复杂的状态，非常适合在性能敏感的渲染路径中使用。

Lanes 的优先级层级 ​

React 定义了多种 Lane，它们共同构成了一个从高到低的优先级层级。以下是一些关键的 Lane 类型：

  1. SyncLane：同步 Lane。拥有最高优先级，用于必须立即执行的更新，例如受控组件的用户输入或 flushSync 触发的更新。它会中断正在进行的并发渲染。
  2. InputDiscreteLanes：离散输入 Lane。用于处理离散的用户输入，如 click、keydown。优先级仅次于 SyncLane，确保用户操作能得到快速反馈。
  3. InputContinuousLanes：连续输入 Lane。用于处理连续的用户输入，如 scroll、drag、mousemove。如果每次都以最高优先级响应，会造成性能问题，因此它的优先级稍低。
  4. DefaultLanes：默认 Lane。大部分标准的异步更新，如 setState、useEffect 中的更新，都属于这个优先级。
  5. TransitionLanes：过渡 Lane。由 startTransition API 标记的更新会进入这个车道。这些更新被认为是“可过渡的”，优先级很低，可以被任何更高优先级的任务中断，以保证 UI 的流畅性。
  6. RetryLanes：重试 Lane。当 Suspense 挂起后，数据加载完成时，用于重试渲染的 Lane。
  7. IdleLane：空闲 Lane。优先级最低，用于执行可以在浏览器空闲时才处理的任务，例如离屏渲染（未来特性）。

Lane 的分配：requestUpdateLane ​

当一个更新（如 setState）被触发时，React 需要为它分配合适的 Lane。这个职责由 requestUpdateLane 函数承担。

它的核心逻辑是根据更新的来源确定其优先级。

javascript
// react/packages/react-reconciler/src/ReactFiberWorkLoop.js (简化逻辑)

function requestUpdateLane(fiber: Fiber): Lane {
  // 1. 是否在 Transition 中？
  const transition = requestCurrentTransition();
  if (transition !== null) {
    return requestTransitionLane(transition);
  }

  // 2. 根据当前的执行上下文获取事件优先级
  const eventPriority = getCurrentEventPriority();

  // 3. 将事件优先级映射到具体的 Lane
  return eventPriorityToLane(eventPriority);
}

// react/packages/react-reconciler/src/ReactFiberLane.js
function eventPriorityToLane(eventPriority: EventPriority): Lane {
  switch (eventPriority) {
    case DiscreteEventPriority: // click, keydown
      return SyncLane;
    case ContinuousEventPriority: // scroll, mousemove
      return InputContinuousLane;
    case DefaultEventPriority: // 其他情况
    default:
      return DefaultLane;
  }
}

这个过程确保了不同场景下的更新从一开始就被打上了正确的优先级标记。

Lane 的选择与执行：getNextLanes ​

当多个不同优先级的更新同时存在时，React 如何决定先处理哪一个？

  1. 收集：所有被调度的更新，其对应的 Lane 都会被合并到应用根节点（FiberRoot）的 pendingLanes 字段中。 root.pendingLanes |= newLane;

  2. 选择：在开始一个新的渲染工作之前，React 会调用 getNextLanes 函数。这个函数是调度的“指挥官”，它的任务是从 pendingLanes 中挑选出优先级最高的 Lane(s) 作为本次渲染要处理的目标。

javascript
// react/packages/react-reconciler/src/ReactFiberLane.js (简化逻辑)

export function getNextLanes(root: FiberRoot, wipLanes: Lanes): Lanes {
  const pendingLanes = root.pendingLanes;

  // 永远优先处理同步 Lane
  if ((pendingLanes & SyncLane) !== NoLanes) {
    return SyncLane;
  }

  // 其次处理输入相关的 Lane
  if ((pendingLanes & InputLanes) !== NoLanes) {
    return pendingLanes & InputLanes;
  }

  // 再次处理过渡 Lane
  if ((pendingLanes & TransitionLanes) !== NoLanes) {
    return pendingLanes & TransitionLanes;
  }

  // ... 其他优先级的判断

  // 如果没有特定高优任务，则返回所有待处理任务中优先级最高的那个
  return getHighestPriorityLanes(pendingLanes);
}

getNextLanes 的存在，完美解释了 React 的并发行为。例如，当一个低优先级的 DefaultLane 更新正在渲染时，如果用户点击了按钮，一个高优先级的 SyncLane 会被加入 pendingLanes。在下一个调度周期，getNextLanes 会立即选中 SyncLane，React 就会中断当前的渲染，转而去处理这个更高优先级的同步更新，从而保证了界面的即时响应。

总结 ​

Lanes 模型是 React 实现并发渲染和精细化调度策略的基石。它通过高效的位掩码系统，为不同来源的更新赋予了不同的优先级，并通过 requestUpdateLane 和 getNextLanes 等核心函数，实现了更新的智能分配与选择。掌握 Lane 模型，是深入理解 React 高性能本质的关键。

Last updated: