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>);
};

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

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