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

相关推荐
初辰ge1 分钟前
做个大屏既要不留白又要不变形还要没滚动条,我直接怒斥领导,大屏适配就这四种模式
前端·javascript
Face4 分钟前
路由Vue-router 及 异步组件
前端·javascript·vue.js
Nano5 分钟前
Axios 进阶指南:掌握请求取消与进度监控的艺术
前端
工呈士5 分钟前
Context API 应用与局限性
前端·react.js·面试
ArcX5 分钟前
从 JS 到 Rust 的旅程
前端·javascript·rust
钟看不钟用5 分钟前
React(1)——渲染完整流程
react.js
胡gh6 分钟前
深入理解React,了解React组件化,脱离”切图崽“,迈向高级前端开发师行列
前端·react.js
技术小丁7 分钟前
使用 HTML + JavaScript 实现自定义富文本编辑器开发实践(附完整代码)
前端·javascript·html
Alla T32 分钟前
【前端】缓存相关
前端·缓存