🎯 面试官：React 并发更新怎么调度的？我：Lane 就是调度界的 bitmap！

👨‍🏫 本系列由前端面试真题博主 Kincy 发起，每日更新一题，通勤路上轻松掌握高频知识点。

📢 如果你想第一时间获取更新，或与群友交流面试经验、内推信息，欢迎加入微信群（文末）！

🧱 开场：面试官阴笑三分问道...

"React Concurrent 模式你说懂，那 React 是怎么管理更新优先级的？Fiber 架构你背会了，那你知道 Lane 模型 是干嘛的吗？"

我抿了一口温水，淡定一笑：

"React 不再用传统的优先队列，它用的是更适合并发更新的 Lane bitmap 优先级模型 。一句话，既能合并，又能打散，还能精准调度！ "

🧠 什么是 Lane 模型？（面霸速记区）

Lane 是 React 中用来标识不同优先级更新的一种「位图」结构，你可以把它理解成：

🎳 一条由 31 个车道（Lane）组成的高速公路，每辆车（任务）都会被分配到一个车道。

React 会根据更新类型，将更新映射到不同 Lane 上，然后再用"位运算"高效判断哪些更新要先跑。

🪄 Lane 的原理一言以蔽之：

✅ Lane 是一组 二进制位标志位

export opaque type Lane = number; // 实际上是 31 位整数位掩码

每个 Lane 是一个二进制位，比如：

名称	二进制位	说明
SyncLane	0b0000000000000000000000000000001	同步更新，最高优先级
InputContinuousLane	0b0000000000000000000000000000100	输入连续事件
DefaultLane	0b0000000000000000100000000000000	普通 setState 更新
IdleLane	0b1000000000000000000000000000000	空闲时再更新

🧑‍🏫 面试官紧跟一问：

为什么不用传统的优先队列？用位运算图啥？

我笑而不语，掏出一句骚话：

"因为优先队列不能一口气处理多个优先级更新，但 bitmap 可以同时追踪多个更新合并、并发处理！"

🔎 Lane 解决了什么问题？

1. ✅ 支持并发更新

多个 setState（来自不同来源）可以同时存在，彼此不会互相干扰。

setState1(); // 属于 DefaultLane
startTransition(() => setState2()); // 属于 TransitionLane

两个更新分别进了不同的"车道"，React 可以同时追踪。

2. ✅ 灵活合并 + 精准分发

Lane 支持多位合并：

const lanes = DefaultLane | TransitionLane; // 合并两个优先级

也可以筛选最高优先级：

getHighestPriorityLane(lanes); // 位运算找出最靠前的车

3. ✅ 支持过期控制（Expiration）

每个 Lane 都有一个过期时间，React 会定时检查：

markStarvedLanesAsExpired(root, currentTime); 

如果某个 Lane 太久没跑，就会被"强制拉出来干活"。

🛠️ 源码深入一层：Lane 是怎么被用的？

任务调度的入口文件：ReactFiberWorkLoop.new.js

👇 每次 setState，会被赋予一个 Lane

const lane = requestUpdateLane(fiber); // 根据上下文分配 Lane

比如：

• 同步更新 → SyncLane
• 输入响应 → InputContinuousLane
• Transition 更新 → TransitionLane

🧠 更新入队后，React 记录这个更新属于哪些 Lane：

markRootUpdated(root, lane);

内部是将 root.pendingLanes |= lane，也就是更新 bitmap。

🧪 渲染阶段会选择最优先的 Lane：

const nextLanes = getNextLanes(root, workInProgressRootRenderLanes);

这里面用了一系列位运算判断：

• 哪些 Lane 是过期的？
• 哪些 Lane 是交互优先的？
• 哪些 Lane 可以和当前一起执行？

⚔️ 面试官继续加码：

那你说说 Transition 是怎么用 Lane 实现"可中断更新"的？

我深吸一口气：

"startTransition 内部使用的是 TransitionLane，优先级比 DefaultLane 低。渲染时如果遇到输入类更新（高优先级），就会打断当前 Transition 渲染。"

这就是 Concurrent 模式下的"让步式更新"。

🎭 模拟一波真实场景对话

👨‍💼 面试官：我页面上有输入框，输入时会触发 setState，为什么不卡顿？

我：因为这个更新走的是 InputContinuousLane，优先级高于页面动画或 Transition。

👨‍💼 面试官：那多次更新怎么排序？

我：React 会用 getHighestPriorityLane 取出最前的 Lane，更新完会 mark 掉当前位。

📚 Lane 源码核心工具方法列表（React v18）

方法名	作用
requestUpdateLane()	分配 Lane
getNextLanes()	获取下一个要执行的 Lane
mergeLanes(a, b)	合并两个 Lane
getHighestPriorityLane()	提取最高优先级 Lane
markStarvedLanesAsExpired()	判断是否过期强制执行

🧠 总结一句话

Lane 模型是 React 为了解决并发更新而设计的 bitmap 优先级模型，让不同类型更新互不打扰、合理调度、可中断恢复。

🎁 面霸语录（背下来直接能装 X）

"Lane 就是 React 并发架构的调度血管，位运算让更新流转更高效。"
"Transition 的本质是一个低优先级的 Lane，能被高优更新打断。"
"优先队列顶多支持排序，Lane 模型能同时追踪、合并、过期、选择，一图胜千言。"

📅 明日预告

React 相关面试题至此已经更新完毕，接下来，我会主要分享代码设计或者 AI 大模型相关面试题，有其他感兴趣的内容也可以在评论区留言。
📚 本系列每天一题，持续更新中！

👉 添加我的微信：JKfog233，邀你加入【Hello World 进阶群】，一起成长、交流、内推、分享机会！