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

你可能感兴趣的:(React)