react 中 this.setState() 用法

this.setState() 是 react 中类组件的常用用法，是用于更新组件中 this.state 对象的值的。但是这个 api 是有挺多注意事项的，在此记录说明一下。

1、调用 this.setState() 后， this.state 对象中的值不会立刻更新

...
this.state={a: 1}
...
update = () => {
    console.log(this.state.a); // 1
    this.setState({a: 2});
    console.log(this.state.a); // 1，值不会立刻改变
}

如上代码，可以看到输出 this.state.a 的值并不是 2 ，说明调用 this.setState() 后，this.state 对象中的值是不会立刻更新的。
调用 this.setState() 后，会触发 4 个生命周期的执行：

• shouldComponentUpdate
• componentUpdate
• render
• componentDidUpdate

在执行到 render 时，this.state 的值才会更新。如果在执行 shouldComponentUpdate 时，如果返回 false ，会阻止后面三个生命周期的执行，但是这种情况下，this.state 的值也是会更新的。

2、多次调用 this.setState() 会产生合并效果

this.setState({a:1});
this.setState({b:2});

//相当于
this.setState({a:1, b:2})

在调用 this.setState() 后，react 会将这次更改事件放进一个队列中，当同步执行过程的所有逻辑都执行完毕，才会执行四个生命周期，在 render 中进行更新 this.state （或者在 shouldComponentUpdate 返回为 false 时更新）。

3、 this.setState() 的第一个参数可以是函数

查看官方文档，里面的说明是这样的：

setState(updater, [callback])

其中 updater 是用来更新 this.state 的函数或者是对象，callback回调是在 this.state 更新之后的回调，在回调函数中，是确保了 this.state 是已经更新的。
其中 updater 是更新函数：

(state, props) => stateChange

其中 state 就是 this.state 的引用，这是最新的 this.state 的值。
props 是 this.props 的引用，也是最新的 this.props 的值。
如果更新 this.state 是依赖更新前的 this.state 或者是 this.props 的，那举例如下：

this.setState((state, props) => {
  return {a: state.a + props.a};
});