关于React中的setState

前言

在看React setState 详解中看到一道有意思的题目，关于setState函数中state的值的问题，自己动手验证了一下，顺便记录下来加深印象

题目

class StateTest1 extends React.Component {
    constructor() {
        super();
        this.state = {
            count: 0
        };
    }
 
    componentDidMount() {
        this.setState({
            count: this.state.count + 1
        });
        console.log(this.state.count);    // 第一次log:0
 
        this.setState({
            count: this.state.count + 1
        });
        console.log(this.state.count);    //第二次log: 0
 
        setTimeout(() => {
            this.setState({
                count: this.state.count + 1
            });
            console.log(this.state.count);  // 第三次log:2
 
            this.setState({
                count: this.state.count + 1
            });
            console.log(this.state.count);  //第四次log: 3
        }, 0);
    }
 
    render() {
        return null;
    }
};

前两次输出的count为0很好理解，因为setState还没执行完，后面的console.log就已经执行了
而后面setTimeout中的第一个log，也就是整个过程中的第三次log输出为2，我以为是因为在setTimeout执行前有两次

this.setState({count: this.state.count + 1});

验证

按照我的推测，下面的代码的运行结果那岂不应该是

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

         this.setState({
            count: this.state.count + 1
        });
        console.log(this.state.count);    //第三次log: 0
 
        setTimeout(() => {
            console.log(this.state.count);  // 猜测第四次log:3
            this.setState({
                count: this.state.count + 1
            });
            console.log(this.state.count);  // 猜测第五次log:3
 
            this.setState({
                count: this.state.count + 1
            });
            console.log(this.state.count);  //猜测第六次log: 4
        }, 0);
    }
 
    render() {
        return null;
    }
};

然而测试了一下，发现大错特错：
前三次的log输出为0没有问题，第四次到第六次的输出结果依次是“1 2 3”，然后自己还是不信邪，发现不管在setTimeout前执行多少次setState，setTimeout里面的值都不会发生变化

解释

最后在React 源码剖析系列 － 解密 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;
  }
};

前两次 setState 并不是失效，而是他们被 batch update 了，可以被理解为两次 setState 被缓存了，因此没有立即生效。所以第 2 次 log 的时候，val 还是 0。但是在第 3 次调 this.setState 时，前两次被「缓存」的 setState 已经执行，因为两次 setState 实际上都是 this.setState({val: 1})，所以第 3 次 setState 时的 val 是 1。

即setTimeout之前的那两次setState时，val的值都为0。所以在setTimeout前面的代码执行完以后，val的值是1，在setTimeout前不管执行多少次

this.setState({val: this.state.val + 1});

val的值始终都为1；在setTimeout中setState的值会立马生效（具体原因参考React 源码剖析系列 － 解密 setState），所以后面两次的结果依次为“2 3”