React 专题 setState

Question

React 使用一个特殊的对象 this.state 来管理组件内部的状态。然后开发者就可以通过描述状态来控制UI的表达。如何描述状态呢？

一般我们会在 constructor 生命周期钩子初始化状态。

import React, { Component } from 'react';
class App extends Component {
constructor(props) {
super(props);
this.state = { name: '', star: 0 };
}
}
export default App;

也可以直接用属性初始化器的写法，看起来更加简洁。然后通过 this.setState() 来改变状态。

import React, { Component } from 'react';
class App extends Component {
state = { name: '', star: 0 };
componentDidMount() {
  this.setState({ name: 'react', star: 1 });
}}
export default App;

this.state

首先，改变状态有特殊的门路

开发者不能直接改变 this.state 的属性，而是要通过 this.setState 方法。

为什么要这样设计？

可能是为了更加语义化吧，开发者清楚自己在更新状态，而不是像Vue那样改变于无形。

不过别急，我为正在阅读的你准备了一个炸弹：

猜猜下面例子最终渲染出来的star是多少？

import React, { Component } from 'react';
class App extends Component {
state = { star: 0 };
componentDidMount() {
  this.state.star = 1000;
  this.setState(prevState => ({ star: prevState.star + 1 }));
}
// componentDidMount() {
  // this.setState(prevState => ({ star: prevState.star + 1 }));
  // this.state.star = 1000;
// }
// componentDidMount() {
  // this.state.star = 1000;
  // this.setState({ star: this.state.star + 1 });
// }
// componentDidMount() {
  // this.setState({ star: this.state.star + 1 });
  // this.state.star = 1000;
// }
}
export default App;

答案是 1001。

诶，不是说不能直接改变 this.state 的属性么？

听我讲，首先， this.state 并不是一个不可变对象，你(非得较劲的话)是可以直接改变它的属性的。但是它不会触发 render 生命周期钩子，也就不会渲染到UI上。

不过，既然你确实改变了它的值，如果之后调用了 this.setState() 的话，它会在你直接改变的值的基础上再做更新。

所以呀少年，要想不懵逼，得靠我们自己的代码规范。

至于注释的部分，只是为了说明顺序问题。

第一部分注释渲染出来的star是1001。因为回调会首先计算star的值，而这时候star的值是1000。

第二部分注释渲染出来的star是1001。这很好理解。

第三部分注释渲染出来的star是1。这也好理解，这个时候star的值还是0。

其次，状态更新会合并处理

大家也看到了，我们可以每次更新部分状态。

新状态并不会覆盖旧状态，而是将已有的属性进行合并操作。如果旧状态没有该属性，则新建。

这类似于 Object.assign 操作。

而且合并是浅合并。

只有第一层的属性才会合并，更深层的属性都会覆盖。

 import React, { Component } from 'react'; class App extends Component { state = { userInfo: { name: '', age: 0 } }; componentDidMount() { this.setState({ userInfo: { age: 13 } }); } } export default App;

最后，可以有不是状态的状态

如果你需要存储某种状态，但是不希望在状态更新的时候触发 render 生命周期钩子，那么完全可以直接存储到实例的属性上，只要不是 this.state 的属性。使用起来还是很自由的。

异步更新

什么叫异步更新？

异步更新说的直白点就是批量更新。

它不是真正的异步，只是React有意识的将状态攒在一起批量更新。

React组件有自己的生命周期，在某两个生命周期节点之间做的所有的状态更新，React会将它们合并，而不是立即触发UI渲染，直到某个节点才会将它们合并的值批量更新。

以下，组件更新之后 this.state.star 的值是1。

 import React, { Component } from 'react'; class App extends Component { state = { star: 0 }; componentDidMount() { this.setState({ star: this.state.star + 1 }); this.setState({ star: this.state.star + 1 }); this.setState({ star: this.state.star + 1 }); } } export default App;

因为这些状态改变的操作都是在组件挂载之后、组件更新之前，所以实际上它们并没有立即生效。

this.state.star 的值一直是0，尽管状态被多次操作，它得到的值一直是1，因此合并之后 this.state.star 的还是1，并不是我们直觉以为的3。

为什么要异步更新？

因为 this.setState() 会触发 render 生命周期钩子，也就会运行组件的diff算法。如果每次setState都要走这一套流程，不仅浪费性能，而且是完全没有必要的。

所以React选择了在一定阶段内批量更新。

还是以生命周期为界，挂载之前的所有setState批量更新，挂载之后到更新之前的所有setState批量更新，每次更新间隙的所有setState批量更新。

非异步情况

再来看一种情况：

猜猜最终渲染出来的 star 是多少？

import React, { Component } from 'react';
class App extends Component {
state = { star: 0 };
timer = null;
componentDidMount() {
  this.timer = setTimeout(() => {
    this.setState({ num: this.state.star + 1 });
    this.setState({ num: this.state.star + 1 });
    this.setState({ num: this.state.star + 1 });
  }, 5000);
}
componentWillUnmount() {
  clearTimeout(this.timer);
}
}
export default App;

答案是3。

说实话，这里我也没想明白。

我在React仓库的 Issues 里提过这个情况，这是 React 主创之一 Dan Abramov 的回答：

setState is currently synchronous outside of event handlers. That will likely change in the future.

Dan Abramov 所说的 event handlers 应该指的是 React 合成事件回调和生命周期钩子。

我的理解，因为只有这些方法才能回应事件，所以它们之中的状态更新是批量的。但是它们之中的异步代码里有状态更新操作，React就不会批量更新，而是符合直觉的样子。

我们看下面的例子，正常的重复setState只会触发一次更新，但是http请求回调中的重复setState却会多次触发更新，看来异步的setState不在React掌控之内。

 import React, { Component } from 'react'; class App extends Component { state = { star: 0 }; componentDidMount() { fetch('https://api.github.com/users/veedrin/repos') .then(res => res.json()) .then(res => { console.log(res); this.setState({ star: this.state.star + 1 }); this.setState({ star: this.state.star + 1 }); this.setState({ star: this.state.star + 1 }); }); } } export default App;

还有一种情况就是原生的事件回调，比如 document 上的事件回调，也不是异步的。

总结一下：所谓的异步只是批量更新而已。真正异步回调和原生事件回调中的 setState 不是批量更新的。不过，Dan Abramov 早就提到过，会在将来的某个版本(可能是17大版本)管理所有的 setState，不管是不是在所谓的 event handlers 之内。

React 的设计有一种简洁之美，从这种对待开发者反馈的态度可见一斑。

回调

既然 this.setState() 的设计不符合直觉，React 早就为开发者提供了解决方案。

this.setState() 的参数既可以是一个对象，也可以是一个回调函数。函数返回的对象就是要更新的状态。

回调函数提供了两个参数，第一个参数就是计算过的state对象，即便这时还没有渲染，得到的依然是符合直觉的计算过的值。同时，贴心的React还为开发者提供了第二个参数，虽然并没有什么卵用。

以下，组件更新之后 this.state.star 的值是3。

有一个小细节：箭头函数如果直接返回一个对象，要包裹一层小括号，以区别块级作用域。

import React, { Component } from 'react';
class App extends Component {
state = { star: 0 };
componentDidMount() {
  this.setState((prevState, prevProps) => ({ star: prevState.star + 1 }));
  this.setState((prevState, prevProps) => ({ star: prevState.star + 1 }));
  this.setState((prevState, prevProps) => ({ star: prevState.star + 1 }));
}
}
export default App;