浅谈 setState 异步、同步问题

setState的执行取决于batchUpdate机制,当isBatchingUpdates为false时为同步更新。React的生命周期方法、注册的事件及内部调用的函数能命中batchUpdate,而setTimeout、setInterval以及自定义DOM事件则不会。事务transaction期间,batchUpdate也会影响setState的行为。
摘要由CSDN通过智能技术生成

setState 主流程

在这里插入图片描述
setState 无所谓 同步还是 异步,主要是看能不能命中 batchUpdate 机制,判断 isBatchingUpdates 的值,为 false 表示同步。

所有的 react 方法都会自动赋值一个 isBatchUpdates:

 increase1 = () => {
    // isBatchingUpdates = true; 异步
    this.setState(...)
    // isBatchingUpdates = false;
  }

  increase2 = () => {
    // isBatchingUpdates = true; 异步
    setTimeout(() => {
      //  isBatchingUpdates = false;同步
      this.setState(...)
    }, 200)
    // isBatchingUpdates = false;
  }

哪些能命中 batchUpdate 机制?

react 可以「管理」的入口可以命中
  • 生命周期和他调用的函数;
  • react 中注册的事件和他调用的函数;
react 无法命中的、无法管理的入口无法命中
  • setTimeout 和 setInterval 和 它调用的函数
  • 自定义 DOM 事件和他调用的函数
transaction 事务机制
 // 开始 处于 batchUpdate 中
  // isBatchUpdates = true
  // do sth
  // 结束
  // isBatchUpdates = false
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值