react Hooks之useLayoutEffect和useInsertionEffect

在介绍这两个hooks之前。让我们先对比一下useEffect、useLayoutEffect、useInsertionEffect

1. 执行时机：

   • useEffect 在组件渲染完成后执行，属于异步执行。
   • useInsertionEffect 在组件渲染并插入 DOM 后执行，也属于异步执行。
   • useLayoutEffect 在组件渲染完成后立即同步执行，并在浏览器布局和绘制之前运行。

2. 对 DOM 元素的访问：

   • 使用 useEffect 时，无法直接访问具体的 DOM 元素。
   • 使用 useInsertionEffect 时，可以通过传递 ref 引用来获取对特定 DOM 元素的引用，并在回调函数中进行操作。
   • 使用 useLayoutEffect 时，也可以通过 ref 获取对 DOM 元素的引用，并在组件渲染完成后立即同步执行副作用操作。

3. 影响浏览器渲染的时机：

   • useEffect 和 useInsertionEffect 的执行时机都是在浏览器渲染之后，不会阻塞页面的渲染过程。
   • useLayoutEffect 的执行是同步的，并且在浏览器布局和绘制之前运行，因此如果其中的副作用操作比较耗时，可能会阻塞浏览器的渲染过程，导致用户界面的卡顿

一、useLayoutEffect

1、作用：

它在组件完成渲染后同步执行副作用操作，并在浏览器布局和绘制之前运行。它与 useEffect 的使用方式类似，但在执行时机上有所不同。

具体来说，useLayoutEffect 的执行时机如下：

1. 在组件渲染完成后立即执行。
2. 在浏览器执行布局和绘制之前运行，以确保在浏览器更新屏幕之前执行副作用操作。

这意味着 useLayoutEffect 会在 DOM 更新之后、浏览器绘制之前同步执行，使得其副作用操作能够立即对 DOM 进行更改，而这些更改可能会影响到浏览器的布局和绘制。

2、注意事项

由于 useLayoutEffect 的执行是同步的，如果其中的副作用操作比较耗时，会阻塞浏览器的渲染过程，导致用户界面的卡顿。因此，在使用 useLayoutEffect 时，应该谨慎处理副作用操作的性能问题。

3、用法：同useEffect类似，一个回调函数，一个依赖项。

4、示例

import { useLayoutEffect, useRef } from 'react';

function Example() {
  const ref = useRef(null);
  const [count, setCount] = useState(0);

  useLayoutEffect(() => {
    console.log('useLayoutEffect - Component rendered:', ref.current);
    ref.current.style.backgroundColor = 'red';
    
    return () => {
      console.log('useLayoutEffect cleanup');
    };
  }, [count]);

  return (
    <div>
      <div ref={ref}>Hello World</div>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

在这个例子中，我们创建了一个 ref 引用，用于访问 DOM 元素。在 useLayoutEffect 的回调函数中，我们可以通过 ref.current 获取到对应的 <div> 元素，并设置其背景颜色为红色。此外，我们还在 deps 参数中传递了 count 状态，表示只有当 count 发生变化时才执行副作用操作。

二、useInsertionEffect

1、作用

它用于在组件渲染并插入 DOM 后执行副作用操作。与 useEffect 和 useLayoutEffect 不同，useInsertionEffect 的回调函数会在浏览器完成对 DOM 元素的插入操作后才运行。

2、用法

和useEffect类似，不具体说明

3、注意事项：

由于 useInsertionEffect 的回调函数是在浏览器完成对 DOM 元素的插入操作后才运行，因此可以在其中直接访问具体的 DOM 元素。这与 useEffect 和 useLayoutEffect 不同，它们无法直接访问具体的 DOM 元素。因此，在处理需要访问具体 DOM 元素的副作用操作时，可以优先考虑使用 useInsertionEffect。

4、示例：

import { useInsertionEffect, useRef } from 'react';

function Example() {
  const ref = useRef(null);
  const [count, setCount] = useState(0);

  useInsertionEffect(() => {
    console.log('useInsertionEffect - Component inserted:', ref.current);
    ref.current.style.backgroundColor = 'red';
    
    return () => {
      console.log('useInsertionEffect cleanup');
    };
  }, [count]);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Click me</button>
      <div ref={ref}>Hello World</div>
    </div>
  );
}

在这个例子中，我们创建了一个 ref 引用，用于访问 DOM 元素。在 useInsertionEffect 的回调函数中，我们可以通过 ref.current 获取到对应的 <div> 元素，并设置其背景颜色为红色。此外，我们还在 deps 参数中传递了 count 状态，表示只有当 count 发生变化时才执行副作用操作。