【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更类似。

相关推荐
余生H21 分钟前
前端Python应用指南(二)深入Flask:理解Flask的应用结构与模块化设计
前端·后端·python·flask·全栈
outstanding木槿25 分钟前
JS中for循环里的ajax请求不数据
前端·javascript·react.js·ajax
酥饼~32 分钟前
html固定头和第一列简单例子
前端·javascript·html
一只不会编程的猫35 分钟前
高德地图自定义折线矢量图形
前端·vue.js·vue
所以经济危机就是没有新技术拉动增长了36 分钟前
二、javascript的进阶知识
开发语言·javascript·ecmascript
m0_7482509337 分钟前
html 通用错误页面
前端·html
来吧~1 小时前
vue3使用video-player实现视频播放(可拖动视频窗口、调整大小)
前端·vue.js·音视频
Bubluu1 小时前
浏览器点击视频裁剪当前帧,然后粘贴到页面
开发语言·javascript·音视频
魔术师卡颂1 小时前
最近看到太多 cursor 带来的焦虑,有些话想说
前端·aigc·openai
鎈卟誃筅甡1 小时前
Vuex 的使用和原理详解
前端·javascript