深入解析React useEffect与useLayoutEffect：区别、原理与实践

news/2025/2/26 20:03:50

🌌 ‌深入解析React useEffect与useLayoutEffect：区别、原理与实践

在React函数组件中，useEffect和useLayoutEffect是处理副作用的两个核心Hook。它们看似相似，但在执行时机和应用场景上有本质区别。本文将通过‌原理剖析‌、‌对比示例‌和‌使用指南‌，助你彻底掌握它们的差异。

📜 ‌目录‌

核心区别与原理本质‌
执行时机与浏览器渲染流程‌
使用场景与代码示例‌
注意事项与最佳实践

1️⃣ ‌核心区别与原理本质

‌特性	useEffect	useLayoutEffect
‌执行时机	异步，在浏览器绘制后执行	同步，在DOM更新后、绘制前执行
‌阻塞渲染	否	是（可能影响性能）
适用场景	数据获取、订阅、非紧急DOM操作	DOM测量、同步样式调整

底层原理‌：
React的渲染分为‌渲染阶段‌（生成虚拟DOM）和‌提交阶段‌（更新真实DOM）。

useEffect：在提交阶段完成后‌异步‌执行，不阻塞浏览器绘制。
useLayoutEffect：在提交阶段中‌同步‌执行，确保在浏览器绘制前完成操作。

2️⃣ ‌执行时机与浏览器渲染流程

React渲染组件（生成虚拟DOM）
更新真实DOM（提交阶段）
↳ useLayoutEffect 执行
浏览器绘制屏幕
useEffect 执行

关键点‌：useLayoutEffect的执行会延迟浏览器的绘制，直到其回调完成。

3️⃣ ‌使用场景与代码示例

场景1：避免视觉闪烁（`useLayoutEffect`）

function AutoSizeElement() {
  const [width, setWidth] = useState(0);
  const divRef = useRef();

  useLayoutEffect(() => {
    // 同步测量元素宽度，避免闪烁
    const measuredWidth = divRef.current.offsetWidth;
    setWidth(measuredWidth);
  }, []);

  return <div ref={divRef}>Width: {width}px</div>;
}

说明‌：若使用useEffect，用户可能先看到未更新的宽度，再突然变化。

场景2：数据订阅（`useEffect`）

function DataFetcher() {
  useEffect(() => {
    const subscription = fetchData().subscribe(data => {
      // 异步处理数据
    });
    return () => subscription.unsubscribe(); // 清理副作用
  }, []);
  
  return <div>Data Loading...</div>;
}

说明‌：异步操作无需阻塞渲染，适合useEffect。