useEffect和useLayoutEffect区别

如果你熟悉 React class 的生命周期函数，你可以把 useEffect Hook 看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。

与 componentDidMount 或 componentDidUpdate 不同，使用 useEffect 调度的 effect 不会阻塞浏览器更新屏幕，这让你的应用看起来响应更快。大多数情况下，effect 不需要同步地执行。在个别情况下（例如测量布局），有单独的 useLayoutEffect Hook 供你使用，其 API 与 useEffect 相同。

useLayoutEffect 与 useEffect 相同，但它会在所有的 DOM 变更之后同步调用 effect。可以使用它来读取 DOM 布局并同步触发重渲染。在浏览器执行绘制之前，useLayoutEffect 内部的更新计划将被同步刷新。

尽可能使用标准的 useEffect 以避免阻塞视觉更新。

提示

如果你正在将代码从 class 组件迁移到使用 Hook 的函数组件，则需要注意 useLayoutEffect 与 componentDidMount、componentDidUpdate 的调用阶段是一样的。但是，我们推荐你一开始先用 useEffect，只有当它出问题的时候再尝试使用 useLayoutEffect。

const BlinkyRender = () => {const [value, setValue] = useState(0);useLayoutEffect(() => {if (value === 0) {setValue(10 + Math.random() * 200);}}, [value]);console.log('render', value);return (<div onClick={() => setValue(0)}>value: {value}</div>);
};

当点击div时，状态立即改变(value重置为0)，这将重新Render组件，然后运行Effect——将值设置为某个随机数，并再次重新Render。

也就是是两次Rerender会快速连续发生。分别换用useLayoutEffect和useEffect观察有什么不同。

你会发现useLayoutEffect的版本会在组件render两次的情况下仅在视觉上更新一次。而useEffect版本在视觉上也会呈现两次，所以会看到闪烁，从0闪烁变成对应的随机数。

useEffect和useLayoutEffect区别相关推荐

[react] useEffect和useLayoutEffect有什么区别？
[react] useEffect和useLayoutEffect有什么区别? useEffect是异步的,所谓的异步就是利用requestIdleCallback,在浏览器空闲时间执行传入的call ...
useEffect和useLayoutEffect的区别
react hook面世已经有一段时间了,相信很多人都已经在代码中用上了hooks.而对于 useEffect 和 useLayoutEffect,我们使用的最多的应该就是useEffect.那他们两 ...
useEffect与useLayoutEffect
useEffect与useLayoutEffect useEffect与useLayoutEffect可以统称为Effect Hook,Effect Hook可以在函数组件中执行副作用操作,副作用是指 ...
如何使 React 中的 useEffect、useLayoutEffect 只调用一次
如何使 React 中的 useEffect.useLayoutEffect 只调用一次 Hook 是 React 16.8 的新增特性,旨在替代原来 React 中的 Class 组件.Reac ...
React学习笔记6：React Hooks API总结
useState-保存状态(惰性初始化) 作用函数组件添加状态注意事项初始化以及更新state 用来声明状态变量使用步骤(使用useState来创建状态) 引入import React,{us ...
帷幄匠心面试题一面
querySelectorAll 和 getElementsByClassName 区别浏览器绘制的过程,布局计算是哪个阶段如何跨域传递cookie 什么是跨域 == 和 === 区别 js 类型 ...
_improve-3
createElement过程 React.createElement(): 根据指定的第一个参数创建一个React元素 React.createElement(type,[props],[...ch ...
react全家桶实战（千峰教育）
说明:本笔记为本人基于千锋教育2022版React全家桶教程_react零基础入门到项目实战完整版的学习笔记,知识点不清或不全,可以到视频教程中学习文章目录一.安装create-react-app ...
2年前端(外包经历) 6月部分面试记录（高级、资深岗位）
本人一年小公司,2年前端大厂外包经历,坐标杭州,记录6月份部分面试记录,还有一部分忘的太多没记录. 讯盟科技 (拿offer) "我自己是一名从事了6年web前端开发的老程序员,今年年初我 ...

useEffect和useLayoutEffect区别

useEffect和useLayoutEffect区别相关推荐

最新文章

热门文章