React中useEffect与useLayoutEffect有什么区别？

在React中，useEffect和useLayoutEffect都是用来处理副作用的Hook，例如数据获取、订阅或手动DOM操作。然而，它们在执行时机上有细微的差别，这可能会影响你选择使用哪一个。

1. useEffect

  useEffect是一个Hook，它允许你在函数组件中执行副作用。它接受一个函数作为参数，这个函数包含了需要执行的副作用代码。useEffect会在组件渲染到屏幕之后执行。

import React, { useEffect } from 'react';

function Example() {
  useEffect(() => {
    console.log('Effect executed after the component is rendered');
  }, []); // 空依赖数组表示这个effect只在组件挂载、更新和卸载时运行

  return <div>Example Component</div>;
}

  在这个例子中，useEffect会在组件渲染后执行，并在组件卸载时再次执行。

2. useLayoutEffect

  useLayoutEffect与useEffect非常相似，但它专门用于处理需要在DOM布局更新后同步执行的副作用。这意味着useLayoutEffect会在浏览器绘制屏幕更新之前执行，确保在DOM更新后立即进行DOM操作。

import React, { useLayoutEffect } from 'react';

function Example() {
  useLayoutEffect(() => {
    console.log('Layout effect executed before the browser paints');
  }, []); // 空依赖数组表示这个layout effect只在组件挂载、更新时运行

  return <div>Example Component</div>;
}

  在这个例子中，useLayoutEffect会在组件渲染并更新DOM后立即执行。

3. useEffect与useLayoutEffect的区别

• 执行时机：useEffect在所有DOM变更完成后执行，通常在浏览器的绘制过程中；而useLayoutEffect在DOM变更之前执行，这意味着它在浏览器绘制之前同步运行。
• 性能：由于useLayoutEffect在绘制前执行，因此它可能会导致重排和重绘，影响性能。如果你的副作用不依赖于布局信息，通常建议使用useEffect。

3.1 何时使用useLayoutEffect？

  useLayoutEffect适用于需要直接读取DOM布局或同步修改DOM布局的场景。例如，当你需要基于容器的大小来计算样式或进行布局调整时，useLayoutEffect是合适的选择。

function ResizeObserver() {
  const ref = React.useRef(null);

  useLayoutEffect(() => {
    if (ref.current) {
      const observer = new ResizeObserver(entries => {
        console.log('Container size:', entries[0].contentRect);
      });

      observer.observe(ref.current);
      return () => observer.disconnect();
    }
  }, []);

  return <div ref={ref}>Resize me!</div>;
}

  在这个例子中，我们使用useLayoutEffect来创建一个ResizeObserver，它会在容器大小变化时同步通知我们。