useEffect 和 useLayoutEffect浅析

2023-10-18 生活百科

执行时期的区别useEffect 回调函数的执行时期useEffect为异步执行，执行时期为

触发状态更新（如：setState，forceUpdate）
React渲染函数执行（render）
将更新渲染到页面上
执行useEffect回调函数

useLayoutEffect 回调函数的执行时期

触发更新
React渲染函数执行
同步执行 useLayoutEffect回调函数 (如果此函数中存在触发更新操作，如setState，会放弃本阶段的页面渲染，先执行更新然后再统一进行渲染)
将更新渲染到页面上

对比后得到两者区别

执行时期的区别，useEffect回调是在更新渲染到页面以后异步执行而 useLayoutEffect是在更新渲染在页面前同步执行。造成的影响是，useLayoutEffect 回调中如果有耗时操作会阻塞页面的渲染，造成性能问题。
两者中如果调用setState更新状态，都会再次执行render ，区别是 useEffect会进行两次页面更新渲染，useLayoutEffect只会执行最后一次页面更新渲染。所以，看到的结果是使用useEffect时候执行更新页面上会出现闪烁，而useLayoutEffect确不会
useLayoutEffect 的执行时期同 class组件生命周期 componentDidMount 和 componentDidUpdate

所以，得出的结论是，大多数的场景中都应该使用useEffect来实现我们的逻辑，仅仅在一些特殊情况，比如需要去监听同步更新状态防止页面煽动时才需要useLayoutEffect 。
【useEffect 和 useLayoutEffect浅析】

推荐阅读

上一篇：在Tomcat中启用虚拟线程特性

下一篇：不安装运行时运行 .NET 程序 - NativeAOT