这个代码执行顺序是什么?

Question

class Demo extends PureComponent {
  state={
    count: 0,
  }
  componentDidMount() {
    console.log('pre state', this.state.count);
    this.setState({
      count: this.state.count + 1
    });
    console.log('next state', this.state.count);

    //测试setTimeout
    setTimeout(() => {
      console.log('setTimeout pre state', this.state.count);
      this.setState({
        count: this.state.count + 1
      });
      console.log('setTimeout next state', this.state.count);
    }, 0);
  }

  onClick = (event) => {
    // 测试合成函数中setState
    console.log(`${event.type} pre state`, this.state.count);
    this.setState({
      count: this.state.count + 1
    });
    console.log(`${event.type} next state`, this.state.count);
  }

  render() {
    return <button onClick={this.onClick}>count+1</button>
  }
}

Answer 1

大概明白你想问什么了。

componentDidMount 里开头的两个分别输出 0 和 0，这个是可以保证的，因为 state 异步更新。

setTimeout 里的大概率输出 1 和 2，但 React 并不保证在以后更新版本时结果始终是这个；onClick 里输出 2 和 3，同样不保证。具体解析看这篇：https://zhuanlan.zhihu.com/p/...

React 始终强调的是，不保证 setState 后 state 会改变。所以上述输出只能用于测试，而不要在生产项目中就依赖此结果作为业务逻辑的一环。