生命周期发生变化更新state
来源：3-14 【异步处理】setState的异步开发
Zhang_Kyra
2021-06-20
老师，您好，还是不理解“生命周期发生变化的时候”更新state。为什么执行第一个回调的时候生命周期发生变化，state变为1.第二个生命周期却没有边变化。怎样理解生命周期变化？
this.setState({ count: this.state.count + 1 }, () => {
console.log("console from callback: " + this.state.count);
});
this.setState({ count: this.state.count + 1 }, () => {
console.log("console from callback: " + this.state.count);
});
1回答
-
阿莱克斯刘
2021-06-22
1. this.setState({ count: this.state.count + 1 }, () => {
2 console.log("console from callback: " + this.state.count);
3. });
4. this.setState({ count: this.state.count + 1 }, () => {
5. console.log("console from callback: " + this.state.count);
6. });7. console.log(this.state)
如果运行代码，你就会发现代码的执行顺序并不是按照1、2、3、4、5、6来执行的。他的顺序很奇怪，首先会执行1、2、3、4，然后跳过5、6直接执行7，最后再执行5、6。也就是说，在第二次state + 1之前我们的第七行代码就执行了，所以state明明应该是2，但是我们看到的输出依然是1。
因为代码的执行顺序与书写的顺序不一致，这就形成了异步的执行顺序。这也就是“为什么执行第一个回调的时候生命周期发生变化，state变为1.第二个生命周期却没有边变化。”。从本质上来说，你观察到的现象与生命周期变化没啥关系，根本原因是this.setState()通过异步处理state更新，所以导致我们看到了一些比较奇怪的现象。而这个现象也就是本节课的标题“setState的异步开发”。
00
相似问题
回答 1
回答 1
回答 1
回答 1
回答 1