React Commit 阶段：一场名为“外科手术”的深度剖析

大家好，欢迎来到今天的 React 内核解剖课。

刚才我在后台听到有人窃窃私语：“Commit 阶段？不就是把东西画到屏幕上吗？有啥好分析的？”

嘿，朋友，你错了。大错特错。如果说 Render 阶段是你在脑子里构思怎么盖房子，那 Commit 阶段就是真的拿起锤子和钉子，去敲打那堆钢筋混凝土的过程。而 BeforeMutation、Mutation 和 Layout，就是这把锤子敲击的三种不同力度：“仪式”、“血肉”和“灵魂”。

今天，我们不讲废话，直接把这层皮扒开，看看 React 是怎么在主线程上，一边保持界面不卡死，一边把 DOM 搞出来的。

准备好了吗？让我们把聚光灯打在那个被无数开发者爱恨交加的 commitRoot 函数上。

---

第一部分：BeforeMutation —— 洗手做手术前的仪式

想象一下，你是一名外科医生。病人躺上手术台了，第一步是什么？不是拿刀，是洗手。消毒。检查器械。

在 React 的世界里，BeforeMutation 就是这个“洗手”的过程。虽然它不直接修改 DOM，但它要做一些极其重要的“脏活累活”。它的主要任务有两个：调度失效 和 调度更新。

为什么要在修改 DOM 之前做这个？因为 React 是异步的。Render 阶段早就跑完了，它把任务扔给调度器。现在到了 Commit 阶段，我们得把这些散落在各处的“烂摊子”收拾一下，确保接下来的 DOM 操作是合法的。

1. 处理失效与更新

当你在组件里写了 setTimeout(() => { setState(...) }, 1000)，或者 useEffect 里调用了 setState，React 并不会在 Effect 运行时立刻更新 DOM。那太疯狂了，会导致不可预测的渲染。

所以，React 把这些“延迟的愿望”存到了 pendingCommitExpirationTime 里。

在 BeforeMutation 阶段，React 会检查这个时间戳。

// 简化版的 commitRootImpl 逻辑
function commitRootImpl(
  root: FiberRootNode,
  committedExpirationTime: ExpirationTime
) {
  // ... 前面的代码省略 ...

  // 【BeforeMutation 阶段开始】
  // 1. 调度失效
  // 如果有 pending 的失效任务，这里就把它扔给调度器
  if (root.pendingCommitExpirationTime > 0) {
    // 这里的 scheduleCallback 是调度器的核心
    // 它会根据优先级决定是立即执行还是丢到下一帧
    scheduleCallback(
      root.pendingCommitExpirationTime,
      commitBeforeMutationEffects.bind(null, root)
    );
    // 注意，这里可能直接返回了，因为调度是异步的
    return;
  }

  // 2. 调度更新
  // 处理那些在 Render 阶段被中断的更新
  // 比如 useTransition 的 fallback 状态更新
  // ...

  // 【BeforeMutation 阶段结束】

  // 3. 进入 Mutation 阶段：真正的 DOM 动刀
  commitBeforeMutationEffects(root.current);
  commitMutationEffects(root.current, root);

  // 4. 进入 Layout 阶段：处理副作用
  commitLayoutEffects(root.current, root);

  // 5. 完成
  root.finishedWork = null;
  onCommitRoot(root);
}

你看，代码里那个 scheduleCallback，就是 React 的“时间管理者”。它决定这些 setState 是在下一帧执行，还是在当前帧的空闲时间执行。这就是 React 并发模式的基石之一。

2. requestAnimationFrame 的妙用

在 BeforeMutation 里，React 经常会用到 requestAnimationFrame。这不仅仅是浏览器 API，更是 React 的“节拍器”。

为什么？因为浏览器在每一帧渲染之前，都会有一个极短的“空闲期”。React 利用这段时间来调度那些低优先级的任务（比如失效），避免阻塞主线程。

BeforeMutation 的执行栈逻辑：

1. 检查 Pending Queue：看看有没有待处理的失效或更新。
2. 调度：把任务扔进 Scheduler 的队列。
3. 返回：如果任务没排上队，立马跳过，直接去 Mutation。

这就像你去餐厅吃饭，服务员（React）在端菜（Render）之前，先问你是不是要加个菜（调度失效）。如果是，他先记下来，等会儿再处理。

---

第二部分：Mutation —— 见血封喉的 DOM 操作

好了，仪式结束，医生拿起了手术刀。这就是 Mutation 阶段。

这是 Commit 阶段最重头戏的部分。这里是 React 和浏览器 DOM API 直接对话的地方。这里没有魔法，没有 Fiber 的抽象，就是赤裸裸的 appendChild、setAttribute、removeChild。

1. Fiber 树的递归遍历

React 不会一次性修改所有 DOM。它是一棵一棵 Fiber 节点修改的。commitMutationEffects 函数会递归遍历 FiberRootNode.current 这棵树。

function commitMutationEffects(
  parent: Fiber,
  root: FiberRootNode,
  committedLanes: Lanes
) {
  // 我们需要一个栈来记录遍历路径，防止递归爆栈
  // 虽然现代浏览器栈很深，但为了保险起见，React 用了迭代方式模拟递归
  let node = parent;
  let nextEffect = node.firstEffect;

  while (nextEffect !== null) {
    // 【核心逻辑：根据 flags 决定干啥】
    switch (nextEffect.tag) {
      case HostComponent: {
        // 处理 DOM 节点
        commitWork(nextEffect);
        break;
      }
      case HostText: {
        // 处理文本节点
        commitWork(nextEffect);
        break;
      }
      case Placement: {
        // 插入新节点
        commitPlacement(nextEffect);
        break;
      }
      case Deletion: {
        // 删除节点
        commitDeletion(nextEffect, root);
        break;
      }
      // ... 其他类型
    }

    // 记录上一个处理的 effect，为后续处理父子关系做准备
    const previousNext = nextEffect.nextEffect;
    nextEffect.nextEffect = null;
    nextEffect = previousNext;
  }
}

这段代码看起来简单，但背后的逻辑非常复杂。nextEffect 指针就像是手术刀的轨迹。React 必须按顺序修改 DOM，否则浏览器会崩溃。

2. 插入、更新、删除

让我们看看具体的实现。

A. 插入
当一个组件从 null 变成了 div，React 会调用 commitPlacement。

function commitPlacement(fiber: Fiber): void {
  const parent = fiber.return;
  const parentStateNode = parent.stateNode;

  // 1. 找到父容器的真实 DOM
  const node = parentStateNode;

  // 2. 找到兄弟节点（用于确定插入位置）
  // React 会通过 Fiber 树的结构找到真实的 DOM 兄弟
  const sibling = getNextHostSibling(fiber);

  // 3. 执行插入
  if (sibling) {
    // 如果有兄弟，插在它前面
    node.insertBefore(fiber.stateNode, sibling);
  } else {
    // 如果没有兄弟，插到最后
    node.appendChild(fiber.stateNode);
  }
}

B. 更新
当组件已经存在了，只是属性变了（比如 className 变了），React 会调用 commitWork。

function commitWork(fiber: Fiber): void {
  const dom = fiber.stateNode;
  const updatePayload = fiber.updateQueue;

  if (updatePayload) {
    // 1. 构建 DOM 属性变更列表
    // updateQueue 里的东西是一个数组，比如 ['style', {color: 'red'}, 'className', 'app']
    // React 18 之前是直接遍历，18 之后做了很多优化
    commitUpdate(dom, updatePayload);
  }
}

function commitUpdate(dom: Element, updatePayload: Array<any>) {
  for (let i = 0; i < updatePayload.length; i += 2) {
    const type = updatePayload[i];
    const prevValue = updatePayload[i + 1];
    const nextValue = updatePayload[i + 2];

    switch (type) {
      case 'style':
        // 更新 style
        Object.assign(dom.style, nextValue);
        break;
      case 'className':
        // 更新 class
        dom.setAttribute('class', nextValue);
        break;
      case 'dangerouslySetInnerHTML':
        // 更新 innerHTML
        dom.innerHTML = nextValue.__html;
        break;
      // ... 更多属性
      default:
        // 更新其他属性
        if (type !== 'children') {
          // 忽略 children，因为 children 是文本节点，单独处理
          dom.setAttribute(type, nextValue);
        }
    }
  }
}

C. 删除
删除是最麻烦的，因为涉及到清理事件监听器。

function commitDeletion(fiber: Fiber, root: FiberRootNode): void {
  // 1. 递归删除子节点
  // 必须先删孩子，再删自己，否则如果子节点引用了父节点，会导致内存泄漏
  commitDeletionEffects(fiber, root);

  // 2. 从 DOM 中移除
  const { return: parent } = fiber;
  if (parent !== null) {
    const parentStateNode = parent.stateNode;
    parentStateNode.removeChild(fiber.stateNode);
  }
}

Mutation 阶段的小秘密：自动批处理
在 React 18 之前，如果你在 setTimeout 里调用 setState，React 不会自动批处理，会导致多次渲染。但在 Mutation 阶段，React 拥有完全的批处理权。

这意味着，即使你在 Mutation 阶段内部调用了 setState，React 也会把这些更新合并成一次渲染。这就是为什么 Mutation 阶段可以肆无忌惮地调用 DOM API，而不用担心性能爆炸。

---

第三部分：Layout —— 醒来后的缝合

手术做完了（DOM 改好了），病人（DOM）还活着。现在需要缝合伤口，并检查生命体征。这就是 Layout 阶段。

在 React 术语里，这指的是执行 Layout Effects，也就是 useLayoutEffect。

1. 为什么叫 Layout？

因为 React 需要在 DOM 变更之后，但在浏览器把画面画出来之前，计算一下布局的变化。useLayoutEffect 的回调函数就是在这个时机同步执行的。

它的设计初衷是解决一个痛点：useEffect 是异步的，当它执行时，浏览器可能已经把画面画出来了。如果你在 useEffect 里修改了样式，你会看到画面闪烁（从旧样式闪到新样式）。

useLayoutEffect 就是为了避免这种闪烁。它在 Mutation 之后、浏览器绘制之前运行。

2. 执行栈分析

function commitLayoutEffects(
  parent: Fiber,
  root: FiberRootNode,
  committedLanes: Lanes
) {
  let node = parent;
  let nextEffect = node.firstEffect;

  while (nextEffect !== null) {
    switch (nextEffect.tag) {
      case HostComponent:
      case HostText:
        // Layout 阶段对 Host 节点不需要做特殊处理，
        // 但如果组件里有 useLayoutEffect，这里会触发
        commitLayoutWork(nextEffect);
        break;
      // ...
    }

    const previousNext = nextEffect.nextEffect;
    nextEffect.nextEffect = null;
    nextEffect = previousNext;
  }
}

3. 代码示例：闪烁的避雷针

假设我们有一个组件：

function Counter() {
  const [count, setCount] = useState(0);

  // useLayoutEffect：同步执行
  useLayoutEffect(() => {
    console.log('Layout: 我在 Mutation 之后，绘制之前执行');
    // 这里修改 DOM 不会闪烁，因为浏览器还没画
    const node = document.getElementById('root');
    if (node) {
      // 这里可以安全地读取 offsetWidth 等布局属性
      console.log(node.offsetWidth);
    }
  }, [count]);

  // useEffect：异步执行
  useEffect(() => {
    console.log('Effect: 我在 Mutation 之后，绘制之后执行');
    // 这里修改 DOM 会闪烁，因为浏览器已经画了旧画面
  }, [count]);

  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}

执行流：

1. Render: 计算出新状态 count=1。
2. Commit – BeforeMutation: 调度失效（如果有）。
3. Commit – Mutation: React 移除旧的 <button>，插入新的 <button>。DOM 已经变了。
4. Commit – Layout: React 同步执行 useLayoutEffect。此时 DOM 已经是新的，但屏幕还是旧的。JS 代码运行，更新 offsetWidth 等。
5. 浏览器绘制: 屏幕瞬间从旧画面（count=0）切换到新画面（count=1）。
   • 关键点：因为 JS 是同步的，用户根本看不到“闪烁”。如果是 useEffect，JS 在 Mutation 后执行，此时浏览器已经画了旧画面，JS 修改 DOM 导致浏览器重新绘制，用户就看到了闪烁。

4. Passive Effects (副作用)

注意，在 React 18 之前，useEffect 叫做 Passive Effects。在 Commit 阶段，Layout 阶段处理的是 useLayoutEffect，而 useEffect（Passive Effects）其实是在 Mutation 阶段结束后，通过 requestIdleCallback 调度的。

但为了简化我们的讲座，我们主要关注 Layout 阶段对 useLayoutEffect 的同步处理。

---

第四部分：深度剖析——执行栈的“洋葱剥皮法”

现在，让我们把镜头拉远，看看整个 commitRoot 的执行栈是什么样的。这就像剥洋葱，一层一层，不能乱。

1. 入口：commitRoot

这是 React 启动 Commit 的入口。

function commitRoot(root) {
  const renderPriorityLevel = getCurrentPriorityLevel();
  // ... 省略一些检查 ...

  // 1. 【BeforeMutation】调度阶段
  // 这里会处理 requestIdleCallback，决定何时执行
  commitBeforeMutationEffects(root.current);

  // 2. 【Mutation】DOM 修改阶段
  // 这里是重头戏，直接操作 DOM API
  commitMutationEffects(root.current, root);

  // 3. 【Layout】布局副作用阶段
  // 这里执行 useLayoutEffect
  commitLayoutEffects(root.current, root);

  // 4. 完成
  root.finishedWork = null;
  onCommitRoot(root);
}

2. BeforeMutation 的内部栈

function commitBeforeMutationEffects(fiber: Fiber) {
  // 这是一个递归函数，遍历 Fiber 树
  if (fiber.flags & ContentReset) {
    commitResetTextContent(fiber);
    fiber.flags &= ~ContentReset;
  }

  // 处理 Refs
  if (fiber.flags & Ref) {
    commitAttachRef(fiber);
  }

  // 关键点：调度 Passive Effects (useEffect)
  // React 会把 useEffect 的回调扔给 requestIdleCallback
  schedulePassiveEffects(fiber);

  // 继续递归
  commitBeforeMutationEffectsContinue(fiber);
}

function commitBeforeMutationEffectsContinue(fiber: Fiber) {
  let nextEffect = fiber.nextEffect;
  while (nextEffect !== null) {
    // 递归处理子节点
    commitBeforeMutationEffectsContinue(nextEffect);
    // 递归处理兄弟节点
    nextEffect = nextEffect.nextEffect;
  }
}

3. Mutation 的内部栈

这是最复杂的部分，涉及到 DOM 的增删改。

function commitMutationEffects(root: FiberRootNode, committedLanes: Lanes) {
  let fiber = root.current;

  // 使用一个栈来模拟递归，防止爆栈
  // 虽然现代浏览器栈很大，但为了健壮性，React 内部做了很多优化
  let stack: Fiber[] = [];
  stack.push(fiber);

  while (stack.length > 0) {
    fiber = stack.pop()!;

    // 1. 处理子节点
    // 因为栈是后进先出，所以要先处理子节点，再处理自己
    // 这样可以保证 DOM 操作的顺序符合 DOM 树结构
    if (fiber.child !== null) {
      // 如果有子节点，先入栈
      stack.push(fiber.child);
      continue;
    }

    // 2. 处理当前节点
    if (fiber.flags & Placement) {
      commitPlacement(fiber);
    }
    if (fiber.flags & Update) {
      commitWork(fiber);
    }
    if (fiber.flags & Deletion) {
      commitDeletion(fiber, root);
    }

    // 3. 处理兄弟节点
    // 继续循环栈顶的元素
  }
}

注意这里的栈逻辑：
React 为了避免递归调用栈过深（虽然一般不会，但严谨起见），使用了手动栈。它把子节点压入栈，然后处理栈顶。处理完栈顶后，再处理栈顶的兄弟节点。这保证了 DOM 操作的顺序是正确的（父节点先插入，子节点后插入）。

4. Layout 的内部栈

Layout 阶段相对简单，因为它主要是调用回调函数。

function commitLayoutEffects(root: FiberRootNode, committedLanes: Lanes) {
  let fiber = root.current;

  // 同样的，使用栈来遍历
  let stack: Fiber[] = [];
  stack.push(fiber);

  while (stack.length > 0) {
    fiber = stack.pop()!;

    // 1. 处理子节点
    if (fiber.child !== null) {
      stack.push(fiber.child);
      continue;
    }

    // 2. 执行 Layout Effects
    if (fiber.flags & LayoutMask) {
      // 这里会调用 fiber.updateQueue.effectTag 来判断是挂载还是更新
      if (fiber.flags & Update) {
        // 更新 Effect
        commitLayoutUpdateEffects(fiber, committedLanes);
      }
      if (fiber.flags & Placement) {
        // 挂载 Effect
        commitLayoutMountEffects(fiber, committedLanes);
      }
    }
  }
}

5. 执行流的时间线可视化

让我们把这三者放在同一个时间轴上，想象你在看一张心电图。

时间点	阶段	动作	状态
T1	BeforeMutation	React 拿出清单，把 setTimeout 的任务扔给调度器。	准备中
T2	Mutation	React 调用 appendChild，DOM 树瞬间变了。	DOM 变更
T3	Mutation	React 调用 setAttribute，属性变了。	DOM 变更
T4	Mutation	React 调用 removeChild，DOM 节点消失了。	DOM 变更
T5	Layout	React 同步执行 useLayoutEffect 回调。	JS 执行
T6	Layout	JS 读取新的 DOM 布局信息。	JS 执行
T7	绘制	浏览器将 T4-T6 的结果绘制到屏幕上。	用户可见

关键洞察：
你会发现，Layout 阶段是在 Mutation 阶段之后、浏览器绘制之前运行的。这就是为什么它能保证同步，保证不闪烁。

---

第五部分：总结与彩蛋

好了，朋友们，我们的手术刀已经收起来了。

回顾一下今天的旅程：

1. BeforeMutation 是“仪式”。它负责调度那些异步的任务，确保在动刀之前，所有的“预约”都安排好了。
2. Mutation 是“血肉”。它直接操作 DOM API，这是 Commit 阶段最重、最脏、最累的活。它保证了 DOM 树与 Fiber 树的一致性。
3. Layout 是“灵魂”。它执行 useLayoutEffect，确保在浏览器把画面画出来之前，所有的布局计算和副作用都处理完毕，避免了视觉上的“闪烁”。

这三个阶段，层层递进，环环相扣。如果你不理解它们，写 React 代码可能会遇到各种离奇的 Bug，比如奇怪的闪烁、性能问题，或者内存泄漏。

最后的彩蛋：

你可能会问：“既然 Layout 阶段这么同步，为什么不直接把 useEffect 也放这里同步执行？”

答案是：性能。

useEffect 里的代码通常是副作用，比如发网络请求、记录日志。这些操作不应该阻塞浏览器的渲染。如果把它们放在 Layout 阶段同步执行，那么只要页面一更新，所有组件的 useEffect 就会瞬间全部触发，可能导致主线程阻塞，画面卡顿。

所以，React 的设计是：Mutation 负责 DOM 更新，Layout 负责 UI 修正，Effect 负责“副作用”。这种分工，既保证了性能，又保证了体验。

希望这篇讲座能让你对 React 的 Commit 阶段有一个更直观、更透彻的理解。下次当你看到控制台里那一长串红色的报错，或者界面卡顿的时候，你可以想想，是不是在 Mutation 阶段，React 拿着锤子敲得太猛了？

谢谢大家！