在 React Hooks 中，useEffect 和 useLayoutEffect 都用于处理副作用逻辑，例如订阅、事件监听、DOM 操作等。但它们有着本质性的执行时机差异，这影响到页面渲染、布局抖动、性能表现等关键点。

#1. 执行时机的核心区别

在 React 的渲染流程中：

1. 渲染（Render phase）
   React 根据 state/props 计算 UI，生成虚拟 DOM，不访问真实 DOM。

2. 提交（Commit phase）
   React 将虚拟 DOM 变为真实 DOM，写入页面。

然后才触发 Hook 副作用：

#useEffect — 异步、在浏览器绘制后执行

• 执行时机：浏览器完成渲染（paint）之后
• 异步执行，不会阻塞页面渲染
• 页面先更新 → 用户能立即看到 → 再执行 effect 回调

#useLayoutEffect — 同步、在 DOM 更新但页面绘制前执行

• 执行时机：DOM 更新 → 浏览器绘制前
• 同步执行（blocking）
• React 会等待 useLayoutEffect 执行完，才允许浏览器绘制屏幕

#2. 执行顺序图示

复制React Render → 真实 DOM 更新 → （useLayoutEffect） → 浏览器绘制 → （useEffect）

#3. 执行时机对比表（GFM 表格）

#4. useEffect 的典型使用场景

#✔️ 异步请求

复制useEffect(() => {
  fetch("/api/user").then(...)
}, []);

#✔️ 订阅 / 事件监听

复制useEffect(() => {
  window.addEventListener("resize", onResize);
  return () => window.removeEventListener("resize", onResize);
}, []);

#✔️ 不依赖布局的逻辑

结论：只要不是 DOM 布局相关的副作用，都推荐使用 useEffect。

#5. useLayoutEffect 的使用场景

#✔️ 1. 读取 DOM 尺寸后同步修改

复制useLayoutEffect(() => {
  const width = divRef.current.offsetWidth;
  setWidth(width);
}, []);

#✔️ 2. 动画初始状态控制

复制useLayoutEffect(() => {
  element.style.opacity = 0;
  requestAnimationFrame(() => {
    element.style.transition = "opacity .3s";
    element.style.opacity = 1;
  });
}, []);

#✔️ 3. 第三方 DOM 库（如 D3、GSAP、Swiper）

#6. 总结对比（GFM 表格）

#一句话总结

useEffect：渲染后执行。
useLayoutEffect：渲染前必须执行。

绝大多数场景使用 useEffect，只有当副作用需要同步 DOM 时才使用 useLayoutEffect。