React中的setState是同步还是异步

setState 同步还是异步?

setState本事代码的执行肯定是同步的,这里的异步是指的多个state会合并到一起进行批量更新。同步还是异步取决于它被调用的环境。

异步的情况:

由React控制的事件处理函数,以及生命周期函数调用setState时表现为异步 。
大部分开发中用到的都是React封装的事件,比如onChange、onClick、onTouchMove等(合成事件中),这些事件处理函数中的setState都是异步处理的。

同步的情况:

React控制之外的事件中调用setState是同步更新的。
比如原生js绑定的事件,setTimeout/setInterval,ajax,promise.then内等 React 无法掌控的
APIs情况下,setState是同步更新state的。


原因?

在 React 的 setState 函数实现中,会根据一个变量 isBatchingUpdate 判断是直接更新 this.state 还是放到队列中回头再说,而且 isBatchingUpdate 默认是 false,也就是表示 setState 会同步更新 this.state,但是,有一个函数 batchedUpdate,这个函数会把 isBatchingUpdate 修改为 true,而当 React 在调用事件处理函数之前就会调用这个 batchedUpdates,造成的后果,就是由 React 控制的事件处理过程 setState 不会同步更新 this.state

注意:

setState异步 并不是说内部由异步代码实现,其实本身执行的过程和代码是同步的,只是合成事件和钩子函数的调用在更新之前,导致在合成事件和钩子函数中没法里吗拿到更新后的值,形成了所谓的"异步"

但是可以通过 setState(partialState, callback) 中的 callback 拿到更新后的结果

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

夏兮颜☆

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值