欢迎来到 React 渲染的“手术室”：深度解析 useLayoutEffect 与主线程阻塞

嘿，各位前端开发者，大家好！

今天我们不聊那些花里胡哨的 UI 库，也不聊那些让你秃头的 CSS 布局难题。今天，我们要潜入 React 的核心——那个被称为“渲染周期”的神秘黑盒。我们要聊聊 useLayoutEffect，这个听起来像是某种核武器发射按钮的 Hook，以及它是如何像一头蛮牛一样，死死顶住浏览器主线程，阻止你看到那令人尴尬的“闪烁”画面的。

准备好了吗？让我们把键盘放下，把咖啡放下，甚至把你的发际线也先放一放。今天我们要解剖的是 React 源码中最硬核的部分之一：commitLayoutEffects。

第一部分：渲染的“前戏”与“正事”

在 React 的世界里，渲染并不是一蹴而就的。它就像是一场精心编排的舞蹈，分成了几个明显的阶段。为了理解 useLayoutEffect 为何霸道，我们得先搞清楚它站在舞台的哪个位置。

1. Render 阶段：思想的碰撞

这是 React 产生“思想”的阶段。它遍历你的组件树，计算新的状态，生成新的 Fiber 节点。这就像厨师在脑海里构思菜谱，切菜备料。这个阶段是异步的，它利用 requestIdleCallback（或者 React 自己的调度器）在浏览器主线程不忙的时候偷偷摸摸地干活。

2. Commit 阶段：现实的暴击

这是最关键的环节。Render 阶段结束，React 拿到了最新的 DOM 变更方案。它要开始干活了，把新的 DOM 节点挂载到页面上，或者更新现有的节点。

这里有一个非常微妙的时间点：浏览器的绘制时机。

浏览器有一个内置的机制，叫做 requestAnimationFrame (RAF)。它会在每一帧开始前（通常是屏幕刷新率，比如 16ms 一帧）触发回调。

• 场景 A（如果 React 很听话）： React 在 RAF 回调之前完成了所有 DOM 操作，然后浏览器才去绘制。这很完美，用户什么都没感觉到。
• 场景 B（React 做了额外的事）： React 在 RAF 回调之后才完成 DOM 操作。结果就是，浏览器先画了旧的画面，然后 React 把 DOM 换了，浏览器再画新画面。这就像你还没换衣服就先拍了张照，然后发现衣服不对，又换了一套重拍——闪烁！

3. useEffect 的“躺平”哲学

React 为了避免闪烁，设计了一个异步的 Hook 叫 useEffect。它被安排在 RAF 回调之后执行。

useEffect(() => {
  // 这里的代码在浏览器绘制完之后才运行
  console.log('我是在绘制之后才看到的');
});

这时候你可能会问：“那 useLayoutEffect 呢？它是不是想抢风头？”

第二部分：useLayoutEffect 的“同步”特权

useLayoutEffect，顾名思义，它的执行时机和布局（Layout）紧密相关。它是同步的！

当你在 useLayoutEffect 里修改 DOM（比如修改元素的 style.width），这个修改是立即生效的。更重要的是，React 会在浏览器执行下一帧的绘制之前，强制暂停所有操作，直到 useLayoutEffect 全部执行完毕。

这就好比你在开派对前，必须先检查一遍桌子摆得正不正，灯亮不亮。如果桌子歪了，你不能直接让客人进来，你得先扶正桌子，客人才能入场。

为什么需要同步？

因为我们需要在浏览器重绘之前，读取 DOM 的最新布局信息。

假设你有一个动态高度的组件，高度是根据内容变化的。如果你用 useEffect，当你去读取 element.scrollHeight 时，DOM 已经是新的了，但浏览器可能已经画了旧的画面。如果你用 useLayoutEffect，你读取的是最新的 DOM，但此时浏览器还没画，所以你可以在 useLayoutEffect 里手动调整样式来“骗”过浏览器，实现无闪烁的更新。

第三部分：源码解剖——commitLayoutEffects 的硬核逻辑

好了，理论讲得差不多了，让我们打开源码。我们要看的核心文件是 ReactFiberCommitLayout.js（在较新的 React 版本中，逻辑被拆分得更细，但核心都在这里）。

1. 入口：commitLayoutEffects

当 React 进入 Commit 阶段，它会调用 commitRootImpl。这个函数就像是一个指挥官，指挥着后续的一系列动作：commitBeforeMutationEffects（副作用前的变异）、commitMutationEffects（DOM 变异）、以及我们的主角——commitLayoutEffects。

// ReactFiberCommitLayout.js (伪代码示意，非真实源码)
function commitLayoutEffects(fiber: Fiber, root: FiberRoot) {
  // 1. 开始布局阶段
  // React 会从 root.fiber 开始遍历整个树
  commitLayoutEffects_begin(fiber, root);

  // 2. 执行布局副作用
  // 这是一个同步循环，就像一个不知疲倦的永动机
  while (fiber !== null) {
    commitLayoutEffectOnFiber(root, fiber);
    fiber = fiber.nextEffect;
  }

  // 3. 结束布局阶段
  commitLayoutEffects_end(root);
}

2. commitLayoutEffectOnFiber：单兵作战

这个函数是核心。它负责处理单个 Fiber 节点上的布局副作用。

function commitLayoutEffectOnFiber(root, fiber) {
  // 检查这个 Fiber 节点是否有 Layout Effects
  // React 在构建 Fiber 树时，会把带有 useLayoutEffect 的节点标记出来
  if ((fiber.flags & LayoutEffectMask) !== NoFlags) {
    switch (fiber.tag) {
      case FunctionComponent:
      case ClassComponent:
      case ForwardRef:
      case SimpleMemoComponent:
        // 调用组件的生命周期或 Hook
        commitLayoutEffectImpl(fiber);
        break;
      // ... 其他类型的节点处理
    }
  }

  // 递归处理子节点和兄弟节点
  commitLayoutEffects_begin(fiber.child, root);
  commitLayoutEffects_complete(fiber.sibling, root);
}

注意看那个 while 循环！这就是阻塞主线程的元凶。

3. 同步执行的本质

在 JavaScript 中，函数调用是同步的。当你调用 commitLayoutEffectOnFiber 时，CPU 必须立刻执行完它。如果这个函数里有一个 useLayoutEffect，那么这个 Hook 内部的回调函数会被立即执行。

关键点来了： 在执行 useLayoutEffect 回调的过程中，React 会持有主线程的控制权。浏览器根本插不进队去。

如果这个 useLayoutEffect 里涉及大量的 DOM 操作（比如计算布局、强制重排），或者大量的 JS 计算，那么浏览器主线程就会被卡住。因为 React 说：“等我把这个布局调整完，浏览器，你才能去画下一帧！”

第四部分：实战演示——如何“拯救”闪烁的输入框

让我们通过一个具体的例子来感受这种“阻塞”的力量。

场景：动态宽度的输入框

假设我们有一个输入框，输入文字后，输入框的宽度会自动根据文字内容伸缩。如果不处理好，你会看到输入框先变宽，然后文字才显示出来（闪烁）。

错误示范：useEffect 的无奈

import React, { useState, useEffect, useRef } from 'react';

const BadExample = () => {
  const [text, setText] = useState('');
  const inputRef = useRef(null);

  useEffect(() => {
    // 这里是同步的吗？不。
    // 浏览器先画了旧画面，然后 RAF 触发，这里才执行。
    // 此时，浏览器已经完成了绘制。
    // 如果我们在下面操作 DOM，可能会导致布局抖动。
    if (inputRef.current) {
      inputRef.current.style.width = `${inputRef.current.scrollWidth}px`;
    }
  }, [text]);

  return (
    <div>
      <input 
        ref={inputRef}
        value={text} 
        onChange={(e) => setText(e.target.value)}
        placeholder="输入点什么看看..."
      />
    </div>
  );
};

现象： 你输入时，输入框会先瞬间变宽，然后文字才出现。或者文字出现后，输入框又跳了一下。这就是因为 useEffect 在绘制之后才运行，浏览器已经“画完了”，React 只能在下一帧再改，导致视觉上的“鬼畜”。

正确示范：useLayoutEffect 的雷霆手段

import React, { useState, useLayoutEffect, useRef } from 'react';

const GoodExample = () => {
  const [text, setText] = useState('');
  const inputRef = useRef(null);

  useLayoutEffect(() => {
    // 注意这里的名字：useLayoutEffect
    // React 会在这里阻塞绘制，直到我们返回
    if (inputRef.current) {
      const el = inputRef.current;
      // 1. 读取当前的布局信息（此时 DOM 已经更新，但还没画）
      const newWidth = el.scrollWidth;
      const currentWidth = el.offsetWidth;

      // 2. 如果宽度变了
      if (newWidth !== currentWidth) {
        // 3. 修改样式
        el.style.width = `${newWidth}px`;

        // 4. 这里的 console.log 会在浏览器绘制之前打印
        console.log('useLayoutEffect 正在调整布局，阻止绘制！');
      }
    }
  }, [text]);

  return (
    <div>
      <input 
        ref={inputRef}
        value={text} 
        onChange={(e) => setText(e.target.value)}
        placeholder="输入点什么看看..."
      />
    </div>
  );
};

现象： 当你输入时，输入框会瞬间调整宽度，然后文字才显示出来。但是，你不会看到“先变宽再变窄”的闪烁过程。因为 useLayoutEffect 把这个过程锁在了一个时间窗口里，在这个窗口结束前，浏览器连笔都不许动。

第五部分：阻塞主线程的代价——性能陷阱

虽然 useLayoutEffect 很强大，能解决闪烁问题，但它也是一个双刃剑。因为它阻塞了主线程，所以它也继承了主线程的所有弱点。

1. “长任务”的噩梦

如果你的 useLayoutEffect 里面写了大量的计算逻辑，或者非常复杂的 DOM 操作（比如在一个大列表里遍历计算），那么浏览器在这一帧就会卡死。

useLayoutEffect(() => {
  // 假设这里有一个耗时 50ms 的计算
  for (let i = 0; i < 10000000; i++) {
    // 模拟计算
    Math.sqrt(i); 
  }

  // 更新 DOM
  document.body.style.backgroundColor = 'red';
}, []);

在这个 50ms 的计算过程中，用户的点击事件、滚动事件可能都无法响应。页面会卡顿。这就是所谓的“掉帧”。

2. 与 useEffect 的权衡

React 官方文档建议：如果可能，尽量使用 useEffect。

为什么？因为 useEffect 不阻塞主线程。它允许浏览器在 React 执行完副作用之后，赶紧去画下一帧。如果页面很复杂，使用 useLayoutEffect 极其容易导致严重的性能问题。

3. 源码中的性能优化策略

React 的源码里其实也考虑到了这个问题。在 commitLayoutEffects 的遍历过程中，React 会尽量减少不必要的调用。

// ReactFiberCommitLayout.js
function commitLayoutEffectOnFiber(root, fiber) {
  // ...
  if ((fiber.flags & LayoutEffectMask) !== NoFlags) {
    // ...
    commitLayoutEffectImpl(fiber);
    // ...
  }
}

React 只会执行那些被标记为有布局副作用的节点。这意味着，如果你的组件里没有 useLayoutEffect，React 甚至不会去检查它。

第六部分：深入源码细节——Fiber 链表的遍历

为了更深入地理解，我们得看看 React 是如何遍历 Fiber 树的。

在 Commit 阶段，React 维护了一个 nextEffect 指针链表。这个链表记录了所有需要执行副作用的节点。

// ReactFiberCommitLayout.js
function commitLayoutEffects_begin(fiber: Fiber, root: FiberRoot) {
  // 从子节点开始遍历
  while (fiber !== null) {
    // 先处理当前节点的子节点（深度优先）
    commitLayoutEffects_begin(fiber.child, root);
    // 然后处理当前节点
    commitLayoutEffectOnFiber(root, fiber);
    // 最后处理兄弟节点
    fiber = fiber.sibling;
  }
}

这是一个典型的深度优先遍历。React 会一路向下，处理完所有子组件的 useLayoutEffect，然后再回过头来处理兄弟节点。

这种遍历方式保证了子组件的布局调整会先于父组件发生。这对于嵌套组件的样式计算至关重要。

第七部分：commitBeforeMutationEffects —— 被遗忘的兄弟

在 commitLayoutEffects 之前，还有一个阶段叫 commitBeforeMutationEffects。这个阶段非常短，它主要负责一些“预操作”。

// ReactFiberCommitWork.js
function commitBeforeMutationEffects(root: FiberRoot) {
  commitBeforeMutationEffects_begin(root.current);
}

function commitBeforeMutationEffects_begin(fiber: Fiber) {
  while (fiber !== null) {
    const flags = fiber.flags;
    // 处理 Snapshot Flags (useInsertionEffect)
    if ((flags & Snapshot) !== NoFlags) {
      commitBeforeMutationEffectOnFiber(root, fiber);
    }
    // 处理 Ref Flags (useRef)
    if ((flags & Ref) !== NoFlags) {
      commitAttachRef(fiber);
    }

    // 递归
    commitBeforeMutationEffects_begin(fiber.child);
    fiber = fiber.sibling;
  }
}

注意看 Ref 的处理。useRef 的回调是在这里执行的！但 useRef 只是保存引用，不涉及 DOM 样式，所以不阻塞绘制。而 useLayoutEffect 是在 commitLayoutEffects 里执行的，它涉及 DOM 样式，所以必须阻塞绘制。

第八部分：总结与最佳实践

好了，伙计们，今天的“手术”已经完成了。

回顾一下，useLayoutEffect 是一个同步的 Hook，它在 commitLayoutEffects 阶段执行。这个阶段位于浏览器 requestAnimationFrame 回调之前，因此它会阻塞主线程的绘制。

它的作用：

1. 修复布局抖动： 在浏览器重绘之前读取和修改 DOM 布局。
2. 确保视觉一致性： 防止用户看到不协调的 DOM 变化（如输入框闪烁）。

它的代价：

1. 阻塞主线程： 如果逻辑太重，会导致页面卡顿。
2. 性能杀手： 在复杂的组件树中，useLayoutEffect 的调用开销很大。

资深专家的建议：

1. 默认使用 useEffect： 除非你遇到了明显的闪烁问题，否则不要用 useLayoutEffect。保持代码简单，让浏览器保持流畅。
2. 只做必要的事： 如果必须用 useLayoutEffect，尽量只做最简单的 DOM 读取和样式修改。不要在这里做复杂的数学计算、网络请求或繁重的数据处理。
3. 避免在 useLayoutEffect 中读取 DOM： 虽然这是它的主要用途，但尽量保持逻辑简单。如果需要读取 DOM，尽量在 useEffect 中去处理，虽然会有闪烁，但至少不会卡死主线程。

React 的设计哲学是“声明式”和“高效”。useLayoutEffect 是为了解决特定场景下的视觉问题而生，但它不是万能药。理解它的同步特性，理解它如何阻塞主线程，你才能在 React 的世界里游刃有余，写出既漂亮又流畅的代码。

记住，代码写得快不是本事，写得稳、写得流畅才是真功夫。别让你的 useLayoutEffect 变成主线程上的“交通堵塞”。

好了，今天的讲座就到这里。大家回去可以试试那个“闪烁输入框”的例子，感受一下 useLayoutEffect 的威力。下课！