React 调度优先级：DiscreteLane、ContinuousLane 和 DefaultLane 对应哪些具体的用户交互场景？

各位好，欢迎来到“React 内核解剖室”。

我是你们的向导，今天我们要聊的不是那些花里胡哨的 Hooks，也不是那些让你头秃的 CSS 动画。我们要聊的是 React 脑子里的“时间管理哲学”。是的，你没听错，React 也有“时间管理”问题。

想象一下，你是个大厨（React），你的后厨（浏览器渲染线程）非常忙碌。突然，服务员（用户）把一盘刚做好的菜（用户输入）重重地拍在桌子上，大喊：“我要这个！快给我！”（高优先级任务）。同时，背景音乐（动画）在播放，隔壁桌在吵架（滚动事件），而角落里的清洁工（后台任务）正在慢慢拖地（低优先级任务）。

如果大厨只听服务员一个人的，那音乐就停了，拖地的人就被赶跑了，页面就崩了。如果大厨把每个人都同时伺候好，那厨房就炸了。

那么，React 是怎么决定谁先上菜的？这就是我们今天要讲的核心——调度优先级。

特别是那三大巨头：DiscreteLane（离散车道）、ContinuousLane（连续车道）和 DefaultLane（默认车道）。

准备好了吗？我们要开始解剖了。这可是硬核干货，建议备好咖啡。

---

第一部分：车道系统——React 的二进制思维

在 React 18 之前，React 的调度逻辑比较简单粗暴，就像是一个只会按顺序执行的流水线。但在并发模式下，React 引入了“Lane”的概念。

简单来说，Lane 就是一个二进制位（Bit）。你可以把它想象成一条高速公路。高速公路有多条车道，有的车道跑跑车，有的跑大巴，有的跑拖拉机。

在 React 的世界里，这些车道用数字表示：

• 0b1 (1) = 离散车道
• 0b10 (2) = 连续车道
• 0b100 (4) = 默认车道

（注：实际代码中为了方便，React 使用了 SharedLane 等高级组合，但底层逻辑是位掩码。）

核心原则：

• 数字越小，优先级越高。 就像赛车跑道，跑道 1 是最快的，跑道 4 最慢。
• 位运算。 React 使用“与（AND）”和“或（OR）”操作来合并和检查优先级。

---

第二部分：DiscreteLane（离散车道）——那个喊“救命”的紧急情况

对应场景： 用户点击、键盘输入、焦点变化、触摸事件。

这是 React 优先级最高的车道。为什么？因为这是用户直接与你的应用交互的时刻。如果用户点击了一个按钮，React 没有响应，用户会以为页面死机了。这种“卡顿感”是用户体验的大敌。

为什么叫“离散”？
因为这类事件通常不是连续发生的。你点一下，停一会，再点一下。它们是“离散”的。它们需要立即执行，打断其他所有正在做的事情。

深度解析

在 React 内部，DiscreteLanes 是一个包含多个位的掩码：1 | 2 | 4 | 8 | ...。这意味着任何属于这一类的任务，都具有极高的优先级。

技术细节：
当你在浏览器中触发一个点击事件时，React 的 Scheduler 会收到这个任务。如果此时 React 正在渲染一个低优先级的任务（比如正在卸载一个巨大的页面组件），调度器会立刻中断那个低优先级任务，转而执行这个点击事件的处理程序。

为什么这么做？因为点击事件通常涉及 event.preventDefault()。如果 React 没有立刻处理这个点击，浏览器可能会在点击事件回调执行之前就触发了默认行为（比如表单提交），或者用户再次点击时，事件队列里已经堆积了太多事件，导致反应迟钝。

代码示例：模拟高优先级中断

虽然我们通常不手动写调度器，但我们可以通过 useEffect 来模拟这种“被打断”的感觉。

import React, { useState, useEffect } from 'react';

// 模拟一个低优先级的后台任务
const HeavyBackgroundTask = () => {
  const [logs, setLogs] = useState([]);

  useEffect(() => {
    // 模拟一个耗时较长的计算任务，我们把它标记为低优先级（默认）
    // 在 React 18 中，普通的 setState 默认就是 DefaultLane
    const taskId = setTimeout(() => {
      console.log('Heavy task finished'); // 这行日志可能不会立即打印，因为可能被中断
      setLogs(prev => [...prev, 'Heavy task finished']);
    }, 100);

    return () => clearTimeout(taskId);
  }, []);

  return (
    <div className="heavy-task">
      <h3>后台任务监控</h3>
      <ul>
        {logs.map((log, i) => <li key={i}>{log}</li>)}
      </ul>
    </div>
  );
};

// 模拟高优先级任务
const HighPriorityButton = () => {
  const [logs, setLogs] = useState([]);

  const handleClick = () => {
    console.log('User clicked!'); // 立即打印
    setLogs(prev => [...prev, 'User clicked!']);
    // 模拟一个同步的、高优先级的操作
    alert('This is an alert! React must handle this immediately!');
  };

  return (
    <div>
      <button onClick={handleClick}>
        点击我！
      </button>
      <ul>
        {logs.map((log, i) => <li key={i}>{log}</li>)}
      </ul>
    </div>
  );
};

export default function DiscreteLaneDemo() {
  return (
    <div>
      <h2>场景 1：DiscreteLane (用户点击)</h2>
      <p>点击按钮，观察控制台。你会发现，点击事件总是最先被处理，甚至可能打断下面的任务。</p>
      <HighPriorityButton />
      <hr />
      <HeavyBackgroundTask />
    </div>
  );
}

注意看代码中的 alert()。
这是一个经典的坑。alert() 是浏览器原生的阻塞式弹窗。当它弹出时，React 的调度器会被挂起。这正好说明了 DiscreteLane 的重要性：它必须被处理，因为它会阻塞浏览器的主线程。

---

第三部分：ContinuousLane（连续车道）——那个一直在动的家伙

对应场景： 滚动、动画帧更新、视频播放、鼠标移动。

如果说 DiscreteLane 是那个大喊大叫的顾客，ContinuousLane 就是那个一直在翻菜单、点菜的顾客。这类任务的特点是频率高、持续时间长、且不能有明显的卡顿。

为什么叫“连续”？
因为滚动和动画是连续不断的。如果你滚动一个长列表时，页面卡顿了一下，那体验简直是灾难。React 必须保证这类任务能够尽可能平滑地运行，哪怕牺牲一点其他任务的性能。

深度解析

ContinuousLane 使用 requestAnimationFrame 的逻辑。在 React 内部，它对应的是 ContinuousLanes（例如 0b100000）。

当用户开始滚动时，React 会检测到滚动事件。如果此时 React 正在渲染一个高优先级的任务，React 会暂停滚动渲染，转而去渲染高优先级任务。但是，一旦高优先级任务完成，React 会立即（在下一个 RAF 周期）恢复滚动的渲染。

这里有一个微妙的平衡：如果滚动事件处理得太慢（比如在滚动回调里做了极其复杂的计算），React 会认为这是一个“连续高优先级”任务，甚至可能提升它的优先级。

代码示例：滚动与动画

让我们看看如何在代码中体现这种区别。React 提供了 useTransition 来将一个状态更新标记为低优先级（通常在 ContinuousLane 上），从而避免阻塞高优先级的滚动。

import React, { useState, useTransition } from 'react';

const InfiniteList = () => {
  const [count, setCount] = useState(0);
  // startTransition 将后续的 setState 标记为低优先级
  const [isPending, startTransition] = useTransition();

  const handleIncrement = () => {
    // 这是一个高优先级更新（DiscreteLane）
    // 点击按钮时，React 会立即渲染这个数字
    setCount(prev => prev + 1);
  };

  const handleIncrementBig = () => {
    // 这是一个低优先级更新（ContinuousLane）
    // React 会先渲染点击按钮的反馈，然后利用空闲时间慢慢渲染这个巨大的数字变化
    startTransition(() => {
      setCount(prev => prev + 10000);
    });
  };

  return (
    <div style={{ padding: '20px' }}>
      <h1>Count: {count}</h1>
      <p>isPending: {isPending ? 'Yes (Rendering heavy stuff...)' : 'No'}</p>

      <div style={{ display: 'flex', gap: '10px', marginBottom: '20px' }}>
        <button onClick={handleIncrement}>Add 1 (High Priority)</button>
        <button onClick={handleIncrementBig}>Add 10000 (Low Priority)</button>
      </div>

      <div style={{ height: '1000px', overflowY: 'auto', border: '1px solid #ccc' }}>
        {/* 这里的列表项会随着数字变化而疯狂渲染 */}
        {Array.from({ length: count }, (_, i) => (
          <div key={i} style={{ padding: '10px', borderBottom: '1px solid #eee' }}>
            List Item {i + 1}
          </div>
        ))}
      </div>
    </div>
  );
};

export default InfiniteList;

解析：
当你点击“Add 1”时，数字变化是瞬间完成的（DiscreteLane），你感觉非常灵敏。
当你点击“Add 10000”时，数字不会立即变成 10000。你会看到 isPending: Yes，然后数字慢慢增加。为什么？因为渲染 10,000 个列表项是一个“连续”的任务，React 把它放在了 ContinuousLane 上。这样，如果你在渲染过程中试图滚动列表，滚动事件依然能被响应，因为滚动事件也是 ContinuousLane，React 会优先保证滚动的流畅性。

---

第四部分：DefaultLane（默认车道）——那个默默无闻的清洁工

对应场景： 组件卸载、后台数据获取、非交互式的状态更新、简单的 setState。

这是 React 的“兜底车道”。当你只是单纯地写 setState，没有使用 useTransition，也没有处理特殊的输入事件时，React 默认会把这个任务扔到 DefaultLane。

为什么叫“默认”？
因为它的优先级最低。它就像是你下班后留在办公室的清洁工。如果老板（用户）回来了（触发了高优先级事件），清洁工必须立刻停下手里的活，去迎接老板。等老板走了，清洁工再继续拖地。

深度解析

DefaultLane 对应的位通常是 0b100000000 (256) 或者更高。

在 React 的调度循环中，DefaultLane 的任务通常在每一帧的“后期”执行。如果一帧（约16ms）里只有 DefaultLane 的任务，React 会把它们一次性全部跑完。但如果一帧里混合了 Discrete 和 Continuous 任务，DefaultLane 的任务就会被挤到最后，甚至被跳过一帧，直到下一帧。

代码示例：卸载时的挣扎

这是一个非常经典的场景。当用户点击“离开页面”时，React 需要执行 useEffect 的清理函数。这通常是一个 DefaultLane 任务。但此时，用户可能正在疯狂点击“取消离开”按钮（DiscreteLane）。

import React, { useState, useEffect } from 'react';

const PageUnloader = () => {
  const [leaving, setLeaving] = useState(false);

  useEffect(() => {
    // 这是一个清理函数。它通常是 DefaultLane 任务。
    // 但如果它很慢（比如发请求），用户可能会感到卡顿。
    if (leaving) {
      console.log('Cleaning up resources... This is DefaultLane work.');
      const timer = setTimeout(() => {
        console.log('Cleanup complete. You can go now.');
        setLeaving(false); // 重置状态
      }, 2000);
      return () => clearTimeout(timer);
    }
  }, [leaving]);

  return (
    <div>
      <h2>离开页面测试</h2>
      <button onClick={() => setLeaving(true)}>离开页面</button>
      <p>点击离开后，等待2秒，或者点击取消。</p>
    </div>
  );
};

export default PageUnloader;

场景模拟：

1. 点击“离开页面”。setLeaving(true)。React 开始调度清理任务（DefaultLane）。
2. 清理函数开始执行，打印日志。
3. 在清理还没完成（2秒倒计时）的时候，你疯狂点击“离开页面”按钮（或者任何按钮）。
4. React 会立即中断清理任务，去处理你的点击（DiscreteLane）。
5. 一旦点击处理完毕，React 回到清理任务，继续打印日志。

注意： 如果清理函数非常耗时（比如涉及复杂的 DOM 操作或网络请求），它可能会阻塞整个渲染循环。这就是为什么 React 官方建议清理函数要保持轻量。

---

第五部分：调度器的“黑魔法”——Scheduler 包

React 的调度逻辑并不是凭空捏造的，它直接调用了 React 官方维护的 Scheduler 包。这个包其实就是 requestIdleCallback 和 requestAnimationFrame 的一个跨浏览器封装。

核心概念：时间切片

React 并不是一次性把所有任务都跑完。它会把任务切成小块。

• 每一帧（约 16ms）： React 会尝试执行一些任务。
• DiscreteLane: 如果这一帧刚开始，React 会优先处理 DiscreteLane 的任务。
• ContinuousLane: 如果有 ContinuousLane 的任务（比如滚动），React 会确保在每一帧的“早期”处理它们，以保证动画的 60fps。
• DefaultLane: 如果前面都处理完了，React 会处理 DefaultLane 的任务，或者如果时间不够，就挂起，等待下一帧。

代码实战：手动控制优先级

虽然我们很少直接使用 Scheduler，但在高级调试或编写自定义渲染逻辑时，了解它很重要。

import { unstable_runWithPriority, unstable_IdlePriority, unstable_NormalPriority, unstable_UserBlockingPriority, unstable_ImmediatePriority } from 'scheduler';

function SchedulerDemo() {
  const log = (priorityName) => {
    console.log(`Task running at: ${priorityName}`);
  };

  const runTasks = () => {
    // 模拟不同优先级的任务
    unstable_runWithPriority(unstable_ImmediatePriority, () => {
      log('Immediate Priority (Discrete-like)');
    });

    unstable_runWithPriority(unstable_UserBlockingPriority, () => {
      log('User Blocking Priority (Continuous-like)');
    });

    unstable_runWithPriority(unstable_NormalPriority, () => {
      log('Normal Priority (Default)');
    });

    unstable_runWithPriority(unstable_IdlePriority, () => {
      log('Idle Priority (Background)');
    });
  };

  return (
    <div>
      <button onClick={runTasks}>Run Scheduler Demo</button>
    </div>
  );
}

export default SchedulerDemo;

观察控制台：
你会发现 ImmediatePriority 和 UserBlockingPriority 几乎是同时执行的（或者 Immediate 稍快）。而 NormalPriority 和 IdlePriority 可能会稍微晚一点，或者被挤到最后。

---

第六部分：为什么这很重要？——性能优化的直觉

理解这三个 Lane，能让你在面对性能问题时，不再盲目地优化代码，而是找到“病根”。

1. 为什么我的滚动列表卡顿？

   • 可能原因：你在滚动事件的处理函数里写了 setState，而这个 setState 导致了大量的组件重新渲染。
   • 解决方案：使用 useTransition 将这个 setState 标记为低优先级（ContinuousLane），让它去和滚动事件抢时间，而不是打断滚动事件。

2. 为什么我的输入框响应慢？

   • 可能原因：你在输入框的 onChange 事件里做了极其复杂的计算或同步的 setState，甚至可能阻塞了事件循环。
   • 解决方案：将计算移到 useEffect 或 requestAnimationFrame 中，或者将 setState 改为异步。

3. 为什么页面卸载时白屏？

   • 可能原因：useEffect 的清理函数里有同步代码或长耗时操作（DefaultLane 被阻塞）。
   • 解决方案：确保清理函数是异步的。

---

第七部分：总结与实战建议

好了，伙计们，我们讲了很多。

让我们再回顾一下这三位“老大哥”：

1. DiscreteLane (1, 2, 4…): 用户输入、点击、聚焦。
   • 性格： 急躁、霸道、必须马上办。
   • 规则： 它是老大，任何其他任务都必须给它让路。
2. ContinuousLane (16, 32, 64…): 滚动、动画。
   • 性格： 坚韧、持续、不能有卡顿。
   • 规则： 它是二把手，平时负责维持场面，但如果老大来了，它也得退。
3. DefaultLane (256…): 卸载、后台任务。
   • 性格： 慢吞吞、默默无闻。
   • 规则： 老板不在的时候才干活，老板来了就停手。

最后的建议

在写 React 代码时，不要去想 Lane。React 会帮你分配。但是，当你遇到性能瓶颈时，试着问自己：

• “这是一个用户交互吗？” -> 如果是，React 已经给它分配了 DiscreteLane。
• “这是一个正在进行的动画或滚动吗？” -> 如果是，考虑用 useTransition 降级优先级。
• “这是一个后台任务吗？” -> 如果是，React 已经给它分配了 DefaultLane。

记住： 并发模式不是让你手动去控制每一帧，而是给你提供了一套工具，让你能告诉 React：“嘿，这个任务很重要，那个任务不重要，请帮我安排好时间。”

不要成为那个在厨房里拿着勺子乱挥的大厨，要成为那个懂得分配任务、管理时间的指挥官。

好了，今天的讲座就到这里。如果你觉得这篇文章让你对 React 的调度有了新的理解，请给点个赞。如果你还是没太懂，没关系，反正 React 还会继续帮你调度，你只需要安心写业务代码就行。

下次见！