【React 】useLayoutEffect 和 useEffect的区别

useLayoutEffect和useEffect是React中常用的两个Hook，它们的主要区别在于触发时机。

1. useEffect会在渲染完成后异步执行，不会阻塞浏览器的绘制操作。它适用于需要在组件渲染后执行副作用的情况，例如数据的获取、订阅事件等。它不会阻止屏幕更新，因此可能会导致渲染的一次跳跃，用户可能会在页面渲染完成后才看到最终效果。

2. useLayoutEffect的触发时机稍早于useEffect，在浏览器执行绘制之前同步执行。它适用于需要在DOM更新之后同步执行副作用的情况，例如获取DOM元素的尺寸、位置等。由于它会在页面渲染之前执行，因此可以阻止屏幕更新，确保副作用的执行不会引起渲染跳跃，提供更流畅的用户体验。

需要注意的是，由于useLayoutEffect会在DOM操作之后同步执行，如果执行的操作非常耗时，则可能导致页面响应变慢。在大多数情况下，使用useEffect即可满足需求，只有在确实需要在DOM更新后立即执行副作用时才考虑使用useLayoutEffect。

应用useLayoutEffect的场景，比如：

React.useLayoutEffect(() => {
    // 环形图自适应宽度设置
    const resizePieWidth = () => {
      const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
      if (+width >= 992) {
        setPieWidth(165);
      } else if (+width > 1150) {
        setPieWidth(205);
      } else if (+width > 1250) {
        setPieWidth(235);
      } else if (+width > 1350 || +width < 992) {
        setPieWidth(260);
      }
    };
    // 初始时需要触发resize，否则会有样式兼容问题
    resizePieWidth();
    const onResize = debounce(() => {
      resizePieWidth();
    }, 50);
    window.addEventListener('resize', onResize);
    return () => {
      window.removeEventListener('resize', onResize);
    };
  });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24