React中setState的怪异行为 ——setState没有即时生效

setState可以说是React中使用频率最高的一个函数了，我们都知道，React是通过管理状态来实现对组件的管理的，当this.setState()被调用的时候，React会重新调用render方法来重新渲染UI

但实际使用的时候，我们会发现，有时候我们setState之后，并没有立刻生效，例如我们看一下以下的示例代码

class Test extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  componentDidMount() {
    this.setState({count: this.state.count + 1});
    console.log(this.state.count); // 输出0
    this.setState({count: this.state.count + 1});
    console.log(this.state.count); // 输出0
    setTimeout(() => {
      this.setState({count: this.state.count + 1});
      console.log(this.state.count); // 输出2
      this.setState({count: this.state.count + 1});
      console.log(this.state.count); // 输出3
    }, 0);
  }

  render() {
    return <div> test </div>;
  }
}

开发过程中我们会发现，在componentDidMount方法中，我们调用setState之后state的值并没有立即改变，但如果我们在setTimeOut里面调用，我们却能立刻就能获得更新，原因就在于react中的使用了基于事务（