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

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>
  }
}
阅读 563
评论
    1 个回答

    大概明白你想问什么了。

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

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

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

      撰写回答

      登录后参与交流、获取后续更新提醒