useLayoutEffect 和 useEffect的区别

664 阅读1分钟

我以为发现新大陆了,感觉LayoutEffect也就那样

  • useLayoutEffect 并不能和 componentWillMount 相提并论
  • 有时我想在第一次render之前就想先请求拿到东西在渲染,这时我当然想起 componentWillMount 但是hook中并没有提供类似的给我……

y1.png

  • useLayoutEffect 的使用方法和 useEffect 相同,唯一的区别就是执行时机不一样,useLayoutEffect 的执行时机要早于 useEffect
  • useLayoutEffectuseEffect函数签名一致,但是在DOM修改后同步触发,这是和useEffect唯一的区别
  • useEffect 会在渲染的内容更新到DOM上后执行,不会阻塞DOM的更新
  • useLayoutEffect 会在渲染的内容更新到DOM上之前进行,会阻塞DOM的更新

总结

    1. useLayoutEffectcomponentDidUpdate触发时机一致(都在在DOM修改后且浏览器渲染之前);
    1. useLayoutEffect要比useEffect更早的触发执行;
    1. useLayoutEffect会阻塞浏览器渲染,切记执行同步的耗时操作

参考文献:segmentfault.com/a/119000002…

参考文献:blog.csdn.net/weixin_4372…

参考文献:blog.csdn.net/weixin_4538…


结语

前端react QQ群:788023830 ---- React/Redux - 地下老英雄

前端交流 QQ群:249620372 ---- FRONT-END-JS前端

(我们的宗旨是,为了加班,为了秃顶……,仰望大佬),希望小伙伴们加群一起学习