使用useLayoutEffect钩子函数

在React v16.8版本正式引入了新的钩子函数useEffect，它解决了React函数组件中没有类组件componentDidMount等生命周期函数的问题。而useLayoutEffect则解决了在useEffect钩子函数中出现某些副作用的问题。

1. useLayoutEffect的作用

useLayoutEffect与useEffect的使用方式基本相同，但两者执行的时机不同。useLayoutEffect钩子函数的执行时机在DOM更新之前，即浏览器layout之前。因此，它适合用于需要操作DOM的副作用（如测量DOM节点大小和位置，手动操作DOM元素）

2. 用法

import React, { useLayoutEffect } from "react";

function Component() {
  const [rect, setRect] = React.useState({});

  useLayoutEffect(() => {
    setRect(document.querySelector("#myDiv").getBoundingClientRect());
  }, []);

  return (
    <div>
      <div ref={(el) => (myDiv = el)} id="myDiv">
        Hello World
      </div>
      <h1>The div is {rect.width}px wide</h1>
    </div>
  );
}

上述代码中，useLayoutEffect在Component组件中的声明周期中只执行一次，获取myDiv的尺寸信息，并将其保存到状态中。后续渲染h1标签时，能够显示myDiv元素的宽度。

3. 注意事项

由于useLayoutEffect会阻塞渲染，因此它的执行函数应该足够快，以避免对应用性能的影响。此外，它也不应在服务端渲染应用中使用。因为useLayoutEffect不会在服务器环境中渲染，因此不能保证客户端和服务器上的呈现一致性。

4. 总结

useLayoutEffect钩子函数是React v16.8版本新增的一种钩子函数，用于在DOM更新之前处理副作用。它的使用方式非常类似于useEffect，只不过执行时间不同。虽然它可以让我们在处理DOM相关副作用时更加方便，但应该注意它的执行函数应该足够快。