setSate 异步更新和同步更新

例如：onPlus1 里执行两次 setState， 但结果并没有按照预期的结果增加两次。

异步更新

1. 组件里等事件处理程序，如 onClick={this.handleClick} 里面等
2. setState 是异步更新
3. 声明生命周期函数里等 setState 也是异步更新

生命周期函数

在生命周期函数里更新是异步的，两次更新只会生效一次

componentDidMount() {

  this.setState({
    count0: this.state.count0 + 1　
  })
  this.setState({
    count0: this.state.count0 + 1
  })
}

// 等价于
let count0 = this.state.count0
this.setState({count0: count0 + 1})
this.setState({count0: count0 + 1})

React 自带的事件监听函数

onPlus1() {
  //React 自带的事件监听函数里，是用异步方式更新
  this.setState({
    count1: this.state.count1 + 1
  })
  this.setState({
    count1: this.state.count1 + 1
  })
}

同步更新

1. setTimeout 定时器里
2. 对原生绑定如 addEventListener 里

React 自带的事件监听函数使用异步方式

setState 应该传递一个函数，而不是一个对象，就可以确保每次的调用都是使用最新版的 state

onPlus2() {
    this.setState(state => {
      // 重要：在更新的时候读取 `state`，而不是 `this.state`。
      return { count2: state.count2 + 1 }
    })
  }

setTimeout 方式

onPlus3() {
    setTimeout(() => {
      //setTimeout里都更新都是同步的
      this.setState({
        count3: this.state.count3 + 1
      })
      this.setState({
        count3: this.state.count3 + 1
      })
    })
  }

原生写法

document.querySelector("#btn4").onclick = () => {
  //对于用这种方式绑定事件，React智商不够无法理解，于是用同步方式更新
  this.setState({
    count4: this.state.count4 + 1,
  });
  this.setState({
    count4: this.state.count4 + 1,
  });
};

参考文章

• https://codepen.io/jirengu/post/setstate