React 中 setState() 是异步的

## 0x00

> React has a setState() problem: Asking newbies to use setState() is a recipe for headaches. Advanced users have secret cures.

为了性能和其它原因，`setState` 这个 API 很容易被误用。

- `setState` 不会立刻改变 React 组件中 state 的值
- `setState` 通过引发一次组件的更新过程来引发重新绘制
- 多次 `setState` 函数调用产生的效果会合并

## 0x01

**问题**

看如下代码：

```javascript
// state.count 当前为 0
this.setState({count: state.count + 1});
this.setState({count: state.count + 1});
this.setState({count: state.count + 1});
// state.count 现在是 1，而不是 3
```

三次操作被合并为了一次。

## 0x02

**解决方式**

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

**参考资料**

- [setState() Gate](https://medium.com/javascript-scene/setstate-gate-abc10a9b2d82)
- [关于 React 中的 setState 这个API](https://github.com/iuap-design/blog/issues/185)
- [setState：这个API设计到底怎么样](https://zhuanlan.zhihu.com/p/25954470)