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

相关推荐
AndyGoWei3 分钟前
Web Worker 简单使用,看这篇文章就够了
javascript
tianchang4 分钟前
React Hook 解析(一):useCallback 与 useMemo
前端·react.js
炊烟行者6 分钟前
foreignObject
前端
OEC小胖胖18 分钟前
组件化(一):重新思考“组件”:状态、视图和逻辑的“最佳”分离实践
前端·javascript·html5·web
拾光拾趣录20 分钟前
用 Web Worker 计算大视频文件 Hash:从“页面卡死”到流畅上传
前端·javascript
伟大的兔神37 分钟前
cesium绘制动态柱状图
前端·gis·cesium
前端拿破轮41 分钟前
字节面试官:你对Promise很熟是吧?试一下手写所有静态方法
前端·面试·promise
一颗奇趣蛋43 分钟前
React- useMemo & useCallback
前端·react.js
索西引擎44 分钟前
HTML5 新特性:MutationObserver 详解
javascript
洛千陨1 小时前
Web Worker基础概念 & 图片滤镜处理实际应用 -- Vue3
javascript·vue.js