前言
在看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”
