浅谈 setState 异步同步问题

Posted 2023-04-01 拙慕JULY

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