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 的渲染。
