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

相关推荐
程序员爱钓鱼8 分钟前
Rust Associated Type关联类型详解:为Trait定义内部类型
前端·后端·rust
zh_xuan1 小时前
个人主页左侧菜单支持分组,以及菜单显示和隐藏
前端·javascript·css
Ming_studying1 小时前
HTML + CSS + JavaScript实现可视化JSON工具:格式化、折叠、搜索与错误定位
javascript·css·html·json·数据可视化·web工具
zzzzzz3102 小时前
react-bits:酷炫组件之外,React 页面表现力真正该怎么借力?
react.js·开源·动效
Emily156853598704 小时前
Emerson 1C31129G03 Analog Input Module
java·开发语言·前端·plc·emerson·1c31129g03·input module
To_OC9 小时前
面试被问了三回三栏布局,这次我终于把 BFC 那层窗户纸捅破了
前端·css·面试
To_OC9 小时前
啃完 TS 工具类型我发现:Pick 和 Omit 原来就是一层窗户纸
前端·面试·typescript
风月说与山鬼11 小时前
三、大括号语法
前端·react.js
kyriewen11 小时前
我把最常踩的8个CORS跨域报错整理了一遍——第8个去年还不存在
前端·javascript