深入 React 源码中的 ‘Flags’ 位掩码：引擎如何通过一个整数记录 Fiber 节点的所有待执行操作？

各位同仁，大家好。

今天，我们将深入探索 React 内部一个至关重要但又常被低估的机制——Fiber 节点上的 Flags 位掩码。在 React 16 引入 Fiber 架构之后，整个协调（Reconciliation）过程变得更加强大、可中断和异步。然而，要实现这些特性，React 引擎需要一种极其高效的方式来追踪每个 Fiber 节点在整个生命周期中需要执行的所有操作，包括 DOM 更新、副作用、生命周期钩子等等。仅仅依靠布尔值或枚举类型来记录这些信息将导致内存膨胀和性能下降。

答案，就隐藏在一个看似简单的整数里：Fiber.flags。这个整数，通过位掩码的巧妙运用，成为了 React 引擎调度和执行所有待处理工作的“秘密武器”。它不仅记录了当前 Fiber 节点自身需要执行的任务，还能在树结构中高效地传递信息，极大地优化了提交（Commit）阶段的性能。

1. 为什么选择位掩码？React 的效率需求

在传统的 UI 更新流程中，当组件状态发生变化时，框架需要识别出哪些部分需要更新。对于一个庞大的组件树来说，这可能涉及到成千上万个节点。React 的协调过程旨在找出最小的差异集，然后只对这些差异进行操作。

设想一下，一个 Fiber 节点可能同时需要：

• 插入到 DOM 中（Placement）
• 更新其属性（Update）
• 执行 useEffect 的清理函数（Passive）
• 执行 useLayoutEffect 的创建函数（Layout）
• 处理其子节点中的错误（DidCapture）

如果为每个潜在的操作都设置一个独立的布尔属性，例如 fiber.shouldPlace = true; fiber.shouldUpdate = true; fiber.hasPassiveEffects = true;，那么每个 Fiber 节点都会携带大量的布尔字段，这不仅增加了内存开销，也使得判断多个条件组合时代码变得冗长。

位掩码提供了一种优雅且高效的解决方案：

1. 紧凑性（Compactness）: 一个 32 位整数可以表示多达 32 种不同的状态或操作。在 JavaScript 中，数字默认是 64 位浮点数，但位运算通常在 32 位整数范围内执行，这对于表示几十种状态绰绰有余。
2. 效率（Efficiency）: 位运算符（AND, OR, NOT, XOR, 左移等）是 CPU 级别的操作，执行速度极快。
3. 组合与分离（Combination & Separation）: 多个状态可以简单地通过位或（|）操作组合到一个整数中，而通过位与（&）操作可以快速检查某个特定状态是否存在。
4. 清晰性（Clarity）: 一旦理解了位掩码的原理，代码的可读性反而会更高，因为它明确地表达了“集合中的某个元素”或“集合的组合”的概念。

2. Fiber 架构概览与 Fiber.flags 的位置

在深入 Flags 之前，我们快速回顾一下 Fiber 架构。Fiber 是 React 16 引入的全新协调引擎。它将每个 React 元素（组件实例、DOM 节点等）都抽象成一个 Fiber 对象。每个 Fiber 对象代表一个工作单元，并且包含着组件的类型、属性、状态、对应的 DOM 节点引用以及指向父、子、兄弟 Fiber 的指针。

一个简化的 Fiber 结构可能包含以下关键属性：

// ReactFiber.js (简化版)
function FiberNode(
  tag, // 组件类型，如 FunctionComponent, ClassComponent, HostComponent (DOM 元素)
  pendingProps, // 待处理的 props
  key, // key 属性
  mode // 渲染模式，如 ConcurrentMode, BlockingMode
) {
  // 结构相关
  this.tag = tag;
  this.key = key;
  this.elementType = null; // 原始类型，如 Function, Class, 'div'
  this.type = null; // 实际类型，在协调过程中可能不同
  this.stateNode = null; // 对应的 DOM 节点或组件实例

  // Fiber 树结构
  this.return = null; // 指向父 Fiber
  this.child = null; // 指向第一个子 Fiber
  this.sibling = null; // 指向下一个兄弟 Fiber
  this.index = 0; // 兄弟节点中的位置

  // 状态相关
  this.pendingProps = pendingProps;
  this.memoizedProps = null; // 上一次渲染的 props
  this.memoizedState = null; // 上一次渲染的 state 或 hooks 链表
  this.updateQueue = null; // 更新队列，如 setState 的回调

  // 调度和优先级
  this.mode = mode;
  this.subtreeFlags = NoFlags; // 子树中是否有待处理的副作用
  this.flags = NoFlags; // 当前 Fiber 自身的副作用

  // 替身 Fiber (用于双缓冲)
  this.alternate = null;

  // ... 更多属性
}

注意其中的 this.flags 和 this.subtreeFlags。flags 用于记录当前 Fiber 节点自身的副作用，而 subtreeFlags 则是一个重要的优化机制，它记录了当前 Fiber 及其所有子孙 Fiber 中是否存在任何副作用。

3. 位掩码基础：定义与操作

3.1 定义 Flags

在 React 源码中，所有的 Flags 都被定义为 2 的幂次方。这样确保了每个 Flag 都只占用一个独立的比特位。

// shared/ReactSideEffectTags.js (部分截取)
export const NoFlags = /*             */ 0b00000000000000000000; // 0
// Effect tags
export const Placement = /*           */ 0b00000000000000000001; // 1
export const Update = /*              */ 0b00000000000000000010; // 2
export const Deletion = /*            */ 0b00000000000000000100; // 4
export const ContentReset = /*        */ 0b00000000000000001000; // 8
export const Callback = /*            */ 0b00000000000000010000; // 16
export const Ref = /*                 */ 0b00000000000000100000; // 32
export const Hydrating = /*           */ 0b00000000000001000000; // 64
export const LifecycleEffectMask = /* */ 0b00000000000001100000; // Ref | Callback (旧生命周期相关)

// Layout & Passive effects
export const LayoutMask = /*          */ 0b00000000000010000000; // 128 (for useLayoutEffect)
export const PassiveMask = /*         */ 0b00000000000100000000; // 256 (for useEffect)

// ... 还有更多，例如 DidCapture, ShouldCapture, Forked, NoLayout, NoPassive, etc.

这里我们使用了二进制字面量（0b...）来更直观地表示每个 Flag 占据的比特位。例如：

• Placement 是 1，二进制 0001，占据第 0 位。
• Update 是 2，二进制 0010，占据第 1 位。
• Deletion 是 4，二进制 0100，占据第 2 位。
• PassiveMask 是 256，二进制 100000000，占据第 8 位。

3.2 位运算基础

理解位运算是掌握 Flags 的关键。

运算符	名称	描述	示例
&	位与	如果两个操作数中对应位都为 1，则结果为 1。	(0b0101 & 0b0011) === 0b0001 (5 & 3 === 1)
|	位或	如果两个操作数中对应位有一个为 1，则结果为 1。	(0b0101 | 0b0011) === 0b0111 (5 | 3 === 7)
~	位非	反转所有位（0 变 1，1 变 0）。	(~0b0001) 在 32 位系统下是 0b11111111111111111111111111111110
^	位异或	如果两个操作数中对应位不同，则结果为 1。	(0b0101 ^ 0b0011) === 0b0110 (5 ^ 3 === 6)
<<	左移	将一个数的位向左移动指定的位数。	(0b0001 << 2) === 0b0100 (1 << 2 === 4)
>>	右移	将一个数的位向右移动指定的位数。	(0b0100 >> 2) === 0b0001 (4 >> 2 === 1)
>>>	无符号右移	将一个数的位向右移动指定的位数，高位补 0。	(-1 >>> 0) 在 32 位系统下是 0b11111111111111111111111111111111 (4294967295)

3.3 实际应用

• 添加一个 Flag: 使用位或 |。

  let fiberFlags = NoFlags; // 初始为 0
  fiberFlags |= Placement; // fiberFlags 现在是 1 (0b0001)
  fiberFlags |= Update;    // fiberFlags 现在是 1 | 2 = 3 (0b0011)

• 检查一个 Flag 是否存在: 使用位与 &。如果结果不为 NoFlags (即 0)，则表示该 Flag 存在。

  const hasPlacement = (fiberFlags & Placement) !== NoFlags; // true
  const hasDeletion = (fiberFlags & Deletion) !== NoFlags;   // false

• 检查多个 Flag 是否存在: 同样使用位与 &，并组合要检查的 Flag。

  const hasPlacementOrUpdate = (fiberFlags & (Placement | Update)) !== NoFlags; // true

• 移除一个 Flag: 使用位与 & 和位非 ~。

  // 假设 fiberFlags = 3 (0b0011)，包含 Placement 和 Update
  fiberFlags &= ~Placement; // fiberFlags 现在是 3 & (~1) = 3 & (0xFFFFFFFE) = 2 (0b0010)
  // 这种操作在 `fiber.flags` 上较少见，更多用于内部状态管理，因为一个 Flag 一旦被标记，通常在 commit 阶段被处理后，该 Fiber 就不再需要该 Flag。

4. 核心 Flags 类别及其含义

React 的 Flags 种类繁多，但我们可以将其归纳为几个主要类别，以更好地理解它们在协调过程中的作用。

4.1 副作用类型 (Side Effects)

这些 Flags 直接指示了需要对宿主环境（如 DOM）进行的操作。

• Placement (1): 表示 Fiber 节点需要被插入到 DOM 中。这通常发生在新的组件挂载、条件渲染分支改变或列表项顺序变化时。
• Update (2): 表示 Fiber 节点需要更新其在 DOM 中的属性、文本内容等。当组件的 props 或 state 发生变化，导致其对应的 DOM 属性需要更新时，此 Flag 会被设置。
• Deletion (4): 表示 Fiber 节点需要从 DOM 中删除。这发生在组件卸载、条件渲染分支移除或列表项被删除时。
• ContentReset (8): 专门用于 <textarea> 等元素，表示需要重置其内容。
• Ref (32): 表示需要处理组件的 ref。这包括在组件挂载时附加 ref，以及在组件卸载或 ref 改变时分离 ref。
• Hydrating (64): 在服务器端渲染（SSR）场景下，表示此 Fiber 节点正在进行“注水”过程，即客户端 React 接管已有的 SSR HTML 结构。

4.2 生命周期与 Hook 效果 (Lifecycle & Hook Effects)

这些 Flags 与组件的生命周期方法或 Hooks 的副作用相关。

• Layout (128): 对应 useLayoutEffect。表示需要在 DOM 变更后、浏览器绘制前同步执行的副作用。通常用于测量 DOM 布局等操作。
  • LayoutMask 实际上是一个更复杂的位掩码，它组合了 Callback 和 Ref，因为旧的类组件生命周期（如 componentDidMount / componentDidUpdate）和 Ref 回调在执行时机上与 useLayoutEffect 类似，都发生在浏览器绘制前。
• Passive (256): 对应 useEffect。表示需要在 DOM 变更和浏览器绘制完成后异步执行的副作用。通常用于数据获取、订阅等不影响布局的操作。
  • PassiveMask 同样是一个组合掩码，包含了 Passive 和 Update 等，因为 useEffect 的清理和创建本身也是一种更新操作。

4.3 错误处理与调度 (Error Handling & Scheduling)

• DidCapture (512): 表示该 Fiber 节点是一个错误边界（Error Boundary），并且已经捕获到了一个子组件抛出的错误。在提交阶段，React 会根据此 Flag 来执行错误边界的 componentDidCatch 或 static getDerivedStateFromError。
• ShouldCapture: 用于标记一个错误边界，指示它应该尝试捕获子树中的错误。
• Incomplete: 用于并发模式下，表示该 Fiber 的工作尚未完成，可能需要重新调度。

4.4 子树副作用 (Subtree Effects)

• subtreeFlags: 这是一个特殊的 Flag，它不直接表示当前 Fiber 的副作用，而是表示当前 Fiber 及其所有子孙节点中是否存在任何副作用。这是一个巨大的性能优化点。如果一个 Fiber 的 subtreeFlags 为 NoFlags (0)，那么在提交阶段，React 可以安全地跳过整个子树的遍历，因为其中没有任何需要处理的变更。

4.5 其他内部 Flags

还有一些其他的 Flags，用于更内部的调度和协调逻辑，例如：

• HostEffect (用于标记 HostComponent 的副作用)
• PerformedWork (用于标记 Fiber 实际执行了工作)
• PlacementAndUpdate (Placement | Update 的组合)
• 等等。

5. Flags 的赋值与传播机制

Flags 的赋值和传播主要发生在协调过程的两个阶段：渲染阶段（Render Phase） 和 提交阶段（Commit Phase）。

5.1 渲染阶段 (Render Phase)

渲染阶段是 React 计算差异并构建新的 Fiber 树的阶段。它分为两个主要步骤：beginWork (向下遍历) 和 completeWork (向上归结)。

beginWork (向下遍历)

在 beginWork 函数中，React 会处理当前 Fiber 节点的工作，并根据其类型（如 FunctionComponent, ClassComponent, HostComponent）和 props/state 的变化来决定是否需要设置 flags。

• 新增节点: 如果一个 Fiber 是新创建的（没有 alternate），或者其 alternate 为 null，并且它需要被插入到 DOM 中，则 Placement Flag 会被设置。

  // 假设在 reconcileChildFibers 中
  if (newFiber.alternate === null) {
    newFiber.flags |= Placement;
  }

• 更新节点: 如果一个 Fiber 的 props 或 state 发生了变化，并且它是一个 HostComponent (如 <div> )，那么 Update Flag 可能会被设置。

  // 在 updateHostComponent 中
  if (newProps !== oldProps) {
    newFiber.flags |= Update;
  }

• Hooks: 对于 FunctionComponent，useLayoutEffect 和 useEffect 会在它们被调度时，在对应的 Fiber 节点上设置 Layout 或 Passive Flag。

  // 在 mountEffect 或 updateEffect 中
  // 对于 Layout effect
  fiber.flags |= Layout;
  // 对于 Passive effect
  fiber.flags |= Passive;

• Ref: 如果 ref 属性发生变化，Ref Flag 会被设置。

  // 在 updateHostComponent 或 updateHostText 中
  if (oldProps.ref !== newProps.ref) {
    fiber.flags |= Ref;
  }

completeWork (向上归结)

completeWork 是 Flags 传播的核心。当一个 Fiber 节点的所有子节点都处理完毕后，completeWork 会向上归结，将子节点的 flags 和 subtreeFlags 累加到父节点的 subtreeFlags 中。

// ReactFiberCompleteWork.js (简化逻辑)
function completeWork(current, workInProgress, renderLanes) {
  // ... 其他工作 ...

  if (current !== null && workInProgress.stateNode !== null) {
    // 收集当前 Fiber 的 flags
    // ... updateHostComponent, updateHostText 等会设置 workInProgress.flags
  }

  // 关键部分：将子 Fiber 的 flags 和 subtreeFlags 向上累加到父 Fiber 的 subtreeFlags
  const child = workInProgress.child;
  if (child !== null) {
    let subtreeFlags = NoFlags;
    let primarySubtreeFlags = NoFlags; // 用于区分某些特殊 flags

    let currentChild = child;
    while (currentChild !== null) {
      primarySubtreeFlags |= currentChild.flags; // 累加子节点的自身 flags
      subtreeFlags |= currentChild.subtreeFlags; // 累加子节点的子树 flags
      currentChild = currentChild.sibling;
    }

    workInProgress.subtreeFlags |= subtreeFlags;
    workInProgress.subtreeFlags |= primarySubtreeFlags;
  }

  // ... 更多逻辑
  return null;
}

这个过程确保了：

1. 如果一个子节点有 Placement、Update 或任何其他 flags，那么它的父节点（以及所有祖先节点）的 subtreeFlags 最终都会包含这些信息。
2. 在提交阶段，React 只需要检查一个父节点的 subtreeFlags 就可以知道其子树中是否有工作需要处理，从而避免了不必要的深度遍历。

5.2 提交阶段 (Commit Phase)

提交阶段是 React 实际修改 DOM 并执行副作用的阶段。在这个阶段，React 会根据 Fiber 节点上的 flags 和 subtreeFlags 来决定执行哪些操作。提交阶段被划分为三个子阶段，以确保副作用的执行顺序符合预期。

5.2.1 commitBeforeMutationEffects (Layout Effects – 变动前)

这个阶段在 DOM 实际发生变动之前执行，主要用于 useLayoutEffect 的清理函数。它会遍历 Fiber 树，查找带有 Layout Flag 的 Fiber 节点。

function commitBeforeMutationEffects(root, finishedWork) {
  // ...
  // 从根 Fiber 开始遍历
  forEachFiberInTree(finishedWork, (fiber) => {
    const flags = fiber.flags;
    if ((flags & Layout) !== NoFlags) {
      // 执行 useLayoutEffect 的 cleanup
      // ...
    }
  });
}

此时，Layout Flag 也会被用于执行类组件的 getSnapshotBeforeUpdate 生命周期方法。

5.2.2 commitMutationEffects (DOM 变动)

这是核心的 DOM 操作阶段。React 会再次遍历 Fiber 树，查找所有与 DOM 变动相关的 Flags，并执行相应的 DOM 操作。

function commitMutationEffects(root, finishedWork) {
  // ...
  forEachFiberInTree(finishedWork, (fiber) => {
    const flags = fiber.flags;

    if ((flags & Placement) !== NoFlags) {
      // 执行 DOM 插入操作
      // ...
    }
    if ((flags & Update) !== NoFlags) {
      // 执行 DOM 属性更新操作
      // ...
    }
    if ((flags & Deletion) !== NoFlags) {
      // 执行 DOM 删除操作
      // ...
    }
    if ((flags & Ref) !== NoFlags) {
      // 分离旧的 Ref，附加新的 Ref
      // ...
    }
    // ... 其他 DOM 相关 flags
  });
}

在这个阶段，subtreeFlags 的作用尤为关键。如果一个父 Fiber 的 subtreeFlags 不包含任何 DOM 变动相关的 Flag，React 可以完全跳过对该子树的遍历，从而节省大量时间。

5.2.3 commitLayoutEffects (Layout Effects – 变动后)

这个阶段在所有 DOM 变动完成后、浏览器绘制前同步执行，主要用于 useLayoutEffect 的创建函数。

function commitLayoutEffects(root, finishedWork) {
  // ...
  forEachFiberInTree(finishedWork, (fiber) => {
    const flags = fiber.flags;
    if ((flags & Layout) !== NoFlags) {
      // 执行 useLayoutEffect 的 create
      // 执行类组件的 componentDidMount/Update
      // ...
    }
  });
}

5.2.4 commitPassiveMountEffects (Passive Effects)

这个阶段是异步执行的，它会在浏览器绘制完成后才开始。它主要用于 useEffect 的清理和创建函数。

function commitPassiveMountEffects(root, finishedWork) {
  // ...
  forEachFiberInTree(finishedWork, (fiber) => {
    const flags = fiber.flags;
    if ((flags & Passive) !== NoFlags) {
      // 执行 useEffect 的 cleanup 和 create
      // ...
    }
  });
}

通过这种精细的阶段划分和 Flags 的指导，React 能够确保副作用的执行顺序是可预测且正确的，避免了诸如在测量 DOM 布局之前修改 DOM 结构等问题。

6. subtreeFlags 的优化之道

我们多次提到 subtreeFlags，现在来深入理解其重要性。

想象一个非常深的组件树：A -> B -> C -> D -> E。如果只有 E 节点发生了 Update，而 A、B、C、D 都没有自身的 flags。
在渲染阶段的 completeWork 过程中：

• E 节点设置 E.flags |= Update。
• D 节点处理完 E 后，将 E.flags 累加到 D.subtreeFlags。所以 D.subtreeFlags |= Update。
• C 节点处理完 D 后，将 D.subtreeFlags 累加到 C.subtreeFlags。所以 C.subtreeFlags |= Update。
• 依此类推，直到根节点 A，其 subtreeFlags 也会包含 Update。

在提交阶段，当 React 遍历 Fiber 树时：

• 它从 A 开始。检查 A.subtreeFlags，发现有 Update，所以它知道 A 的子树中有需要更新的地方，于是继续检查 B。
• 检查 B.subtreeFlags，发现有 Update，继续检查 C。
• 检查 C.subtreeFlags，发现有 Update，继续检查 D。
• 检查 D.subtreeFlags，发现有 Update，继续检查 E。
• 在 E 节点，检查 E.flags，发现有 Update，执行实际的 DOM 更新。

现在，设想一下，如果 A 的子节点 X 的 subtreeFlags 是 NoFlags (0)。

• 当 React 遍历到 A 节点时，检查 A.subtreeFlags，发现有 Update，继续检查 B。
• 当遍历到 X 节点时，检查 X.subtreeFlags，发现是 NoFlags。此时，React 可以立即跳过整个 X 节点为根的子树，因为它确定该子树中没有任何需要执行的副作用。

这个机制在大型应用中至关重要。它避免了在提交阶段进行不必要的深度遍历，极大地提高了性能，尤其是在只有局部区域发生变化的场景下。

7. 并发模式下的 Flags 演进

在 React 的并发模式（Concurrent Mode）中，Flags 的作用变得更加复杂和关键。并发模式允许 React 在后台渲染更新，可以中断、暂停和恢复工作，甚至丢弃未完成的工作。

• 可中断性: 当一个渲染任务被中断时，已经设置的 flags 会被保留在 workInProgress Fiber 树上。当任务恢复时，React 可以从中断的地方继续，并根据已有的 flags 状态继续工作。
• 优先级: 某些 flags 可能与优先级相关联，影响工作被处理的时机。
• 多重渲染: 在并发模式下，一个 Fiber 可能会经历多次渲染尝试。flags 帮助 React 追踪每次尝试的副作用，并最终只提交那些成功的、最新的副作用。
• Incomplete Flag: 当一个 Fiber 的工作因为时间切片或其他原因未能完成时，可能会设置 Incomplete Flag，表示该 Fiber 需要重新处理。

例如，Passive 副作用在并发模式下会被调度到一个独立的队列中，并在浏览器空闲时异步执行，这正是 Passive Flag 所指示的行为。

8. 总结：一个整数的力量

Fiber.flags 位掩码是 React Fiber 架构中一个精巧而强大的设计。它通过一个简单的整数，以极高的效率和内存利用率，记录了每个 Fiber 节点所需执行的所有操作。从 DOM 插入、更新、删除，到 useEffect 和 useLayoutEffect 的生命周期管理，再到错误边界的捕获，所有这些信息都被编码在一个比特序列中。

结合 subtreeFlags 的优化，React 引擎能够在渲染阶段高效地收集和传播副作用信息，并在提交阶段智能地跳过无关子树，只对真正发生变化的节点进行操作。这不仅是 React 高性能的关键，也是其实现可中断渲染、时间切片和并发模式的基础。通过对 Flags 机制的深入理解，我们能更好地掌握 React 内部的工作原理，写出更高效、更符合 React 哲学的前端应用。