React setState 异步原理?

本文深入探讨React中setState的机制,并非简单的异步调用,而是通过批量更新实现高效状态管理。详细解析了更新队列、批量更新的触发条件及工作流程,帮助读者理解React的事件处理和状态更新策略。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

React setState 是异步的?

名词解释

React: 懒得解释
setState: 懒得解释
异步: 懒得解释
ReactDom: 懒得解释

一、不是异步的 异步效果叫批量更新

  1. 不绕弯 不是异步
  2. 而看似异步的效果 实际上是由react的批量更新导致的
  3. 单对setState 这个方法来说则是负责创建更新 批不批量跟他没关系 不是异步的

React中对于更新的管理是通过UpdateQueue(更新队列) 管理的。是一个Priority Queue(有优先级的更新队列)。

setState 的作业就是创建一个update(更新)添加到更新队列里去。

用个简单的例子

代码
image

这里不说 打印出来的 0 0 0 了

我们看反映到react中的更新队列
image

  • 红框表示setstate创建的更新
  • 蓝框表示更新时传递的数据 payload
  • 绿框表示本次更新前的state初始值baseState

批量更新 相关(怎样触发批量更新的)

而这个批量更新在这块又涉及两个东西

  • dispatchInteractiveEvent$1(交互性的更新,ReactDom中的)
  • dispatchEvent

简单点就是ReactDom Render出来的组件,触发交互性的Event的时候就会(可以理解为触发交互时)

  1. 触发dispatchInteractiveEvent
  2. 然后一顿操作
  3. 触发dispatchEvent
  4. 触发 batchedUpdates 批量更新

batchedUpdates 批量更新里 由来自外面的一个默认值为false的变量isBatchingUpdates 来控制是否批量更新

在batchedUpdates中先将isBatchingUpdates 赋值为true。

然后开始执行触发这个Event的 handle 也就是我们自己编写的要干的事情 对应 图中代码handleClick;

最终在isBatchingUpdates ===true的环境中 执行3次setState将更新添加到更新队列(UpdateQueue)里

什么时候更新呢?
image

batchedUpdates 里一个try{}finally{}在最终handle执行完后执行同步更新performSyncWork().

表现出来就是 异步的 效果 批量更新。

好理解点可以将这种EventHandle处理函数看成最终会转换成这样 当然是错误的但是有利理解
在这里插入图片描述
是不是有胆眼熟?
是不是经常将setState写到方法最后

划重点

更新队列

批量更新

ReactDom中的 交互性质的Event dispatchEvent触发批量更新

总结

与其说React setState 异步 不如 说react中的事件触发的更新会攒在一起批量更新

欢迎交流 修正 建议

一入前端深似海 学海无涯 回头是岸 ……

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值