React组件的DidMount事件里的setState事件

参考原文：

1. React 源码剖析系列 － 解密 setState

2. setState 之后发生了什么 —— 浅谈 React 中的 Transaction

无法多次setState

React组件的componentDidMount事件里使用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。

为什么setState不成功

这好像跟我们想象中的不大一样，我们先看下setState流程图，看看这个方法里发生了什么事情

  我们可以看到，如果处于批量更新阶段内，就会把所有更改的操作存入pending队列，当我们已经完成批量更新收集阶段，我们读取pengding队列里的操作，一次性处理并更新stat