讲一下useEffect和useLayoutEffect

useEffect 和 useLayoutEffect 都是 React 中的副作用 Hook ，它们的函数签名完全一样。唯一的、也是本质的区别在于执行时机不同。

简单来说：

useEffect ：异步执行，在浏览器绘制之后才运行。
useLayoutEffect ：同步执行，在浏览器绘制之前运行。

理解了这个时间差，就能明白它们各自的应用场景和潜在风险。

1. 核心区别：执行时机

为了直观地理解，可以看看下面这张图。它展示了从组件更新到屏幕呈现的完整流程：

sequenceDiagram participant 组件状态更新 participant React 更新 DOM participant 浏览器重新绘制屏幕 participant 执行副作用组件状态更新->>React 更新 DOM: 触发渲染 Note over React 更新 DOM: React 计算出新的虚拟DOM<br/>并同步更新真实DOM React 更新 DOM->>浏览器重新绘制屏幕: DOM已更新，但屏幕还未更新 alt useLayoutEffect React 更新 DOM->>执行副作用: 立即同步执行（阻塞绘制）执行副作用->>浏览器重新绘制屏幕: 副作用执行完成后才进行绘制 else useEffect React 更新 DOM->>浏览器重新绘制屏幕: 先进行屏幕绘制浏览器重新绘制屏幕->>执行副作用: 异步执行，不阻塞绘制 end

总结：

useLayoutEffect 会阻塞浏览器绘制。副作用代码运行完后，用户才能看到屏幕上的最终画面。
useEffect 不会阻塞浏览器绘制。用户会先看到画面（可能是更新前的，或更新后但副作用还未生效的画面），然后副作用再悄悄运行。

2. 各自的使用场景

基于执行时机，它们各自有明确的适用场景。

Hook	执行时机	适用场景	风险
`useEffect`	浏览器绘制后	- 绝大部分副作用：数据获取、设置订阅、日志记录 - 操作不直接影响用户看到的首屏视觉的DOM	可能产生视觉闪烁（如果副作用会明显改变DOM样式）
`useLayoutEffect`	浏览器绘制前	- 需要同步读取或修改DOM（例如：获取元素尺寸、位置） - 需要在绘制前完成样式修改，避免视觉闪烁	- 阻塞绘制，可能降低性能 - 在服务端渲染（SSR）中会发出警告

`useLayoutEffect` 的典型代码示例

下面的例子展示了如何用 useLayoutEffect 解决闪烁问题。

jsx 复制代码

function MeasureAndFixComponent() {
  const ref = useRef();
  // 使用 useLayoutEffect 确保在浏览器绘制前，DOM 位置就被调整好
  useLayoutEffect(() => {
    const rect = ref.current.getBoundingClientRect();
    // 假设需要根据元素位置调整某个样式，比如让一个浮动提示框不超出屏幕
    if (rect.right > window.innerWidth) {
      ref.current.style.left = `${window.innerWidth - rect.width}px`;
    }
  }, []); // 依赖项为空，只在组件挂载时执行一次

  // 用户永远不会看到浮动提示框在错误位置闪烁一下，因为它已经被纠正了
  return <div ref={ref}>A tooltip or dropdown</div>;
}

如果用 useEffect 来实现上述逻辑，用户可能会先看到元素在原始位置闪现一下，然后瞬间跳转到正确位置，造成一种"闪烁"或"跳动"的不佳体验。

3. 常见误区

误区一：为了避免SSR警告而放弃 useLayoutEffect
- 澄清：仅在 SSR 中会警告，在客户端渲染（CSR）中安全。对于 CSR 项目，完全可以使用 useLayoutEffect。若要消除 SSR 警告，官方推荐的做法是自定义一个 Hook，在客户端挂载前返回 useEffect，挂载后返回 useLayoutEffect。
误区二：误用 useLayoutEffect 来替代 useEffect
- 澄清：大部分场景下 useEffect 是更优选择。滥用 useLayoutEffect 会强制 React 在绘制前同步执行代码，从而拖慢性能，让页面感觉卡顿。
误区三：在 useLayoutEffect 里做异步操作
- 澄清：由于 useLayoutEffect 是同步执行的，如果在内部进行异步请求，会导致整个渲染过程被意外地拉长。数据和网络相关的副作用，始终应该放在 useEffect 中。

4. 总结（记忆要点）

执行顺序 ：useLayoutEffect 先于 useEffect 执行。具体顺序是：useLayoutEffect 清理函数 -> useLayoutEffect 回调 -> useEffect 清理函数 -> useEffect 回调。
选择标准 ：当你的副作用直接影响用户看到的画面 （例如需要精确测量或立即调整DOM），并且不希望出现抖动时，用 useLayoutEffect 。其他情况，默认都用 useEffect。
一句话总结 ：useEffect 是异步的、非阻塞的，用于数据和大部分不直接改变视觉的副作用；useLayoutEffect 是同步的、阻塞的，用于在屏幕刷新前同步操作 DOM，避免视觉闪烁。