React16 useEffect和useLayoutEffect的区别

目录

useEffect是什么？有什么作用？

useLayoutEffect是什么？有什么作用？

两者区别是什么？

useEffect的使用场景

useLayoutEffect的使用场景

---

useEffect是什么？有什么作用？

该 Hook 接收一个包含命令式、且可能有副作用代码的函数。在函数组件主体内（这里指在 React 渲染阶段）改变 DOM、添加订阅、设置定时器、记录日志以及执行其他包含副作用的操作都是不被允许的，因为这可能会产生莫名其妙的 bug 并破坏 UI 的一致性。使用 useEffect 完成副作用操作。赋值给 useEffect 的函数会在组件渲染到屏幕之后执行。你可以把 effect 看作从 React 的纯函数式世界通往命令式世界的逃生通道。

useLayoutEffect是什么？有什么作用？

其函数签名与 useEffect 相同，但它会在所有的 DOM 变更之后同步调用 effect。可以使用它来读取 DOM 布局并同步触发重渲染。在浏览器执行绘制之前，useLayoutEffect 内部的更新计划将被同步刷新。

两者区别是什么？

useEffect是在渲染时是异步执行，并且要等到浏览器将所有变化渲染到屏幕后才会被执行。在本次更新完成后，再开启一个任务调度，在下次任务调度中执行。

useLayoutEffect是和componentDidMount，componentDidUpdate 执行时机一样，并且是同步执行的。也就是说是在浏览器将所有变化渲染到屏幕之前执行的。

useEffect的使用场景

一般情况，把初始化请求放在useEffect。因为useLayoutEffect的执行时机和componentDidMount，componentDidUpdate一样，他其中的代码可能会导致代码长时间执行，导致页面无法渲染从而卡顿。所以一般情况下，我们会把初始化请求放在useEffect中，这样保证不会影响本次页面的渲染，性能更高一些。

useLayoutEffect的使用场景

有DOM操作时使用useLayoutEffect。

DOM 执行useLayoutEffect是在浏览器将虚拟dom元素真实地更新到屏幕之前执行的，在useLayoutEffect中改变dom，其实就是在之前生成的虚拟dom树上更新修改，然后再渲染到屏幕上，这样还是只有一次回流、重绘。

如果放在 useEffect 里，useEffect 的函数会在组件渲染到屏幕之后执行（已经回流重绘一次），此时对 DOM 进行修改，会触发浏览器再次进行回流、重绘，增加了性能上的损耗。

 

参考文献：

https://www.jianshu.com/p/222a8c129996

https://www.cnblogs.com/chenzxl/p/13091478.html

https://blog.csdn.net/wlqdbtx/article/details/103625218

https://www.cnblogs.com/iheyunfei/p/13065047.html