一文让你不再困惑setState之getState（上）

在面试中我们通常会被问到有关 setState 相关的问题。
接下来我们先看几个示例，然后通过 模拟实现 setState的行为来更加深刻的理解实例得出的结论。

setState 的特点

• 批量执行：多key一次执行，对同一个key多次操作会合并，会执行最后一次
• 可能是异步的（如在生命周期、react合成事件中）
• 在定时器和原生事件中，它是同步的；

由于 setState 可能是异步的，如果要立即获取到最新的值，有三种方式：

• 传函数给setState， 或者在第二个参数回调函数中获取最新值
• 在定时器setTimeout中
• 在原生事件中（跳过了react的事件机制）

咋一看，还是觉得比较绕，结合以上特点，我们来看几个例子

1. 多次执行同一个key

class App1 extends React.Component {
  state = { count: 1 }
  componentDidMount() {
    this.setState({ count: this.state.count++ }) 
    this.setState({ count: this.state.count + 1 })
    this.setState({ count: this.state.count + 2 })
    console.log('count1', this.state.count); //  ？？1
    // 使用定时器
     setTimeout(() => {
      console.log('count2', this.state.count) // ？？2
    })
  }
  handleClick = () => {
    this.setState(({ count }) => {
      console.log('count3', count) // ？？ 3
      return { count: count + 1}
    })
	console.log('count4', this.state.count) //