React 交互优先级映射：源码分析点击事件如何自动关联至高优先级 DiscreteLane 通道

大家好，欢迎来到今天的源码深度剖析课。我是你们的资深 React 导师。

今天我们不聊 UI 怎么画，也不聊 Hooks 怎么用，我们要聊点“硬核”的，甚至带点“物理味”的东西。我们要聊聊 React 的并发模式，更具体一点，聊聊优先级。

想象一下，你的 React 应用就像一个繁忙的超级调度中心。这个中心里有一堆任务在排队：有的是计算复杂的布局（比如一个巨大的 3D 图表在后台渲染），有的是处理用户的点击（比如点击了一个“提交”按钮），还有的是处理定时器（比如每秒更新一次的数据）。

如果没有优先级，这就像是一条所有车都在跑的单行道，谁也不让谁，结果就是——用户点一下按钮，屏幕卡住了，直到布局计算完才显示点击结果。那用户体验就崩了，简直是灾难。

所以，React 为了解决这个问题，引入了“车道”的概念。而今天，我们要解决的核心问题是：当用户点击鼠标的那一刻，React 是如何“嗅探”到这是一个高优先级的交互事件，并迅速将其塞进高优先级的“DiscreteLane”（离散车道）里的？

来，把咖啡端好，我们直接看源码。

---

第一部分：车道（Lanes）—— React 的二进制高速公路

首先，我们要理解什么是 Lane。在 React 源码中，Lanes 是一个 32 位的二进制整数。你可能会问，32 位干嘛用？这是为了性能优化的极致。

你可以把这 32 位看作是 32 条独立的“高速公路”或“车道”。

• 第 0 位：默认车道。
• 第 1 位：高优先级车道。
• 第 2 位：低优先级车道。
• …以此类推。

在 React 的世界里，不同的更新任务会被分配到不同的车道上。点击事件、输入事件，这些是“离散事件”，它们必须被立即处理，就像高速公路上的跑车，得跑得飞快。而动画帧、定时器，这些是“连续事件”，它们可以在后台慢慢跑，不影响用户交互。

源码中，Lanes 的定义在 react-reconciler 内部。虽然对外暴露的 API 可能比较抽象，但底层的逻辑是硬编码的二进制位操作。

为了方便理解，我们来看一段模拟的 Lane 定义（这是基于 React 18 源码的简化逻辑）：

// 源码位置: Scheduler 内部定义
// 这是一个 32 位的二进制数，每一位代表一个优先级
const NoLanes = 0b00000000000000000000000000000000;
const DefaultLane = 0b00000000000000000000000000000001; // 1
const DiscreteLane = 0b00000000000000000000000000000010; // 2
const ContinuousLane = 0b00000000000000000000000000000100; // 4
const IdleLane = 0b00000000000000000000000000001000; // 8

注意到了吗？DiscreteLane 的值是 2。在二进制世界里，这代表“第二优先级”。如果多个任务同时发生，React 会先处理第 0 位，再处理第 1 位（DiscreteLane）。这意味着，一旦有 DiscreteLane 的任务进来，它就比所有 DefaultLane 的任务都快。

那么问题来了，用户点击鼠标，这个动作怎么就变成了二进制数字 2 呢？

---

第二部分：事件监听器注册—— React 的“看门人”

React 并不是监听所有的 DOM 事件。它非常聪明，它只注册那些它关心的、需要特殊处理的事件。

在 React 的源码中，有一个核心类叫 ReactEventListener。这个家伙就像是 React 应用的“看门人”。当浏览器触发一个原生事件（比如 click）时，这个事件会先经过看门人，看门人判断一下：“哦，这是个点击事件，我要把它交给 React 的调度系统。”

我们来看一下 ReactEventListener 是如何注册监听器的。这部分代码通常在 react-dom/src/events/ReactEventListener.js 中。

// 模拟源码结构：ReactEventListener 注册监听器
class ReactEventListener {
  constructor() {
    // ... 初始化代码
    this.topLevelTypes = {
      onClick: 'click',
      onClickCapture: 'click',
      // ... 其他事件
    };
  }

  // 注册监听器的方法
  listenTo(eventName, domTarget) {
    // 1. 获取监听器类型，区分是捕获阶段还是冒泡阶段
    const registrationName = this.topLevelTypes[eventName];

    // 2. 调用监听器注册的内部逻辑
    this.listenToTopLevel(eventName, domTarget);

    // 3. 将事件名称映射到 React 的调度系统
    // 这一步非常关键，它告诉 React："嘿，当 'click' 发生时，请调用 updateQueue"
    ReactUpdates.batchedUpdates(function() {
      // 这里的 dispatchEvent 会在点击发生时被调用
      ListenerQueue.enqueue(registrationName, domTarget);
    });
  }

  // 核心分发逻辑
  dispatchEvent(event, domTarget) {
    // ...
    // 这里是重头戏，我们要看的就是这里如何决定优先级
    const eventType = event.type;
    // 获取当前事件对应的 React 优先级
    const dispatchEventPriority = getEventPriority(eventType);

    // 将事件放入调度队列
    if (dispatchEventPriority === DiscreteEventPriority) {
      // 如果是离散事件（高优先级），直接处理
      this.batchedUpdates(dispatchDiscreteEvent, event, domTarget);
    } else {
      // 如果是连续事件，走另一套逻辑
      this.batchedUpdates(dispatchContinuousEvent, event, domTarget);
    }
  }
}

看到了吗？dispatchEvent 方法是关键。当浏览器告诉 React “有人点了我”的时候，React 并不是简单地执行 setState，而是先问自己：“这个事件的优先级是多少？”

这就是我们接下来要深挖的：getEventPriority 函数。

---

第三部分：映射魔法—— getEventPriority 的秘密

这是今天最精彩的部分。React 是如何知道 click 是高优先级，而 scroll 是中优先级的？

源码中，这个逻辑在 react-dom/src/events/ReactDOMEventReplaying.js 或者 react-dom/src/events/getEventPriority.js（取决于 React 版本，逻辑类似）。

这是一个巨大的 switch 语句，简直就是一张“事件优先级地图”。

// 源码位置: react-dom/src/events/getEventPriority.js
// 简化版逻辑

// 定义优先级常量
export const DiscreteEventPriority = 2; // 高优先级
export const ContinuousEventPriority = 1; // 中优先级
export const IdleEventPriority = 0; // 低优先级

// 定义事件类型映射表
const discreteEventTypes = new Set([
  'click',
  'input',
  'keydown',
  'keyup',
  'focusin',
  'focusout',
  'submit',
  'change',
  'mousedown',
  'mouseup',
  'touchstart',
  'touchend'
]);

const continuousEventTypes = new Set([
  'scroll',
  'mouseenter',
  'mouseleave'
]);

export function getEventPriority(eventType: string): number {
  // 第一层判断：离散事件（点击、输入等）
  if (discreteEventTypes.has(eventType)) {
    return DiscreteEventPriority; // 返回 2 (DiscreteLane)
  }

  // 第二层判断：连续事件（滚动、鼠标悬停）
  if (continuousEventTypes.has(eventType)) {
    return ContinuousEventPriority; // 返回 1 (ContinuousLane)
  }

  // 默认情况：空闲事件或其他
  return IdleEventPriority; // 返回 0 (DefaultLane)
}

这段代码的逻辑非常直观：

1. 点击（Click）：被放入 discreteEventTypes 集合。函数直接返回 DiscreteEventPriority（值为 2）。
2. 滚动（Scroll）：被放入 continuousEventTypes 集合。函数返回 ContinuousEventPriority（值为 1）。
3. 定时器回调（Timer）：不在集合里，返回 IdleEventPriority（值为 0）。

为什么点击是 2，滚动是 1？
这不仅仅是数字游戏。在 React 的调度器 Scheduler 中，数字越小，优先级越高（或者反过来，取决于实现细节，但这里我们关注的是 Lane 的二进制位）。
实际上，在 React 18 的 Lane 体系中，DiscreteLane 是 0b10，ContinuousLane 是 0b100。
这意味着，如果你有一个正在计算布局的任务在跑（DefaultLane），突然来了一个点击事件（DiscreteLane），React 会打断布局计算，优先处理点击。这就是“并发”的核心体现。

---

第四部分：从优先级到 Lane—— 映射的桥梁

有了 getEventPriority，我们得到了一个数字（比如 2）。但这还不够，我们还需要把这个数字转换成真正的 Lane（车道）。

在 React 的源码中，有一个函数负责将“事件优先级”转换为“Lane”。

// 源码位置: react-reconciler/src/ReactFiberLane.js

// 定义 Lane 枚举
export const NoLanes = 0b00000000000000000000000000000000;
export const DiscreteLane = 0b00000000000000000000000000000010;
export const ContinuousLane = 0b00000000000000000000000000000100;

export function getLaneFromEventPriority(eventPriority: number): Lane {
  switch (eventPriority) {
    case DiscreteEventPriority: // 2
      return DiscreteLane; // 0b00000000000000000000000000000010
    case ContinuousEventPriority: // 1
      return ContinuousLane; // 0b00000000000000000000000000000100
    case IdleEventPriority: // 0
      return NoLanes; // 0b00000000000000000000000000000000
    default:
      return NoLanes;
  }
}

看懂了吗？这就是数学的魔法。

当用户点击鼠标时：

1. ReactEventListener 捕获到 click 事件。
2. 调用 getEventPriority('click')。
3. 返回 DiscreteEventPriority (2)。
4. 调用 getLaneFromEventPriority(2)。
5. 返回 DiscreteLane (0b10)。

现在，点击事件被标记为了 DiscreteLane。

---

第五部分：调度与执行—— 进入 DiscreteLane

现在，事件已经拿到了 DiscreteLane。接下来会发生什么？它如何进入 React 的执行循环？

当 dispatchEvent 被调用时，React 会调用 Scheduler 的 API。这是 React 的核心调度库。

// 源码位置: react-dom/src/events/ReactDOMEventListener.js
// 简化版

function dispatchDiscreteEvent(event, domTarget) {
  // 1. 获取事件优先级对应的 Lane
  const lane = getLaneFromEventPriority(event.type);

  // 2. 获取当前正在渲染的 Fiber 节点（如果有）
  const current = root.current;
  const eventPriority = getEventPriority(event.type);

  // 3. 创建一个 Update 对象
  // 这个 Update 包含了要执行的函数和优先级信息
  const update = {
    lane: lane, // 关键：这里是 DiscreteLane
    action: event,
    eventTime: event.timeStamp,
    suspenseConfig: null,
    next: null
  };

  // 4. 将 Update 添加到当前 Fiber 的更新队列中
  // 这一步确保了 React 知道要更新什么，以及以什么优先级更新
  enqueueUpdate(current, update, lane);

  // 5. 调度器开始工作
  // 这是最关键的一步：调度器会检查是否有高优先级的任务
  scheduleUpdateOnFiber(root, current, lane);
}

这里的 scheduleUpdateOnFiber 是 React 的心脏泵血机。它会调用底层的 Scheduler。

// 源码位置: Scheduler/src/Scheduler.js

function scheduleUpdateOnFiber(root, fiber, lane) {
  // ... 各种边界检查 ...

  // 调用调度器的核心函数
  // 这里会根据 lane 的优先级来决定是立即执行还是放入队列
  ensureRootIsScheduled(root, lane);

  // 如果有更高优先级的任务在等待，或者当前任务优先级很高，可能需要打断当前正在进行的低优先级渲染
  markUpdateLaneFromFiberToRoot(fiber, lane, root);
}

Scheduler 的“霸道”逻辑

在 Scheduler 中，有一个优先级比较的逻辑。它维护一个 taskQueue（任务队列）。

1. 低优先级任务在跑：比如正在计算一个大列表的布局。
2. 高优先级任务来了：比如用户点击了按钮。
3. Scheduler 判断：“哎呀，来了个 DiscreteLane（高优先级）的任务！当前正在跑的任务是 DefaultLane（低优先级），我必须把低优先级任务暂停！”
4. 中断渲染：React 中断当前的渲染工作，保存现场。
5. 执行高优先级：React 立即执行点击事件对应的 setState 或函数组件渲染。

这就像是你正在写一篇长篇论文（低优先级），突然老板让你去签一份合同（高优先级）。你会立马放下论文去签合同，签完回来可能还得把论文刚才写到哪页记一下（这叫恢复现场）。

---

第六部分：代码实战—— 一个完整的点击流程

为了让大家彻底明白，我们手写一段简化的 React 逻辑，模拟这个过程。

假设我们有一个按钮：

// App.js
function App() {
  const [count, setCount] = React.useState(0);

  return (
    <button onClick={() => {
      console.log("用户点击了按钮！");
      setCount(prev => prev + 1);
    }}>
      点击我 ({count})
    </button>
  );
}

当用户点击按钮时，在 React 内部发生了什么？

1. DOM 层面

浏览器捕获到 click 事件，调用 DOM 元素的 addEventListener 回调。

2. ReactEventListener 层面

ReactEventListener 的 dispatchEvent 被触发。

// 模拟内部逻辑
function dispatchEvent(event) {
  const eventType = event.type; // 'click'

  // 核心映射逻辑
  const eventPriority = getEventPriority(eventType); 
  // 此时 eventPriority === DiscreteEventPriority (2)

  const lane = getLaneFromEventPriority(eventPriority);
  // 此时 lane === DiscreteLane (0b10)

  // 调用 batchedUpdates
  // React 18 使用 enableDiscreteEvents 或类似的标志来控制
  // 如果开启了，这里会直接调用 dispatchDiscreteEvent
  ReactUpdates.batchedUpdates(function() {
    // 执行 React 内部处理点击的逻辑
    // 这会触发 setState
    dispatchDiscreteEvent(event, lane);
  });
}

3. Update 层面

dispatchDiscreteEvent 创建了一个 Update。

function dispatchDiscreteEvent(event, lane) {
  const fiber = ReactDOMCurrentFiber.current; // 当前正在渲染的组件 Fiber
  const update = {
    lane: lane, // 0b00000000000000000000000000000010
    action: () => { setCount(c => c + 1); }
  };

  // 将 update 放入 fiber 的 updateQueue
  enqueueUpdate(fiber, update, lane);

  // 触发调度
  scheduleUpdateOnFiber(root, fiber, lane);
}

4. Scheduler 层面

Scheduler 接收到 lane。

function ensureRootIsScheduled(root, lane) {
  // 获取当前时间
  const currentTime = requestCurrentTime();

  // 计算过期时间
  // DiscreteLane 的过期时间通常是 currentTime + 500ms (或者更短)
  // DefaultLane 的过期时间可能是 currentTime + 25ms

  const expirationTime = computeExpirationForLane(lane);

  // 检查是否有更高优先级的任务在队列中
  const existingCallbackNode = root.callbackNode;

  if (existingCallbackNode !== null) {
    // 如果已经有一个任务在跑了，且这个新任务优先级更高，我们需要取消旧任务
    // 这就是“打断”的机制
    const existingExpirationTime = root.callbackExpirationTime;
    if (existingExpirationTime <= lane) {
      return;
    }
    cancelCallback(existingCallbackNode);
  }

  // 创建新的调度任务
  const newCallbackNode = scheduleCallback(
    lane, // 传入 lane
    performSyncWorkOrConcurrentWork
  );

  root.callbackNode = newCallbackNode;
  root.callbackExpirationTime = lane;
}

5. Reconciler 层面

最终，performSyncWorkOrConcurrentWork 被执行。它遍历 Fiber 树，发现 App 组件有更新（updateQueue 不为空），于是重新渲染组件。

function performSyncWorkOrConcurrentWork() {
  // 1. 开始渲染
  renderRootSync(root);

  // 2. 完成渲染
  // 3. 提交 DOM 变化
  commitRoot(root);
}

---

第七部分：为什么叫 Discrete（离散）？

你可能会问，为什么叫 Discrete Lane？为什么不是 High Lane？

这个命名来源于事件发生的频率和性质。

• Discrete（离散事件）：指的是那些不可预测、发生频率低、且需要立即响应的事件。

  • 点击：你不知道用户什么时候会点，一旦点了，必须马上有反馈。
  • 按键：同理。
  • 焦点变化：Tab 键切换焦点，这是用户主动控制的。

• Continuous（连续事件）：指的是那些频繁发生、基于时间的事件。

  • 滚动：用户可能疯狂滚动，也可能不动。滚动通常不会打断其他操作，但它消耗性能。如果滚动太卡，用户会很不爽，所以给它一个中等的优先级。
  • 动画帧：基于 requestAnimationFrame，每秒 60 次。

• Idle（空闲事件）：后台任务。

  • 定时器：setTimeout。
  • 预加载：在用户不操作的时候加载下一页的数据。

React 的设计哲学是：用户交互是上帝。 所有的离散事件（点击、输入）都必须优先于连续事件（滚动）和空闲事件（定时器）。

---

第八部分：深入细节—— Input 事件的特殊性

虽然我们今天主要讲点击，但 Input 事件（input）也是 Discrete 事件。这非常有意思。

当你输入文字时，input 事件每秒可能触发几十次。如果每次都按最高优先级处理，React 的渲染循环会非常频繁地被打断，导致键盘输入有延迟，感觉像是在“打字机模式”而不是“输入模式”。

为了解决这个问题，React 引入了一个防抖机制或者节流机制。

在源码中，input 事件虽然被标记为 DiscreteEventPriority，但在实际处理时，React 会检查 isInputPending（输入待处理标志）。

如果 React 正在处理其他任务，它可能会把 Input 事件暂时挂起，或者降低处理频率。但一旦用户停止输入，或者页面空闲，这些 Input 事件就会立即被处理。这保证了打字的流畅性，同时又不至于让整个应用卡死。

// 源码位置: react-dom/src/events/ReactDOMInput.js (简化)
function handleInputEvent(event) {
  const lane = getLaneFromEventPriority(event.type); // DiscreteLane

  // 检查输入是否被挂起
  // 如果浏览器认为输入是高优先级（用户正在输入），React 会等待
  // 如果输入被挂起，React 可能会批量处理这些输入事件

  if (!isInputPending()) {
    // 直接处理
    ReactDOMEventListener.dispatchEvent(event, lane);
  } else {
    // 暂存，等浏览器认为输入不忙了再处理
    queuePendingInputEvent(event, lane);
  }
}

---

第九部分：总结与源码路径指南

好了，朋友们，今天的讲座接近尾声。让我们回顾一下这个“点击事件如何进入 DiscreteLane”的旅程。

1. 监听：ReactEventListener 在 DOM 上注册了 click 监听器。
2. 捕获：浏览器触发 click，调用监听器回调。
3. 映射：getEventPriority('click') 被调用，返回 DiscreteEventPriority (2)。
4. 转换：getLaneFromEventPriority(2) 将其转换为 DiscreteLane (0b10)。
5. 调度：scheduleUpdateOnFiber 被调用，将任务推入 Scheduler。
6. 打断：Scheduler 发现这是一个高优先级任务，打断当前正在跑的低优先级任务（如布局计算）。
7. 渲染：React 重新渲染组件，更新 DOM。

源码阅读路径建议：

如果你想自己在源码里找这段逻辑，建议按这个顺序搜索：

1. react-dom/src/events/ReactEventListener.js：看 dispatchEvent 和 listenTo。
2. react-dom/src/events/getEventPriority.js：看那个巨大的 switch 语句。
3. react-dom/src/events/ReactDOMEventReplaying.js：看事件重放机制（这是 React 18 为了支持 Suspense 和并发引入的复杂逻辑，和优先级紧密相关）。
4. Scheduler/src/Scheduler.js：看 scheduleCallback 和 shouldYield。

最后的幽默时刻：

React 的源码写得非常精妙，但也非常“啰嗦”。它就像一个严谨的管家，对于每一次点击，它都会检查：你是谁？你从哪来？你要去哪？你的优先级是多少？如果是高优先级，我必须立刻放下我手里正在擦的地板（低优先级渲染），先去开门（处理点击）。

这就是为什么 React 能在复杂的 DOM 操作中，依然保持丝滑的用户体验。它通过精细的优先级调度，确保了用户的每一次点击都能得到最快的响应。

希望今天的讲座能帮你打开 React 并发模式的大门。下次当你点击按钮时，别忘了，你的手指不仅仅是在敲击键盘，你是在向 React 的调度中心发送一条“最高指令”。

谢谢大家！