【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 分钟前
CSS进阶指南:深入解析选择器优先级与继承机制
前端·css
工边页字12 分钟前
为什么 RAG系统里,Embedding成本往往远低于 LLM成本,但很多公司仍然疯狂优化 Embedding?
前端·人工智能·后端
用户28145125499213 分钟前
迷你React手写系列-React基本概念
react.js
墨渊君14 分钟前
OpenClaw 上手实践: 使用 Docker 从构建到可用全流程指南
前端·agent
冰暮流星15 分钟前
javascript之回调函数
开发语言·前端·javascript
米丘20 分钟前
Rollup 打包工具
前端
We་ct20 分钟前
LeetCode 74. 搜索二维矩阵:两种高效解题思路
前端·算法·leetcode·矩阵·typescript·二分查找
moneyinto21 分钟前
Three.js 必背核心方法
前端
wuhen_n23 分钟前
Vue3 组件中的图片懒加载与渐进式加载
前端·javascript·vue.js
叫回忆23 分钟前
elpis的npm抽离与发布
前端·javascript