0.前言

在 React 中使用二进制掩码标识 EffeactTag

1.ReactFiberFlags

这些标记在 React 的协调器中扮演着重要的角色，用于识别并处理不同的组件更新操作，以实现高效的渲染和更新过程。

export type Flags = number;

// 以下两个 Tag 由 React Dev Tools 调用
export const NoFlags = /*                      */ 0b000000000000000000;
export const PerformedWork = /*                */ 0b000000000000000001;

// Effect Tags
// 插入 DOM 元素
export const Placement = /*                    */ 0b000000000000000010;
// 更新 DOM 元素
export const Update = /*                       */ 0b000000000000000100;
// 将 Placement 与 Update 进行按位或操作
export const PlacementAndUpdate = /*           */ 0b000000000000000110;
// 删除 DOM 元素
export const Deletion = /*                     */ 0b000000000000001000;
// 重置 DOM 内容
export const ContentReset = /*                 */ 0b000000000000010000;
// 回调函数
export const Callback = /*                     */ 0b000000000000100000;
// 捕获错误
export const DidCapture = /*                   */ 0b000000000001000000;
// 引用（Ref）
export const Ref = /*                          */ 0b000000000010000000;
// 快照
export const Snapshot = /*                     */ 0b000000000100000000;
// 标记副作用
export const Passive = /*                      */ 0b000000001000000000;
// 待卸载的被动效应（仅用于开发环境）。
export const PassiveUnmountPendingDev = /*     */ 0b000010000000000000;
// 正在注水
export const Hydrating = /*                    */ 0b000000010000000000;
// 正在注水并更新
export const HydratingAndUpdate = /*           */ 0b000000010000000100;
// Passive & Update & Callback & Ref & Snapshot
export const LifecycleEffectMask = /*          */ 0b000000001110100100;
// Union of all host effects
export const HostEffectMask = /*               */ 0b000000011111111111;
// These are not really side effects, but we still reuse this field.
export const Incomplete = /*                   */ 0b000000100000000000;
export const ShouldCapture = /*                */ 0b000001000000000000;
export const ForceUpdateForLegacySuspense = /* */ 0b000100000000000000;

// 静态标记，示该 Fiber 使用了被动效应，即使在特定渲染中没有更新。
// 静态标记可以用于延迟卸载操作，避免在布局过程中重复遍历整个树来查找被动效应。
export const PassiveStatic = /*                */ 0b001000000000000000;

// commit 阶段的 tag
// before commit 阶段
export const BeforeMutationMask = /*           */ 0b000000001100001010;
// commit 阶段：这个标记用于标识在进行 DOM 变异时需要处理的副作用，包括插入、更新和删除等操作。
export const MutationMask = /*                 */ 0b000000010010011110;
// after commit 阶段: Layout 效应标记。这个标记用于标识在进行布局计算时需要处理的副作用。
export const LayoutMask = /*                   */ 0b000000000010100100;
// 表示 Passive 效应标记。这个标记用于标识需要处理的副作用。
export const PassiveMask = /*                  */ 0b000000001000001000;

// 静态标记。这个标记用于标识一些概念的持久性，
// 例如子树是否包含被动效应或 Portal。
// 该标记不会在克隆操作中重置，可以保持持久性。
export const StaticMask = /*                   */ 0b001000000000000000;

// 这些标记用于在组件挂载时进行优化，避免在每次提交后遍历整个树。
export const MountLayoutDev = /*               */ 0b010000000000000000;
export const MountPassiveDev = /*              */ 0b100000000000000000;

• 其中 Passive 和 PassiveMask 的区别？

  1. Passive（0b000000001000001000）：Passive 标记表示被动效应。被动效应是指那些不会触发组件重新渲染的副作用，例如事件监听器。通过标记为 Passive 的副作用可以告诉 React，它们可以安全地在 DOM 更新之后被处理，而无需等待下一次渲染阶段。这样可以提高性能并降低延迟。
  2. PassiveMask（0b000000001000001000）：PassiveMask 是一个位掩码，用于标识和过滤具有 Passive 标记的副作用。在 React 内部的协调器中，使用此掩码来过滤需要处理的被动副作用，以便在合适的时机执行它们。

  简单来说：Passive 标记副作用，PassiveMask 用于处理 Passive 标记。

2. ReactTypeOfMode

React 中的常量定义，用于表示不同的渲染模式。每个模式都由一个二进制数值表示，采用位运算来表示多个模式的组合。

export const NoMode = 0b00000;
export const StrictMode = 0b00001;
// TODO: Remove BlockingMode and ConcurrentMode by reading from the root
// tag instead
export const BlockingMode = 0b00010;
export const ConcurrentMode = 0b00100;
export const ProfileMode = 0b01000;
export const DebugTracingMode = 0b10000;

• NoMode（0b00000）表示没有特定的渲染模式。
• StrictMode（0b00001）表示启用严格模式，在开发过程中可以帮助检测一些潜在问题。
• BlockingMode（0b00010）表示阻塞模式，用于处理同步渲染，并且在整个渲染完成之前会阻塞浏览器的其他操作。
• ConcurrentMode（0b00100）表示并发模式，用于处理异步渲染，通过将渲染任务切分成多个小任务，可以提高性能和响应性。
• ProfileMode（0b01000）表示性能分析模式，用于收集渲染过程的性能数据，以便进行分析和优化。
• DebugTracingMode（0b10000）表示调试跟踪模式，用于记录React的内部操作，以帮助开发者进行调试。

3. ReactWorkTags.js

此函数为 dom 结构与 fiber 结构的映射关系。

export const FunctionComponent = 0;
export const ClassComponent = 1;
export const IndeterminateComponent = 2; // Before we know whether it is function or class
export const HostRoot = 3; // Root of a host tree. Could be nested inside another node.
export const HostPortal = 4; // A subtree. Could be an entry point to a different renderer.
export const HostComponent = 5;
export const HostText = 6;
export const Fragment = 7;
export const Mode = 8;
export const ContextConsumer = 9;
export const ContextProvider = 10;
export const ForwardRef = 11;
export const Profiler = 12;
export const SuspenseComponent = 13;
export const MemoComponent = 14;
export const SimpleMemoComponent = 15;
export const LazyComponent = 16;
export const IncompleteClassComponent = 17;
export const DehydratedFragment = 18;
export const SuspenseListComponent = 19;
export const FundamentalComponent = 20;
export const ScopeComponent = 21;
export const Block = 22;
export const OffscreenComponent = 23;
export const LegacyHiddenComponent = 24;