本人已参与「新人创作礼」活动，一起开启掘金创作之路。
useLayoutEffect和useEffect有什么区别
在react hooks中的生命周期，有两个。useEffect和useLayoutEffect。
当然，一般情况下我们都是使用useEffect。官网也不推荐我们使用useLayoutEffect。useEffect基本上就可以满足绝大部分的业务需求。
为什么连官网都不推荐使用useLayoutEffect？
最主要的原因。因为这个生命周期，它是同步的，这也就意味着，它会阻塞react组件的渲染。那么当我们的useLayoutEffect中有非常耗时的操作时。组件加载会变慢甚至闪烁。
useEffect和useLayoutEffect的区别是什么？
- useEffect是异步执行的，也就是说，useEffect里面的代码，会等整个react组件渲染完毕之后，再去执行。
- useLayoutEffect是同步执行的，useLayoutEffect会在DOM构建完毕之后，但是在DOM被渲染到浏览器上面之前执行。和componentDidMount是等价的
useLayoutEffect存在的有意义吗？
好像，日常开发中，我们几乎都在使用useEffect，好像useEffect就完全足够满足需求了。
那useLayoutEffect是不是没啥用了。是不是在未来就会被遗弃了？
还真不会。
说起来你可能不信，真有适用于useLayoutEffect的场景。
比如，当我们需要对DOM进行初始化操作的时候。
举个例子：👇
假设元素A的CSS坐标是（left:100px,top:100px）
但是我们希望它在初始化的时候将位置改变到（left:500px,top:500px），我们只能在生命周期中操作。
如果使用useEffect,那么我们就会看见：元素A先出现在了（left:100px,top:100px）这个位置，然后一下子闪烁到（left:500px,top:500px）这个位置。
因为：useEffect是异步函数，所以A元素会优先被渲染到（left:100px,top:100px）这个位置上，然后useEffect再去执行。这个时候，再去改变元素A的位置。这个时候浏览器就会将在（left:100px,top:100px）这个位置上的元素A抹除掉，然后将元素A渲染到（left:500px,top:500px）这个位置上。所以就会出现我们所说的闪烁问题。
但使用useLayoutEffect就不一样了。
因为useLayoutEffect是同步执行的，也就是在DOM构建之后，浏览器渲染之前。
再以元素A为例，原先位置（left:100px,top:100px）,我们在useLayoutEffect中改变元素A的位置到（left:500px,top:500px）。那么，因为useLayoutEffect在渲染之前执行，所以元素A在被绘制到（left:100px,top:100px）这个位置之前就会被改变位置为（left:500px,top:500px）。所以也就不会在（left:100px,top:100px）这个位置被初始化绘制。一开始就会直接被绘制到（left:500px,top:500px），也就不会有闪屏现象。
总结
- useEffect是异步执行的，不会阻塞渲染
- useLayoutEffect是同步执行的，他会在DOM构建之后，视图渲染之前执行，所以会阻塞渲染
- 一般情况下使用useEffect,有对DOM的初始化操作时，使用useLayoutEffect
- useLayoutEffect和componentDidMount是等价的
欢迎技术沟通，摸鱼聊天～
备注来自掘金～
wx:XXF1096032096
