经验总结

  1. 首页 > 生活 > >

useEffect 和 useLayoutEffect浅析

生活百科

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

  • 触发状态更新（如：setState，forceUpdate）
  • React渲染函数执行（render）
  • 将更新渲染到页面上
  • 执行useEffect回调函数
useLayoutEffect 回调函数的执行时期
  • 触发更新
  • React渲染函数执行
  • 同步执行 useLayoutEffect回调函数 (如果此函数中存在 触发更新操作，如setState，会放弃本阶段的页面渲染，先执行更新然后再统一进行渲染)
  • 将更新渲染到页面上
对比后得到两者区别
  • 执行时期的区别，useEffect回调是在更新渲染到页面以后异步执行 而 useLayoutEffect是在更新渲染在页面前同步执行 。造成的影响是，useLayoutEffect 回调中如果有耗时操作会阻塞页面的渲染，造成性能问题 。
  • 【useEffect 和 useLayoutEffect浅析】两者中如果调用setState更新状态，都会再次执行render，区别是 useEffect会进行两次页面更新渲染，useLayoutEffect只会执行最后一次页面更新渲染 。所以，看到的结果是使用useEffect时候执行更新页面上会出现闪烁，而useLayoutEffect确不会
  • useLayoutEffect 的执行时期 同 class组件生命周期 componentDidMount 和 componentDidUpdate
所以，得出的结论是，大多数的场景中都应该使用useEffect来实现我们的逻辑，仅仅在一些特殊情况，比如需要去监听同步更新状态防止页面煽动时才需要useLayoutEffect 。

    经验总结扩展阅读


    上一篇：三峡中最长的峡是什么

    下一篇：如何检查子宫内膜炎