React 中的 useLayoutEffect 钩子函数

useLayoutEffect钩子函数的作用跟useEffect钩子函数的作用一样，它们的不同主要是在于：

1、useEffect钩子函数是异步的，因为此函数在执行的时候是先计算出所有的 Dom 节点的改变后再将对应的 Dom 节点渲染到屏幕上，然而在 useEffect 函数中可能还存在某些还在后台运行的代码，这些后台代码的运行和 Dom 的渲染是互不影响的，所以这样就有可能在页面渲染效果上会有元素抖动的情况发生。

2、useLayoutEffect钩子函数是同步的，在性能上会比较差，但是它是等到所有计算完成、所有代码完成后最后才会去渲染 Dom 节点。

具体实例如下：

const UseLayoutEffectDemo: React.FC = () => {
  const [show, setShow] = useState<boolean>(false);

  const popup = useRef<HTMLDivElement>(null);
  const button = useRef<HTMLButtonElement>(null);

  useEffect(() => {
    if (popup.current === null || button.current === null) {
      return;
    } else {
      const { bottom } = button.current.getBoundingClientRect();
      popup.current.style.top = `${bottom + 25}px`;
    }
  });

  return (
    <div>
      <button ref={button} onClick={() => setShow((prev) => !prev)}>
        切换状态
      </button>
      {show && (
        <div style={{ position: "absolute" }} ref={popup}>
          这是显示内容
        </div>
      )}
    </div>
  );
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

运行上述代码后，当你点击切换状态状态按钮后，这是显示内容的 div 元素会首先在按钮后显示，但是很快就会向下偏移 25px 的距离。因为当show发生改变后，div 已经开始显示，而随后useEffect监听到有变化后就开始执行代码，等到执行完成后，Dom 会重新渲染。这样 div 元素就会有抖动，只是这个抖动发生的很快。

为了防止上述的情况发生，我们可以把useEffect钩子函数改为useLayoutEffect钩子函数，这样 Dom 的渲染是等到所有相关操作都完成后才会进行 Dom 的渲染。