useEffect和useLayoutEffect的延迟、同步是什么意思？

最新推荐文章于 2024-03-05 19:47:51 发布
最新推荐文章于 2024-03-05 19:47:51 发布
阅读量179 收藏
点赞数
文章标签： reactjs 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qianduanlixiangg/article/details/133947336
版权

哈喽，大家好呀，我是前端理想哥，今天，我们来聊聊useEffect和useLayoutEffect的延迟和同步的概念。

用过这两个API的同学，应该都知道这两者在执行时机上的区别，还不了解的同学可以详细去看下。

useEffect 的执行时机是组件渲染到屏幕之后延迟执行，而 useLayoutEffect 的执行时机是在所有的DOM变更之后同步调用effect。

今天， 我们重点来聊聊这里的延迟和同步到底是什么意思。

所谓的延迟和同步，其实指的就是react的任务调度。

useEffect中的延迟执行，指的是effect会在组件渲染任务调度函数结束后，再单独调用一次任务调度函数，这样做的好处就是，effect的调用可以单独进行，不会加长组件渲染的任务时间，也就不会阻碍组件的渲染了。

useLayoutEffect的同步，指的是，effect和组件渲染是在一个任务调度内，组件渲染完了后，立马开始同步进行effect的执行了。这样做主要是为了让你可以实现一些需要立即执行的功能，但是会加长组件渲染的任务时间，会阻碍组件的渲染。

所以，大多数情况下，如果不是必须的，还是建议大家使用useEffect，避免对组件更新造成阻塞。

以上，就是所有内容了，我们讲了useEffect和useLayoutEffect的延迟、同步的概念，如果您觉得对您有帮助，欢迎给理想哥一个关注，万分感谢大家

前端理想哥
关注
react之Effect同步
weixin_73918953的博客
05-23 847
与事件不同，Effect是由渲染本身，而非特定交互引起的。Effect允许你将组件与某些外部系统 (第三方API，网络等) 同步默认情况下，Effect在每次渲染 (包括初始渲染) 后运行如果 React 的所有依赖项都与上次渲染时的值相同，则将跳过本次Effect不能随意选择依赖项，他们是由Effect内部代码决定的。空的依赖数组 ([]) 对应于组件 “挂载”，即添加到屏幕上。仅在严格模式下的开发环境中，React会挂载两次组件，以对Effect进行压力测试。
从React源码分析看useEffect
It_kc的博客
11-08 347
useEffect和的区别？useEffect是怎么判断回调函数是否需要执行的？useEffect是同步还是异步？useEffect是通过什么实现异步的？useEffect为什么要要优先选用实现异步？
使用 useEffect 同步修改浏览器 tab 栏中的标题
学习笔记
11-18 539
useEffect 是 componentDidMount + componentDidUpdate 二者的组合： const App = (props) => { const [count, setCount] = useState(props.count); const [text, setText] = useState(""); useEffect(() => { console.log("useEffect ran"); // 修改 tab 的内容
useEffect 完整指南
大灰狼的小绵羊哥哥的博客
11-27 7002
你用Hooks写了一些组件，甚或写了一个小型应用。你可能很满意，使用它的API很舒服并且在这个过程中获得了一些小技巧。你甚至可能写了一些custom Hooks去抽离重复的逻辑（精简掉了300行代码），并且得意地展示给你的同事看，“干得漂亮”，他们如是说。 但有时候当你使用useEffect你总觉得哪儿有点不对劲。你会嘀咕你可能遗漏了什么。它看起来像class的生命周期…但真的是这样吗？你发觉...
React Native 使用useEffect启动的启动页插件
eswang的CSDN博客
11-22 2165
前言 启动页可谓是手机App上很重要的一部分了，目前RN的App启动页插件大部分都是react-native-splash-screen，这个插件确实很不错，但是也是有一些问题存在的，首先这个插件会存在跳屏时白屏的问题，再有就是它的issue区存在不少问题，而且好久没有任何更新了，相比起来，react-native-bootsplash我觉得做的就很好。 安装配置 之所以选择这个插件的原因就是根据...
React中的useEffect(副作用)
weixin_47075145的博客
11-16 4207
useEffect是用来使函数组件也可以进行副作用操作的。那么什么是副作用呢？函数的副作用就是函数除了返回值外对外界环境造成的其它影响。举个例子，假如我们每次执行一个函数，该函数都会操作全局的一个变量，那么对全局变量的操作就是这个函数的副作用。而在React的世界里，我们的副作用大体可以分为两类，一类是调用浏览器的API，例如使用addEventListener来添加事件监听函数等，另外一类是发起获取服务器数据的请求，例如当用户组件挂载的时候去异步获取用户的信息等。
useEffect 和 useLayoutEffect 的区别是什么
09-10
useLayoutEffect和useEffect的触发时机基本一致，但它是同步执行的副作用钩子。useLayoutEffect的回调函数会在组件渲染后同步执行，并在浏览器绘制之前结束。因此，如果在useLayoutEffect中进行一些修改DOM的操作，...
useeffect和uselayouteffect
09-16
useEffect是延迟执行的副作用钩子函数，而useLayoutEffect是同步执行的副作用钩子函数。根据具体场景的需求，选择合适的钩子函数可以更好地处理副作用逻辑。 ### 回答3： useEffect和useLayoutEffect都是React中的...
浅谈useEffect
Hay-Zero的博客
12-31 2135
作用 useEffect接收一个函数，可以让用户在函数组件中执行副作用操作，如： 设置订阅和事件处理 ajax请求等异步操作 更改DOM对象及其他会对外部产生影响的操作等 使用方式 useEffect(create[, deps]); 第一个参数是要执行的 effect，而第二个参数是依赖项，依赖项是选填的。 例如 function App() { useEffect(() => { document.title = 'example'; // 副作用操作 }); retur
react中useEffect和userLayoutEffect执行先后
07-04
在React中，useEffect和useLayoutEffect都可以用于在组件渲染后执行副作用操作，但它们在执行时机上有一些区别。 useEffect会在组件渲染之后异步执行，不会阻塞浏览器的渲染过程。这意味着它的执行会延迟到浏览器...
重新认识 React Hooks useEffect （2）
https://shixuebin.gitee.io/hexo-blog/
01-29 328
首先介绍两个概念，纯函数和副作用函数纯函数（ Pure Function ）对于相同的输入，永远会得到相同的输出，而且没有任何可观察的副作用，这样的函数被称为纯函数。副作用函数（ Side effect Function ）如果一个函数在运行的过程中，除了返回函数值，还对主调用函数产生附加的影响，这样的函数被称为副作用函数。（比如修改了函数外面的变量）
useEffect()的使用
ts13_n的博客
05-11 855
useEffect()的使用 第二个参数 当不需要useEffect()每次渲染都执行时，可在第二个参数中，用一个数组指定副效应函数的依赖项，只有当依赖项发生变化时，才能重新渲染。 但如果当第二个参数是一个空数组[]时，就表明副效应参数没有任何依赖项。因此只有在第一次加载进入DOM时(即第一次渲染时)，才会调用useEffect()，这样就相当于初始化函数使用。 返回值 副效应随着组件的加载而发生。当组件卸载时，可以根据需求清理这些副效应。可通过返回一个函数，来清理副效应 ...
RN开发搬砖经验之—在React 函数式组件别一把梭useState得考虑下useRef
最新发布
技术的学习与积累是个技术活
03-05 1136
最近在fix一些bug中，发现不少代码是函数式组件中不区别场景，任何函数式组件中的变量都是使用useState，然后没有考虑到useState是异步更新值的，导致各种离奇的BUG出现！；另外看到相关代码中出现大量的setTimeout操作，估计想用它来规避useState是异步更新值的特型，这种情况下代码就更容易出bug，也很难维护！当使用 useState 时，我们如果不正确地处理异步操作，可能会导致意料之外的行为。
rn 函数式组件获取子组件的实例
宏斌的博客
06-01 2463
class式组件要获取子组件的实例只要用ref就可以了，但是函数式组件就要复杂一点 函数式组件要给子组件直接绑定ref是不成功的，要求子组件使用forward创建才可以，如下 const ChildRefScreen = () => { const _a = useRef(null) return ( <View style={{ paddingTop: 40 }}> <A ref={_a} /> </View> ) } c
useEffect使用的介绍
前端精髓
08-23 5040
如果你熟悉 React class 的生命周期函数，你可以把 useEffect Hook 看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。 实现一个 componentDidMount 的功能 function Demo () { useEffect(() => { consol...
React中useEffect使用
热门推荐
文摘资讯
08-24 1万+
之前我们已经掌握了useState的使用，在 class 中，我们通过在构造函数中设置this.state为{ count: 0 }来初始化countstat...
ReactNative 计时器组件 - RN
survivorsfyh的博客
03-28 1156
初识 ReactNative 正巧项目中遇到了一个计时器的需求，官方没有找到提供现成的组件便尝试着用钩子方式（useState、useEffect）简单封装了个小组件，具体如下： 首先，将时间进行转换处理并与钩子相互关联 const [span, setSpan] = useState(Math.floor((Date.now() - new Date(start.replace(/-/g,...
react使用useEffect出现疯狂请求
furfur-jiang的博客
10-20 4385
错误代码： useEffect(()=>{ listApi().then(res=>{ let data = res.data if(data.status!==0){ message.error(data.msg) return } setDataSource(data.object) }) })//后面要写个空数组 以下正确 useEffect(()=>{
使用useEffect的注意事项
前端精髓
04-05 1万+
有时候，你的 effect 可能会使用一些频繁变化的值。你可能会忽略依赖列表中 state，但这通常会引起 Bug： function Counter() { const [count, setCount] = useState(0); useEffect(() => { const id = setInterval(() => { setCount(co...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值