浅谈 setState 异步、同步问题

setState 主流程

浅谈 setState 异步、同步问题_第1张图片
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

你可能感兴趣的:(react,javascript,前端,开发语言)