useLayoutEffect 与 useEffect 的运行时机

useLayoutEffect 会在 React 应用 DOM 变更后立即同步触发，但此时浏览器还没有机会绘制这些变更。从浏览器的角度看，布局副作用和 DOM 变更属于同一个不间断的同步工作块。

useEffect 会在浏览器完成绘制后异步触发。用户会先看到更新后的界面，然后副作用才会运行。这使得 useEffect 对渲染性能的干扰较小，但也意味着副作用导致的任何可见变化都会产生第二个绘制周期。

您可以通过在两个副作用中记录时间戳来验证时序差异：在 useLayoutEffect 中添加 console.log('layout', Date.now())，并在 useEffect 中添加 console.log('passive', Date.now())。在控制台中，布局副作用的时间戳总是早于被动副作用的时间戳，从而确认执行顺序。

如果 useEffect 更新了会影响视觉输出的状态，用户会看到两次渲染：第一次渲染使用过时的状态，副作用触发后再进行修正后的渲染。这会表现为可见的闪烁或重排。useLayoutEffect 可以避免这种情况，因为它的状态更新会在浏览器绘制任何内容之前提交。

如果您在 useLayoutEffect 中调用 setState，React 会在绘制前立即运行另一个渲染和提交周期。浏览器只会绘制最终结果，用户永远不会看到中间状态。这正是 useLayoutEffect 的主要用途：测量 DOM、计算新值、设置状态，并确保只进行一次干净的绘制。

由于 useLayoutEffect 会在绘制前同步运行，并且可能触发额外的渲染，过度使用会损害性能。如果同步工作负担过重，就会阻塞浏览器绘制，造成明显的卡顿。只有在需要防止视觉闪烁时才使用它；其他情况都应使用 useEffect。

在 React 严格模式中（仅限开发环境），useLayoutEffect 和 useEffect 在每次挂载时都会被调用两次。顺序是：挂载、清理、再次挂载。这有助于检测未正确清理的副作用。生产构建不会发生双重调用。

默认选择始终应当是 useEffect。只有在您能够观察并复现视觉闪烁或布局错误时，才切换到 useLayoutEffect。过度使用 useLayoutEffect 会不必要地阻塞浏览器的绘制流程，并降低用户感知到的性能。

useLayoutEffect 无法在服务器上运行，因为服务器环境中没有 DOM，也没有浏览器绘制周期。如果在会于服务器上渲染的组件中使用它，React 会发出警告。解决方法是有条件地跳过该副作用：检查 typeof window !== 'undefined'，或者在兼容 SSR 的代码中改用 useEffect。

请问自己：“这个副作用是否会改变用户在第一次绘制时看到的内容？”如果是，请使用 useLayoutEffect 来防止闪烁。如果不是——例如数据获取、订阅、数据分析、日志记录以及大多数其他副作用——请使用 useEffect。这一决策框架适用于大多数实际场景。

useLayoutEffect 会与 DOM 变更运行在同一个同步工作块中。当 useLayoutEffect 正在运行时，React 无法处理其他任务，例如响应用户事件。这就是它必须快速且专注的原因。在 useLayoutEffect 中运行耗时较长的同步代码，会直接延迟浏览器将内容绘制到屏幕上。

useLayoutEffect 是同步的，会在浏览器绘制前触发，因此适合进行 DOM 测量和视觉修正。useEffect 会在绘制后触发，适合数据获取、订阅和大多数副作用。默认使用 useEffect，只有在视觉闪烁确认需要 useLayoutEffect 时才切换。未加防护时，不要在 SSR 中使用它。