r002-setState输出类面试题

class Example extends React.Component {
  constructor() {
    super();
    this.state = {
      val: 0
    };
  }
  
  componentDidMount() {
    this.setState({val: this.state.val + 1});
    console.log(this.state.val);    // 第 1 次 log

    this.setState({val: this.state.val + 1});
    console.log(this.state.val);    // 第 2 次 log

    setTimeout(() => {
      this.setState({val: this.state.val + 1});
      console.log(this.state.val);  // 第 3 次 log

      this.setState({val: this.state.val + 1});
      console.log(this.state.val);  // 第 4 次 log
    }, 0);
  }

  render() {
    return null;
  }
};

结果 0 0 2 3

解析

1.第一次 和 第二次都是在react 生命周期内，触发时isBatchingUpdates 为true，
所以并不会直接执行更新state，而是加入了dirtyComponents，，所以打印时获取的更新前的状态0

2、两次 setState 时，在 react 内部会被合并掉，只执行最后一次，所以执行时都是将 0 设置成 1。设置完成后 state.val 值为 1。

3、setTimeout 中的代码，触发时 isBatchingUpdates 为 false，所以能够直接进行更新，所以连着输出 2，3。