React setSate의 비동기 문제 분석

// 初始state.count 当前为 0
componentDidMount(){
    this.setState({count: state.count + 1});
    console.log(this.state.count)
}

class Demo extends Component {
  constructor(props) {
    super(props);
    this.state = { number: 0 };
  }
  render() {
    return <button ref="button" onClick={this.onClick.bind(this)}>点我</button>;
  }
  componentDidMount() {
    //手动绑定mousedown事件
    this.refs.button.addEventListener(
      "mousedown",
      this.onClick.bind(this)
    );
   
    //setTimeOut
    setTimeout(this.onClick.bind(this), 1000);
  }
  onClick(event) {
    if (event) {
      console.log(event.type);
    } else {
      console.log("timeout");
    }
    console.log("prev state:", this.state.number);
    this.setState({
      number: this.state.number + 1
    });
    console.log("next state:", this.state.number);
  }
}
export {Demo};

 1.在p节点中绑定onClick事件
 2.在componentDidMount中手动绑定mousedown事件
 3.在componentDidMount中使用setTimeout调用onClick

timeout
prev state: 0
next state: 1
mousedown
prev state: 1
next state: 2
click
prev state: 2
next state: 2