主要区别
useLayoutEffect是useEffect的一个版本，两者最主要的区别是，执行时机。
详细解释
useEffect是异步宏任务，在下一轮事件循环才会执行。而GUI渲染和JS线程是互斥的，也就是说，在Effect 运行前，浏览器就已经进行了屏幕渲染，渲染完毕后，useEffect才会被任务队列取出来，开始执行。
useLayoutEffect是同步任务，在页面重新绘制前就会执行内部的回调函数，会阻塞页面的渲染。
useLayoutEffect的使用场景
在浏览器重绘前计算布局（官网以toolTip组件为例）
const ref = useRef(null);
const [tooltipHeight, setTooltipHeight] = useState(0); // 你还不知道真正的高度
useLayoutEffect(() => {
const { height } = ref.current.getBoundingClientRect();
setTooltipHeight(height); // 现在重新渲染，你知道了真实的高度
}, []);
// ... 在下方的渲染逻辑中使用 tooltipHeight ...
}
