好，请大家坐下。把你们手里那杯还没喝完的咖啡放下，眼神聚焦。
今天我们不讲“Hello World”，也不讲组件传参。今天我们要聊的是 React 的一个核心心法，或者说，是 React 领域里的一枚“核按钮”。它是 React 从“同步阻塞”走向“异步流”的基石，是那个让服务端渲染（SSR）变得像魔法一样流畅，却又让无数面试官抓耳挠腮的概念。
它是渐进式注水，或者更学术一点，选择性注水。
但在我们深入代码之前，我想先请大家闭上眼睛，想象一个场景。
场景一：当“同步”是种折磨
想象一下，你在一个雨夜，手里提着一桶刚洗完的菜（也就是那个 HTML 字符串），你要去一个只有一根针那么细的管道里（也就是用户的浏览器）。
这就是Hydration（注水）的本质。
服务端把你的菜洗好了（HTML 生成好了），现在客户端需要把这个菜塞进管道里。但问题来了：如果这桶菜有 5000 行，而管道只有针那么细，你怎么办？
旧时代的 React（React 17 及以前） 是这么干的：它拿着勺子，一勺一勺地往管道里塞。它不管三七二十一，先塞第一个 div，检查对不对，塞第二个 div，检查对不对。就在它把前 4999 行塞进去的时候，用户不耐烦了，手指一抖，在还没注水的第 5000 行上面，猛地按了一下鼠标。
这时候发生了什么？
React 被迫停下了注水动作。它把那第 5000 行的 HTML 给忘了，它必须重新渲染这一行，挂上事件监听器，然后告诉用户：“抱歉，刚才那个点击被忽略了，我正在给这一行填色，请稍等 0.5 秒。”
这就叫阻塞。这就叫糟糕的交互体验。用户看着按钮悬在半空，感到一种深深的被忽视的寒意。
场景二：Lane 的诞生
为了拯救这个尴尬的局面，React 引入了 Lanes（车道）模型。
把 React 的任务队列想象成一条高速公路。以前，只有一条车道，谁先来谁先走，谁也别想超车。现在，我们要把这条高速路改成多车道。
- Lane 0：最高优先级。比如用户正在疯狂点击一个按钮。
- Lane 1：中优先级。比如组件正在挂起，等待数据。
- Lane 2：低优先级。比如后台更新，或者一些非关键的计算。
当一个用户交互（User Interaction） 发生时，React 会把这个交互标记为最高优先级（比如 Lane 0）。然后，它看了一眼正在注水（Hydration）的任务——哦，那个任务可能正在 Lane 2 上慢吞吞地跑。
这时候，React 的算法就会像一位经验丰富的交警一样大喊一声：“停！那个在低车道爬行的注水任务，给我闪一边去！用户在 Lane 0 按了摩丝，我要立刻给他处理！”
这就是选择性注水的雏形：根据优先级拦截任务，优先响应交互。
深度解析：代码中的“微操”
现在，让我们穿上紧身衣，钻进 React 的核心源码里，看看这个算法到底是怎么运作的。我们不看那些花里胡哨的 API，我们要看底层的调度逻辑。
1. 请求的入口：requestHydrationRoot
一切的开始，都是当 React 收到服务端的 HTML 后，它需要一个入口来开始这场“注水”的冒险。
在 React 的 Fiber 架构中，有一个 HydrationRootFiber（注水根节点）。当用户访问页面，React 需要告诉调度器：“嘿，伙计，现在开始注水。”
// 模拟 React 内部逻辑
function requestHydrationRoot(container, onReady, options) {
// 1. 创建一个 Fiber 根节点
// 这个根节点就是我们的指挥官，它手里拿着一把“优先级钥匙”
const root = createFiberRoot(container, hydration);
// 2. 设置回调函数
// 这个函数会在注水完成后或者发生中断后被调用
onReady(root);
// 3. 暴露一个 updateContainer
// 这意味着，一旦我们拿到了 DOM，随时可以往里面扔数据
return root;
}这时候，root.pendingLanes 是空的。路是空的，我们可以开始修了。
2. 触发注水：调度器介入
用户访问页面，React 请求调度器启动。
function scheduleRoot() {
// 这里有一个关键点：renderRootSync 或者 renderRootConcurrent
// 我们以同步为例，看看它怎么处理 hydration
renderRootSync(root, lanes);
}在 renderRootSync 里面，React 开始遍历 DOM 树。它看到一个 <div>，它查服务端的 HTML，一模一样。好，这个 <div> 被标记为“已注水”。
它继续向下走。这时候，它面临一个选择：是继续注水，还是停下来？这就涉及到了选择性注水的核心算法。
3. 核心拦截逻辑：shouldNotHydrate
在 React 的 Fiber 节点更新逻辑中，有一个非常经典的判断：
// 简化版伪代码
function shouldNotHydrate(fiber) {
// 情况 A: 如果当前 fiber 节点有一个正在等待的更新
// 比如组件内部有个 state 更新，优先级比注水高
if (fiber.lanes !== NoLanes) {
return true;
}
// 情况 B: 如果父节点被标记为不可注水
if (fiber.parent && fiber.parent.flags & Dehydrated) {
return true;
}
return false;
}重点来了：用户点击的拦截
当用户点击屏幕时，React 会调度一个点击事件的处理函数。这个处理函数通常绑定在某个具体的 DOM 节点上，对应到 React 的 Fiber 树上，就是一个特定的节点。
假设用户点击了一个按钮 #submit-btn。React 会把这个点击事件的优先级提升到 Lane 0。
现在，React 的调度器正在执行 renderRoot。它正在往下一层层注水 DOM。
if (currentFiber !== targetFiber) return false;
如果当前正在注水的层级（比如页面头部）不是用户点击的那个层级（比如页面底部），React 会怎么做？
答案是：它继续注水。
这听起来很反直觉，对吧？如果用户点击了页面底部，为什么要注水头部？
因为我们不关心。对于用户来说，头部注水了没有，只要不影响底部按钮的响应，就是好的。这就是选择性注水的本质：不阻塞不可见区域的注水，只确保可见交互区域的高优先级响应。
但是，如果用户点击了页面头部，而 React 还在注水页面底部呢？
// 关键逻辑：Lane 检查
function handleInteract(lane) {
if (lane === UserLane) {
// 惊呆了！用户按了 Lane 0！
// 现在的注水任务是什么优先级？
if (currentHydrationLane !== UserLane) {
// 它是 UserLane 之外的任何车道（比如 IdleLane）
// 我们要暂停当前的注水，去处理用户的点击！
return true; // 返回 true 表示需要中断
}
}
return false;
}4. 按需提升：deferHydration
React 18 引入了一个非常优雅的 API：deferHydration。
这东西就像是一个“预加载器”，但它是针对 DOM 的。它告诉 React：“嘿，这个组件的内容暂时不需要立刻注水，它可能被挂起，或者它太重了，我们等会儿再说。”
function HeavyComponent() {
// 告诉 React 19：这个组件是“懒注水”的
// 它会被推迟，直到用户与之交互
const [count, setCount] = useState(0);
const hydrated = useDeferHydration();
if (!hydrated) {
// 这里显示一个骨架屏，或者什么都不显示
return <Skeleton />;
}
return (
<div>
<h1>Heavy Content: {count}</h1>
<button onClick={() => setCount(c => c + 1)}>Click Me</button>
</div>
);
}当这个组件还没被 deferHydration 激活时，React 会把它标记为“待定”。即使这个组件在 DOM 树里，React 也会跳过它，继续往下走。
这是怎么实现的？
在 Fiber 节点的 flags 中，React 会设置一个 ShouldDehydrateNextSibling 的标志。
// React 内部逻辑
function beginWork(fiber) {
// 如果当前节点标记了 ShouldDehydrateNextSibling
if (fiber.flags & ShouldDehydrateNextSibling) {
// React 会直接跳过这个节点及其子节点
// 就像在代码里写了一个巨大的 continue;
return null;
}
// 正常渲染逻辑...
}这就像你在开一个文件，你发现前面有个“隐藏文件夹”，你直接把“隐藏文件夹”的入口给锁上了，根本不去翻它的内容。
5. 重新汇聚与重注水
现在，我们回到用户点击的场景。
用户点击了按钮 -> React 将当前时间切片从 IdleLane（空闲优先级，负责注水）切到了 UserLane（用户交互，负责响应）。
React 停止了注水过程。它处理了点击事件。事件处理完了。
这时候，React 会做什么？
它会回来。
function workLoop() {
while (fiberQueue.length > 0) {
// 检查是否有用户交互在等待
if (hasPendingUserInteractions) {
// 切换到 UserLane
currentLane = UserLane;
} else {
// 继续之前的任务
currentLane = IdleLane;
}
// 处理任务...
}
}它回到了刚才中断的地方。它会检查那个被标记为 ShouldDehydrateNextSibling 的节点。
React 会执行一次重注水。
这次注水不再是慢吞吞的同步过程（除非页面实在太大），React 可能会利用 requestIdleCallback 或者微任务，在浏览器不忙的时候，悄悄地把那个组件注水了。
这就像什么？
这就像你点了一份外卖。以前（旧 React），外卖员一到你就立刻开吃，哪怕你饿得前胸贴后背，他也得等你吃完才能走。现在（新 React），外卖员说：“大哥，菜在锅里，但我不给你端上来。你先看会儿电视，等你饿了，或者你想吃的时候，我再把菜端上来给你。”
而且，如果你在看电视的时候突然喊了一嗓子“我想吃肉了”，外卖员会立刻扔下手里的锅铲，先给你把肉端上来。等你吃完了肉，他再回头去把剩下的汤喝完。
代码实战：模拟 Lane 切换
让我们写一段代码，模拟一下这个 Lane 切换的过程。注意，这段代码是高度简化的，但逻辑是真实的。
// 定义几个 Lane 常量
const LaneIds = {
UserInteraction: 1 << 0, // 0b0001
Idle: 1 << 1, // 0b0010
Background: 1 << 2, // 0b0100
};
class Scheduler {
constructor() {
this.currentLane = LaneIds.Idle; // 初始在空闲车道
}
// 模拟 React 的调度循环
scheduleHydrationTask() {
console.log(`[Scheduler] 开始注水任务，当前车道: ${this.getLaneName(this.currentLane)}`);
// 模拟注水 100 个 DOM 节点
for (let i = 0; i < 100; i++) {
if (i === 50) {
// 模拟：正在注水第 50 个节点时，用户点击了
if (this.shouldInterruptForInteraction()) {
console.log(`[Scheduler] ⚠️ 警告：用户在第 50 个节点点击了！`);
this.handleInteraction();
return; // 中断！
}
}
// 执行注水逻辑
this.hydrateNode(i);
}
console.log("[Scheduler] ✅ 注水任务完成");
}
shouldInterruptForInteraction() {
// 核心算法：检查当前是否是 UserInteraction 车道
// 如果是，且我们正在做非 UserInteraction 的事，就拦截
return this.currentLane === LaneIds.UserInteraction;
}
handleInteraction() {
console.log("[Scheduler] >>> 切换车道到 UserInteraction <<<");
this.currentLane = LaneIds.UserInteraction;
// 处理点击事件...
console.log("[Scheduler] 处理用户点击事件...");
// 事件处理完毕，恢复原状
setTimeout(() => {
console.log("[Scheduler] >>> 事件处理完毕，恢复到 Idle 车道 <<<");
this.currentLane = LaneIds.Idle;
this.scheduleHydrationTask(); // 恢复注水
}, 100);
}
hydrateNode(id) {
// 模拟注水耗时
console.log(` Hydrating node ${id}...`);
}
getLaneName(lane) {
if (lane === LaneIds.UserInteraction) return "UserLane (高优先级)";
if (lane === LaneIds.Idle) return "IdleLane (注水任务)";
return "OtherLane";
}
}
// 运行模拟
const scheduler = new Scheduler();
scheduler.scheduleHydrationTask();输出结果：
[Scheduler] 开始注水任务，当前车道: IdleLane (注水任务)
Hydrating node 0...
Hydrating node 1...
...
Hydrating node 49...
[Scheduler] ⚠️ 警告：用户在第 50 个节点点击了！
[Scheduler] >>> 切换车道到 UserInteraction <<<
[Scheduler] 处理用户点击事件...
[Scheduler] >>> 事件处理完毕，恢复到 Idle 车道 <<<
[Scheduler] 开始注水任务，当前车道: IdleLane (注水任务)
Hydrating node 50...
...看懂了吗？这就是渐进式注水。它在注水的过程中，时刻监控着你的输入。一旦你的手指触碰到了屏幕，它就会毫不犹豫地把你想要的东西（交互响应）放在第一位，至于剩下的没注水的 DOM 节点？那就让它挂着吧，反正浏览器还没死，我们晚点再补上。
Lane 模型的哲学：一切都是数据
你可能会问，为什么要这么复杂？React 不能每次都先渲染一遍再注水吗？
这就是 React 的哲学：一切都是数据。
以前，React 把渲染和注水混在一起，像是在煮一锅乱炖。现在，React 把它们分开了，像是在流水线上。
- Lane 是数据。
- Fiber 节点 里的
pendingLanes是数据。 - 渲染器 根据 Lane 数据决定行为。
这种设计让 React 非常灵活。以前我们只能处理“整棵树”的优先级。现在，我们可以在任何一个角落定义优先级。
function App() {
const [visible, setVisible] = useState(false);
// 暂停：当用户还没看的时候，不要浪费 CPU 去注水
// 这里的重点是：useTransition 会把这个状态更新标记为低优先级
const startTransition = () => {
// 即便这个更新很快，React 也会把它当作 Transition 处理
startTransition(() => {
setVisible(true);
});
};
return (
<div>
{visible ? <HeavyList /> : <div>Loading...</div>}
<button onClick={startTransition}>Show List</button>
</div>
);
}在这个例子中，startTransition 告诉 React：“别急着渲染 HeavyList，先渲染 Loading，那是高优先级。等用户能看到 Loading 了，再把 HeavyList 渲染出来。”
这在注水领域也是通用的。如果你有一个超大的表格，你可以把表格所在的组件标记为 deferHydration。React 会注水表格上方的导航栏（高优先级），而把表格内容晾在一边（低优先级）。用户在导航栏上怎么点都没事，直到他滚动了到底部，或者点击了表格内的一个单元格，这时候，React 才会把那个单元格注水。
总结一下：这种算法到底在图什么？
我们绕了一大圈，从 Lane 到 Fiber，再到代码模拟，到底图什么？
- 感知性能： 对于用户来说，他们感觉不到你有没有注水那一半的 DOM。他们只感觉到：页面加载很快（因为没注水不占时间），点击很跟手（因为点击被优先处理了）。
- 节省资源： 你不需要去注水用户永远看不见的内容。如果用户滚动得很慢，你就不需要注水屏幕底下的东西。这就像你不给还没进来的客人发餐具，省事儿。
- 并发： 这是 React 的终极目标。Lane 模型为 React 开启了“并发渲染”的大门。渲染、注水、动画，这些任务可以在不同的车道上并行，互不干扰。
最后的吐槽
当然，这套算法也不是没有代价。
它让 React 的源码变得像迷宫一样复杂。以前你只需要理解 setState，现在你需要理解位运算、Lane Mask、Pending Lanes、Pinged Lanes……如果你的面试官问：“lane & (1 << 5) 是什么意思？”，你答不上来，那可能就要当场表演一个“代码短路”了。
而且，调试选择性注水也是一个噩梦。有时候页面看起来渲染了，但事件没触发，你查了半天，发现原来是某个组件的 useDeferHydration 没有正确释放。它就像一个幽灵，潜伏在你的代码深处，在你最意想不到的时候，给你来个措手不及。
但是，当你看着那个充满动画、滚动丝般顺滑的 React 应用时，你会觉得这一切都是值得的。
因为这就是现代前端开发的浪漫：在混乱的 DOM 和复杂的用户行为之间，找到一条最优雅的通道，让代码像水一样流淌，而不是像泥一样凝固。
好了，今天的讲座就到这里。大家现在可以去试一试 useDeferHydration，感受一下这种“被照顾”的感觉。下课！