在react中调用setState方法之后并不会立马去更新DOM结构，而是先缓存下来

setState使用

有两种方法，一种常规的使用方法

常规方法(对象参数)

1
2
3
4
this.setState({
  key1: value1, 
  key2: value2
});

这种方式能应付大部分的应用场景，但是看看下面这种情况：

1
2
3
4
5
6
this.setState({
  count: this.state.count + 1
});
this.setState({
  count: this.state.count + 1
});

最后得到的count却是不可控的。因为setState不会立即改变this.state，而是挂起状态转换，调用setState方法后立即访问this.state可能得到的是旧的值。

setState方法不会阻塞state更新完毕

第二个setState可能还没等待第一次的state更新完毕就开始执行了，所以最后count可能只加了1。

这时setState的第二个参数就派上用场了，第二个参数是state更新完毕的回调函数

函数方式（函数参数）

1
2
3
4
5
6
this.setState((state, props) => {
  return {count: state.count + 1};
});
this.setState((state, props) => {
  return {count: state.count + 1};
});

每次更新时都会提取出当前的state，进行运算得到新的state，就保证了数据的同步更新。