React 中 useLayoutEffect 和 useEffect 的区别是什么？

推荐答案

useLayoutEffect 和 useEffect 的主要区别在于它们的执行时机：

• useEffect：在组件渲染完成后异步执行，不会阻塞浏览器的渲染。
• useLayoutEffect：在 DOM 更新之后、浏览器绘制之前同步执行，会阻塞浏览器的渲染。

本题详细解读

1. 执行时机

• useEffect：在组件渲染完成后，React 会安排一个异步任务来执行 useEffect 中的代码。这意味着它不会阻塞浏览器的渲染过程，适合用于大多数副作用操作，如数据获取、订阅等。

• useLayoutEffect：在 DOM 更新之后，但在浏览器实际绘制之前同步执行。这意味着它会阻塞浏览器的渲染，直到 useLayoutEffect 中的代码执行完毕。因此，它适合用于需要同步更新 DOM 的场景，如测量 DOM 元素、手动操作 DOM 等。

2. 使用场景

• useEffect：适用于不需要立即更新 DOM 的场景，如数据获取、设置订阅、事件监听等。由于它是异步执行的，不会影响页面的渲染性能。

• useLayoutEffect：适用于需要在浏览器绘制之前同步更新 DOM 的场景。例如，当你需要根据 DOM 元素的尺寸或位置来调整布局时，使用 useLayoutEffect 可以确保在浏览器绘制之前完成这些操作，避免页面闪烁。

3. 性能影响

• useEffect：由于是异步执行，不会阻塞浏览器的渲染，因此对性能的影响较小。

• useLayoutEffect：由于是同步执行，会阻塞浏览器的渲染，如果处理不当，可能会导致页面卡顿或性能问题。因此，除非必要，否则应尽量避免使用 useLayoutEffect。

4. 代码示例

// www.javascriptcn.com code example
import React, { useEffect, useLayoutEffect, useState } from 'react';

function Example() {
  const [width, setWidth] = useState(0);

  useEffect(() => {
    console.log('useEffect: Component rendered');
  }, []);

  useLayoutEffect(() => {
    console.log('useLayoutEffect: DOM updated');
    const element = document.getElementById('example');
    setWidth(element.offsetWidth);
  }, []);

  return (
    <div id="example">
      <p>Width: {width}px</p>
    </div>
  );
}

export default Example;

在这个示例中，useLayoutEffect 会在 DOM 更新后立即执行，确保在浏览器绘制之前获取到元素的宽度。而 useEffect 则会在组件渲染完成后异步执行。