【React】useLayoutEffect、useInsertionEffect

useLayoutEffect

useLayoutEffect和useEffect有什么区别呢?

useEffect的cb,准确来说,是异步调用的,会等主线程任务执行完成,D0M更新,JS执行完成,视图绘制完成,才执行。

useLayoutEffect的cb,是同步执行的,执行时机是DOM更新之后,视图绘制完成之前,这个时间可以更方便的修改 DOM。

如果要改 DOM, 用useLayoutEffect, 其他都用useEffect 。

useInsertionEffect

useInsertionEffect比useLayoutEffect更早。useInsertionEffect 执行时,DOM还没有更新。

本质上useInsertionEffect主要是解决 css-in-js 在渲染中注入样式的性能问题。

哪个和componentDidMount、componentDidUpdate更类似

componentDidMount、componentDidUpdate是同步的,所以useLayoutEffect更类似。

相关推荐
草字2 小时前
uniapp 打开横竖屏。usb调试时可以横竖屏切换,但是打包发布后却不行?
java·前端·uni-app
SEO-狼术2 小时前
Stimulsoft Reports.JS 2025
开发语言·javascript·ecmascript
EF@蛐蛐堂2 小时前
Federation vs Garfish vs Micro-app 微前端选型(二)
前端·vue.js·前端框架
洋不写bug2 小时前
前端html基础标签
前端·html
GISer_Jing3 小时前
前端学习总结——AI&主流前沿方向篇
前端·人工智能·学习
渣哥3 小时前
用错注入方式?你的代码可能早就埋下隐患
javascript·后端·面试
尘世中一位迷途小书童3 小时前
Monorepo 工具大比拼:为什么我最终选择了 pnpm + Turborepo?
前端·架构
一枚前端小能手3 小时前
🔍 重写vue之ref和reactive
前端·javascript·vue.js
星链引擎3 小时前
4sapi.com开发者进阶版(技术导向,侧重 “原理 + 最佳实践”)
前端
尘世中一位迷途小书童3 小时前
2025年了,你还在用传统的多仓库管理吗?Monorepo 架构深度解析
前端·架构