关于this.setState()的那些事

一、State的定义

状态（state） 和 属性（props） 类似，都是一个组件所需要的一些数据集合，但是它是私有的，并且由组件本身完全控制，可以认为它是组件的“私有属性（或者是局部属性）”。

二、关于 setState() 有三件事是你应该知道的。

1.不要直接修改 state(状态)

this.state.comment='Hello';

上述代码并不会重新渲染组件，需要使用this.setState()代替：

this.setState({comment:'Hello'});

需要注意的是唯一可以分配 this.state 的地方是构造函数。

2.state(状态) 更新可能是异步的

React 为了优化性能，有可能会将多个 setState() 调用合并为一次更新。

因为this.props和this.state可能是异步更新的，你不能依赖他们的值计算下一个state(状态)。以下面的代码为例:

this.setState({counter:this.state.counter+this.props.increment,});

我们并不能通过上述代码得到想要的值，为了弥补这个问题，使用另一种 setState() 的形式，接受一个函数。这个函数将接收前一个状态作为第一个参数，应用更新时的 props 作为第二个参数，代码如下：

this.setState((prevState,props)=>({counter:prevState.counter+props.increment}));

3.state(状态)更新会被合并

当你调用 setState()， React 将合并你提供的对象到当前的状态中。所以当State是一个多键值的结构时，可以单独更新其中的一个，此时会进行“差分”更新，不会影响其他的属性值。

三、setState()的异步更新。

1.执行setState()之后干了什么？

setState()方法通过一个队列机制实现state更新，当执行setState()的时候，会将需要更新的state合并之后放入状态队列，而不会立即更新this.state(可以和浏览器的事件队列类比)。如果我们不使用setState而是使用this.state.key来修改，将不会触发组件的re-render。如果将this.state赋值给一个新的对象引用，那么其他不在对象上的state将不会被放入状态队列中，当下次调用setState()并对状态队列进行合并时，直接造成了state丢失。

2.setState()可以接受一个函数作为参数？

setState()不仅能够接受一个对象作为参数，还能够接受一个函数作为参数。函数的参数即为state的前一个状态以及props。

React文档中对setState的说明如下：

voidsetState(function|object nextState,[functioncallback])

上述代码的第二个参数是一个回调函数，在setState()的异步操作结束并且组件已经重新渲染的时候执行。换句话说，我们可以通过这个回调来拿到更新的state的值。

作者：云淡风轻的成长

链接：https://www.jianshu.com/p/a883552c67de

来源：

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。