useEffect和useLayoutEffect的区别

它们两个的区别主要是执行时机的不一样，要理解执行时机。首先我们来了解下浏览器的执行流程，dom树和cssom树合并为render树之后，后面的流程概括来说就是layout布局，和paint（绘制，就把最后布局好的树画在屏幕视图上）。

这里直接揭晓答案，useLayoutEffect是在layout之后，paint之前执行的。用人话来描述就是DOM更新之后，浏览器绘制之前。而useLayoutEffect是paint之后执行的。

看官网还说过useLayoutEffect是同步执行的，useEffect是异步执行的。同步执行，意味着会阻塞浏览器重新绘制屏幕。

useLayout的使用场景:

1. 官网的例子是在浏览器重新绘制屏幕前计算布局，举了一个绘制tooltip的例子。同理，我们也可以想到，只要是与获取元素位置有关的功能的时候，都可以用到useLayoutEffect，但是要注意一点，计算量不能太大，要不会阻塞渲染，有延迟。

2. 如果有时候不想要页面闪烁那一下就把useEffect改成useLayoutEffect。

 

参考：

【react】useEffect VS useLayoutEffectTLDR; useLayoutEffect 和 u - 掘金 (juejin.cn)