React Hooks 的 useLayoutEffect 与 useEffect 的执行时机与区别原理

描述
useLayoutEffect 和 useEffect 都是 React Hooks 中用于处理副作用的钩子，但它们的执行时机和适用场景有重要区别。理解两者的差异对于避免页面闪烁和优化渲染性能至关重要。

解题过程

1. 副作用钩子的基本概念

• 副作用：组件渲染过程中可能影响外部世界的操作（如 DOM 操作、数据订阅等）。
• React 组件渲染分为渲染阶段（生成 Virtual DOM）和提交阶段（更新真实 DOM）。
• 副作用钩子用于在提交阶段后执行额外逻辑，但 useLayoutEffect 和 useEffect 的执行时机不同。

2. useEffect 的执行流程

• 触发时机：在组件渲染到屏幕之后（即浏览器完成绘制后）异步执行。
• 具体流程：
  1. 组件完成 Virtual DOM 的渲染和 Diff 比较。
  2. React 同步更新真实 DOM（提交阶段）。
  3. 浏览器绘制更新后的界面。
  4. useEffect 的副作用函数异步执行。
• 代码示例：

  useEffect(() => {
    // 这里的 DOM 操作可能导致页面闪烁
    document.title = "Updated Title";
  });
  

• 特点：不会阻塞浏览器绘制，但可能因延迟执行导致视觉不一致（如先显示旧状态再更新）。

3. useLayoutEffect 的执行流程

• 触发时机：在 React 更新真实 DOM之后、浏览器绘制之前同步执行。
• 具体流程：
  1. 组件完成 Virtual DOM 的渲染和 Diff 比较。
  2. React 同步更新真实 DOM（提交阶段）。
  3. useLayoutEffect 的副作用函数同步执行。
  4. 浏览器阻塞绘制，直到 useLayoutEffect 执行完毕。
• 代码示例：

  useLayoutEffect(() => {
    // 在绘制前同步调整 DOM，避免闪烁
    const element = document.getElementById("my-element");
    if (element) element.style.height = "100px";
  });
  

• 特点：阻塞浏览器绘制，适合需要立即更新 DOM 的场景（如测量元素尺寸后调整样式）。

4. 关键区别对比

5. 底层原理与事件循环关联

• React 的提交阶段完成后，会触发以下顺序：
  1. 同步执行 useLayoutEffect 的清理函数（若依赖变更）和副作用函数。
  2. 将 useEffect 的调度推入宏任务队列（setTimeout 类似机制）。
  3. 浏览器绘制界面。
  4. 事件循环处理宏任务，执行 useEffect 的副作用。
• 源码简化逻辑：

  // React 提交阶段伪代码
  function commitRoot() {
    // 1. 更新真实 DOM
    commitMutationEffects();
  
    // 2. 同步执行 useLayoutEffect
    commitLayoutEffects(); // 包含 useLayoutEffect 逻辑
  
    // 3. 将 useEffect 加入调度队列
    scheduleCallback(NormalPriority, () => {
      flushPassiveEffects(); // 执行 useEffect
    });
  }
  

6. 实际应用场景示例

• useLayoutEffect 适用场景：
  • 调整元素样式或布局（如动态计算高度）。
  • 避免 DOM 更新后用户看到中间状态（如工具提示位置调整）。
• useEffect 适用场景：
  • 数据获取、事件监听等不依赖 DOM 即时更新的操作。
  • 对性能要求不高的副作用（异步执行减少主线程阻塞）。

7. 注意事项

• 服务端渲染（SSR）：useLayoutEffect 在服务端会触发警告（因为无 DOM），需改用 useEffect。
• 性能影响：useLayoutEffect 的同步执行可能拖慢首屏渲染，非必要时应优先使用 useEffect。
• 依赖数组：两者的依赖数组工作机制相同，依赖变更时先执行清理函数再运行副作用。

通过理解执行时机与浏览器渲染流程的关联，可以合理选择钩子以避免页面闪烁并优化用户体验。