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

相关推荐
dal118网工任子仪1 小时前
93,【1】buuctf web [网鼎杯 2020 朱雀组]phpweb
android·前端
赛博末影猫2 小时前
Spring理论知识(Ⅴ)——Spring Web模块
java·前端·spring
GISer_Jing3 小时前
DeepSeek 阐述 2025年前端发展趋势
前端·javascript·react.js·前端框架
prince_zxill3 小时前
RESTful 架构原则及其在 API 设计中的应用
前端·javascript·架构·前端框架·restful
禁默3 小时前
【学术投稿-2025年计算机视觉研究进展与应用国际学术会议 (ACVRA 2025)】从计算机基础到HTML开发:Web开发的第一步
前端·计算机视觉·html
Anlici5 小时前
强势DeepSeek——三种使用方式+推理询问指令😋
前端·人工智能·架构
geovindu5 小时前
D3.js Org Chart
开发语言·javascript·ecmascript
疋瓞5 小时前
excel实用问题:提取文字当中的数字进行运算
java·javascript·excel
CodeClimb6 小时前
【华为OD-E卷 - 任务最优调度 100分(python、java、c++、js、c)】
java·javascript·c++·python·华为od
Chaoran6 小时前
vue3 封装右键菜单组件
前端·javascript