各位好！我是你们的老朋友，一个喜欢在源码里挖地三尺的资深前端工程师。
今天咱们不聊 CSS，不聊框架 API，也不聊那些花里胡哨的 Hooks 趣味使用。咱们要来点硬核的，甚至可以说是“底层”的东西。咱们要聊聊 React 核心调度机制里最精妙、最充满黑客气息的一个部分——位掩码。
你可能在 React 源码里见过这样的代码：
const Placement = 0x0001;
const Update = 0x0002;
const Deletion = 0x0004;
fiber.flags |= Placement | Update;
if (fiber.flags & Placement) {
// 执行插入操作
}看着这些 0x0001, 0x0002, 0x0004，是不是感觉像是在看某种古老的加密代码？别怕，今天我就带你揭开这层面纱。你会发现，React 团队为了那毫秒级的性能提升，玩起了二进制的极致艺术。
这不仅是代码，这是数学，是逻辑，是计算机科学中最原始也最强大的力量。
一、 为什么 React 喜欢跟“1”和“0”过不去？
在开始讲位运算之前，咱们得先解决一个思想上的问题：既然 if (state === 'update') 这种写法清晰明了，为什么 React 非要用 if (flags & 0x0002) 这种写法？
这就好比咱们平时点外卖。传统写法是“写个备注说我要加辣”；而位运算写法是“我要加辣（加1分），我要加葱（加2分），我要多要饭（加4分）”。当你点完菜，服务员看了一眼你的总分（一个数字），就能瞬间知道你要干什么。
在 React 的世界里，每一帧的时间都是宝贵的。CPU 不喜欢处理复杂的对象比较，不喜欢遍历长数组，它最喜欢的是什么？它最喜欢的是加法（|）和比较（&）。
想象一下，一个 Fiber 节点需要同时做三件事：
- 重新渲染（Update）。
- 插入 DOM 节点（Placement）。
- 子节点被删除了（ChildDeletion）。
如果是“传统派”的写法，你可能需要一个对象或者一个巨大的 switch 语句：
// 这种写法，CPU 懒得动
if (flags.update) render();
if (flags.placement) insertNode();
if (flags.deletion) removeNode();或者用一个数组：
const workQueue = [];
if (needRender) workQueue.push(render);
if (needInsert) workQueue.push(insert);
// ... 然后遍历 workQueue 执行React 怎么做？它直接给你加起来：
// 这种写法，CPU 喜欢得不行
flags = Update | Placement | Deletion;
// 现在只需要判断 flags & Update 就行，快得像闪电这就是位掩码的精髓：用空间换时间，用简单的算术换复杂的逻辑判断。
二、 二进制入门：从便利店到摩斯密码
要理解 React 的源码，你得学会像计算机一样思考。在 React 的世界里，没有“红”、“绿”、“蓝”，只有 0 和 1。
让我们来做一个简单的思维实验：
假设你是一个仓库管理员，你的仓库里只有三盏灯泡。
- 灯泡 A：代表“这个货架需要盘点”。
- 灯泡 B：代表“这个货架有易碎品”。
- 灯泡 C：代表“这个货架需要换新标签”。
为了表示这三盏灯的状态，你需要三个开关。
000 代表全关，111 代表全开。
在 React 的 Fiber 节点中，flags 属性就扮演了这个开关的角色。
// React 源码中的 Flags 定义（简化版）
export const Placement = 0b0001; // 二进制 1，十进制 1
export const Update = 0b0010; // 二进制 2，十进制 2
export const Deletion = 0b0100; // 二进制 4，十进制 4
export const ContentReset = 0b1000; // 二进制 8，十进制 8看懂了吗？0b 开头代表二进制。这些数字其实就像是摩斯密码，每一个位都代表一个独立的动作。
当你对一个 Fiber 节点做了一次状态更新时，React 会做这样一件事情：
// 假设这是 React 的 FiberReconciler
function reconcileChildFibers(..., fiber) {
// ... 复杂的 diff 算法发现需要插入节点
// 重点来了！这是位运算的魔法
// 位或运算符：|
// 0000
// |
// 0001 (Placement)
// ---------
// 0001
workInProgressFiber.flags |= Placement;
}如果你对这个节点又做了一次更新呢？React 会继续叠加：
// 上次是 Placement
// 这次是 Update
// 0001
// |
// 0010
// -----
// 0011 (十进制的 3)
workInProgressFiber.flags |= Update;现在，flags 的值是 3。如果你去读代码 if (workInProgressFiber.flags & Placement)，结果是 true，因为它在二进制里是 1。如果你判断 if (workInProgressFiber.flags & Update)，结果也是 true。
这就是多状态聚合。一个整数，同时携带了三种信息。而且这还没完，React 甚至把这些位定义到了 32 位整数的顶端：
// 看到了吗？0x0001 就是 1，0x0002 就是 2
const Placement = 0x0001;
const Update = 0x0002;
const HydrationMismatch = 0x0004;
const ActivationDepth = 0x0008;
// ... 甚至一直排到 0x0800这种设计让 React 在 Diff 算法遍历树的时候，可以在极短的时间内完成条件判断。这就像是在高速公路上开车，你不需要每看到一辆车就停下来问它是跑车还是卡车，你只需要看它有没有开进你的车道（位掩码），然后决定是加速超车还是保持车距。
三、 Lanes（车道系统）：React 18 的并发基础
如果只是 Flags，那还是静态的“状态机”。但 React 18 引入了并发模式，这就涉及到一个更复杂的系统：Lanes（车道）。
如果说 Flags 是“干啥活”，那 Lanes 就是“排多高的队”。在高优先级任务还没做完的时候，低优先级任务能插队吗？React 说：不能，除非低优先级任务长得像个大领导（Lane 级别更高）。
Lanes 也是基于位运算的，而且逻辑比 Flags 更烧脑，更宏大。
1. Lane 的定义：1, 2, 4, 8…
在 React 18 中，每一个优先级都被映射为一个二进制位。
// React 内部定义的车道
export const SyncLane = 1; // 1 << 0，最高优先级，同步车道
export const SyncLanePriority = 5; // 调度优先级
export const InputContinuousLane = 2; // 1 << 1，比如输入框连续打字
export const DefaultLane = 4; // 1 << 2，默认车道
export const TransitionLane1 = 8; // 1 << 3，转场动画
export const TransitionLane2 = 16; // 1 << 4
// ... 以此类推看，这跟 Flags 简直是一个模子刻出来的。
2. Lane 的合并与筛选：按位与 (&) 的艺术
当页面上同时发生了一件大事（比如用户点击了“提交表单”，Priority 5）和一件小事（比如后台数据加载完成，Priority 1），React 怎么处理？
React 会把它们合并成一个 Lane：
// 现在的工作队列是这两件事的交集
const baseQueueLanes = SyncLane | DefaultLane; // 假设结果是 1 | 4 = 5
// React 调度器看到的是 5。
// 它会问自己：谁优先级高？
// 1 (SyncLane) vs 4 (DefaultLane)
// 5 的二进制是 101。
// React 的调度算法会通过“按位与”或者查找最低有效位（LSB）来决定：
// 它会计算 getLowestPriorityLane(5)。
// 逻辑大概是：5 & 1 = 1, 5 & 2 = 0, 5 & 4 = 4。
// 它会发现 1 (SyncLane) 在 4 (DefaultLane) 下面。
// 所以：React 决定先执行 SyncLane 的任务。这里有一个非常经典的源码逻辑，我们在 ReactFiberScheduler.js 里经常能看到：
function getHighestPriorityLane(lanes) {
// 返回 lanes 中最低位的那个 1 的值
return lanes - (lanes & -lanes);
}这句代码极其精妙！
假设 lanes = 5 (二进制 101)。
lanes & -lanes：这是取最低有效位的技术。101 & 101=101(即 5)。lanes - (lanes & -lanes)：101 - 101=0？不对，逻辑要反一下。
其实正确的逻辑是先算 lanes & -lanes 取到最低位的 1（比如 Lane 1）。
lanes - 1 会把那个最低位的 1 变成 0。
等等，lanes & -lanes 其实是 lanes % 2^n 的位运算版本。
让我们看一个更简单的例子：
Lane 是 0101 (5)。
lanes & -lanes=0001(1)。这就是最低优先级的 Lane。- 我们要找的是最高优先级，也就是最左边的 1。
- 算法通常是
laneToIndex(lanes)。
但这不重要，重要的是这种写法没有任何循环，没有任何对象查找，纯 CPU 指令级的操作。这就是为什么 React 在处理成百上千个并发更新时，依然能保持丝滑流畅。
3. Lanes 的“标签”作用
每个 Fiber 节点不仅有个 flags（干啥），还有个 lanes（排哪队）。
// 这是一个 FiberNode 类的结构示意
class FiberNode {
// ...
lanes: Lanes; // 当前节点涉及的车道
subtreeLanes: Lanes; // 子树涉及的车道
// 标记车道更新
updateLanes(lanes: Lanes, updateLane: Lane) {
// 核心逻辑：更新节点本身的 lanes
// 使用按位或操作，累加更新任务
this.lanes |= updateLane;
// 使用按位或操作，累加子树的 lanes
this.subtreeLanes |= updateLane;
}
}想象一下，你的 React 树是一棵巨大的树。
用户点击了一个按钮 -> Lane 1 (Sync) 被设置在根节点。
浏览器在渲染过程中，子组件重新渲染了 -> Lane 1 被向下传递。
更远处的兄弟组件更新了 -> Lane 1 继续向下传递。
最终，React 会在整棵树里找到一个 subtreeLanes 不为 0 的节点，然后问调度器：“嘿，大哥，这片叶子上有活儿干吗？”
调度器一看二进制位，发现是 Lane 1，立马说：“有！马上安排！”
四、 状态机的流转：从 Flags 到提交
好了，现在我们知道 Flags 和 Lanes 都是“数字谜题”。但它们是如何转化为真实 DOM 操作的呢？这中间就是状态机的逻辑。
在 React 的源码中，有一个核心函数叫 commitRoot。这是“渲染阶段”结束，进入“提交阶段”的入口。
在 commitRoot 被调用之前，Reconciler（调和器）已经跑完了，它把该标记 flags 的节点都标记好了。
function commitRoot(root) {
const finishedWork = root.finishedWork;
// 1. 清理工作
// 如果有残留的 lanes，需要重置。这里又用到了按位与。
// 比如 finishedLanes 是 5，SyncLane 是 1。
// root.pendingLanes &= ~SyncLane;
// ~SyncLane 是 11111110。
// 5 & 14 = 4。意思就是，移除了最高优先级的任务，剩下的还是 DefaultLane。
// 2. 开始提交
commitBeforeMutationEffects(finishedWork);
commitMutationEffects(finishedWork);
commitLayoutEffects(finishedWork);
root.finishedWork = null;
root.finishedLanes = 0;
}这里面的 commitMutationEffects 和 commitLayoutEffects 是执行 Flags 逻辑的地方。
React 会遍历 Fiber 树。它怎么知道该插节点、删节点还是更新节点？它完全依赖于那个 flags 整数。
// 这里的代码高度浓缩，展示了逻辑流
function commitMutationEffects(workInProgress) {
while (workInProgress !== null) {
const flags = workInProgress.flags;
// 位运算判断：如果标记了 Placement（插入）和 Update（更新）
// 并且没有 Hydration（如果是 SSR 路径）
if ((flags & (Placement | Update)) !== NoFlags) {
commitPlacement(workInProgress); // 执行插入逻辑
commitUpdate(workInProgress); // 执行更新逻辑
}
// 如果标记了 Deletion（删除）
if (flags & ChildDeletion) {
commitDeletionEffects(workInProgress);
}
// 递归处理子节点
commitMutationEffects(workInProgress.child);
workInProgress = workInProgress.sibling;
}
}注意这里的 (flags & (Placement | Update)) !== NoFlags。
Placement | Update 等于 0x0003。
如果 flags 是 0x0001，那么 0x0001 & 0x0003 结果是 0x0001（非零）。
如果 flags 是 0x0002，结果也是 0x0002（非零）。
如果 flags 是 0x0000，结果就是 0x0000（零）。
这一行代码就干掉了所有的 if-else 嵌套！这是代码架构上的胜利，也是性能的胜利。
五、 幽默解读：位运算的“副作用”
虽然位运算很酷，但在 React 源码里，这种写法也带来了不少“副作用”——主要是可读性的副作用。
你去看 React 源码，经常会看到这样令人头秃的代码：
// 某个位置：0x0001
// 某个位置：0x0002
// 某个位置：0x0004
// ...
const flags = 0x0800 | 0x1000 | 0x2000;
// 然后去判断：
if (flags & 0x0800) {
console.log('这里是 TransitionLane1');
}这时候，作为一个资深工程师，你必须开启“考古模式”。你必须去文件顶部找到那些定义：
const ForcedLayoutEffectSemantics = 0x0001;
const ComponentPassiveDevToolsHook = 0x0002;
// ...这就像是你去玩一个老式的俄罗斯方块游戏，方块虽然拼在一起很美，但如果你不背下来那 64 个方块的坐标表，你根本玩不转。
但是，为什么 React 团队要这么做？因为 JavaScript 是动态语言，它的垃圾回收（GC）和对象创建开销很大。如果一个对象包含几十个布尔值，每次创建这个对象，GC 都要费劲去标记它们。而一个 32 位的整数，内存占用极小，处理起来是零拷贝的。
这简直就是一种“空间换时间”的极限操作。React 作为一个运行在浏览器里的框架，深知每一纳秒都至关重要。
六、 源码实战：一个完整的位运算生命周期
为了让你彻底信服，咱们来模拟一个完整的 React 组件生命周期中的位运算演变。
假设我们有一个组件 UserCard，它初始状态为空，然后用户输入了名字。
1. 初始渲染（Mount）：
- Reconciler 发现节点不存在。
flags = Placement | Update。lanes = DefaultLane。- 在二进制中：
0000 | 0001 = 0001,0000 | 0100 = 0100。
2. 用户打字（Update）：
- 用户输入 “A”。
- Reconciler 发现节点存在，但内容变了。
flags = Update。lanes = SyncLane（因为输入是高优先级）。- 二进制：
0001 | 0010 = 0011。
3. 浏览器尝试渲染，但遇到了高优先级任务：
- React 调度器检测到当前有
SyncLane在队列里。 - 它会暂停当前正在做的低优先级任务（如果有的话）。
- 它会计算
highestPriorityLane。假设此时SyncLane(1) 和InputLane(2) 都在队列。 1 | 2 = 3。- React 执行
3 & -3等操作，决定先执行 Lane 1。
4. 提交阶段：
- 代码走到
commitMutationEffects。 - 检查
flags。发现0011。 0011 & Placement (0001)-> 真。执行插入。0011 & Update (0010)-> 真。执行更新。0011 & Deletion (0100)-> 假。跳过。
整个过程，没有任何复杂的对象创建，只有简单的整数加减和逻辑与或。这就是 React 能处理海量数据流而不崩盘的秘密武器。
七、 总结与感悟
聊到这里，相信你对 React 源码中的位掩码状态机有了深刻的理解。
Flags 是“状态机”，它告诉我们一个节点处于什么状态（是新来的？还是旧了？还是被踢了？）。它利用二进制的每一位来编码不同的状态，通过 | 运算叠加状态，通过 & 运算查询状态。
Lanes 是“优先级调度器”，它是 React 并发模式的大脑。它利用二进制位来划分时间片和任务等级。通过位运算，React 可以在 O(1) 的时间复杂度内判断哪个任务最重要，哪个可以推迟。
React 源码中的这些位运算，看似是代码的“黑客”技巧，实则是计算机科学中最经典的工程权衡。它牺牲了一点点可读性（看懂 0x0001 需要查表），换取了巨大的运行性能和内存优势。
所以，下次当你看到 React 源码里那些奇怪的 0x0001、0x0002 或者 lane = lane | 1 时，不要觉得这是写代码的人在乱按键盘。你要意识到，这背后是 React 团队经过深思熟虑后，为了让你能更丝滑地滑动页面，而在这层之下铺设的精密齿轮。
这不仅仅是代码，这是逻辑之美，是数字的韵律。掌握了这些，你就不仅仅是会写 useState 的前端，你真正看懂了 React 的骨架。