setState是同步还是异步

一:概念

setState 用于变更状态,触发组件重新渲染,更新视图

二:setState是不是异步?

setState不是真异步,而是看上去是异步的,在源码中通过isBacthingPudates判断真异步还是同步。
异步更新:在生命周期,react合成事件中
同步更新:原生事件中,如addEventListener, setTimeout setInterval

三:探究setState的异步更新(批量更新)。会攒在一起更新

在react生命周期或者合成事件中,setState是异步更新,相同的setState只会更新最后一次,render也只render一次。

批量更新机制:

setState更新的时候,会定义一个批量更新对象(updateQueue),其中有一个属性变量标识(batchedUpdates),判断setState所处的环境是react合成事件或生命周期还是与react无关的事件,默认是false。
我们在调用合成事件和生命周期的时候,都会改变这个变量标识为true,React此时就会知道setState在自己掌握中。
那么在setState的时候,会判断该变量标识的值,如果是fasle,也就是setState同步更新,如果是同步,那么直接更新组件。
如果判断是异步,那么react’就会收集setState,也就是收集我们定义的收集器,将我们的setState每个都push到定义的批量更新对象(updateQueue)的数组中,然后等事件函数结束的时候重置这个变量标志,才会取出之前缓存的setState,进行一次执行。(react等待事件处理程序中所有代码运行后在处理state的更新,这可能会让你想起在餐厅点菜的服务员。服务员不会一听到你点的第一道菜就跑到厨房!相反,他们会先让你完成你的订单,让你修改它,甚至接受桌子上其他人的订单。)

设置批量更新队列
在这里插入图片描述
判断是否是批量更新 批量更新就加入到队列中 否则就直接调用
在这里插入图片描述
绑定事件的时候 加上批量处理逻辑
在这里插入图片描述

四:setState异步的意义:

批量更新允许您更新多个 state 变量 —— 甚至来自多个组件 —— 而不会触发太多的重新 render。但这也意味着,在事件处理程序和其中的任何代码完成之前,UI 不会更新。这种行为,也称为批量处理,使你的 React 应用运行得更快。它还避免了处理令人困惑的“半成品”呈现,只有其中的一些变量被更新。
React 不会跨多个意图事件(如单击)进行批量处理 —— 每个单击都是单独处理的。请放心,React 只在一般情况下是安全的情况下进行批量处理。这可以确保比如,如果第一次单击按钮禁用了一个表单,那么第二次单击不会再次提交它。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值