参考原文:
无法多次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