setState的两种写法

1、对象式的setState

1、语法：setState(stateChange, [callback])
（1）stateChange为状态改变对象(该对象可以体现出状态的更改)
（2）callback是可选的回调函数, 它在状态更新完毕、界面也更新后(render调用后)才被调用
2、注意点
setState是一个同步的方法，但是setState引起React后续更新状态的动作是异步的

state = {count:0}
this.setState({count:count + 1})
console.log(this.state.count);

如下：页面为1，但是拿到的状态还是0

如果想在更新完状态后拿到该状态，应该在回调中执行

this.setState({count:count + 1},() => {
  console.log(this.state.count);
})

如下：页面为1，拿到的状态也是1

我们在实际开发中一般是没有这个需求的，所以一般不写回调，但如果有这个需求的时候就可以用。

2、函数式的setState

1、语法：setState(updater, [callback])
（1）updater为返回stateChange对象的函数。
（2）updater可以接收到state和props。
（3）callback是可选的回调函数, 它在状态更新、界面也更新后(render调用后)才被调用。

<Demo name="tom"/> // 从外部传数据进去
this.setState((state,props) => {
  console.log(state,props);
  return {count:state.count + 1}
})

同理，回调也是可选参数

3、总结

1、对象式的setState是函数式的setState的简写方式(语法糖)
2、一般使用原则：
（1）如果新状态不依赖于原状态 ===> 使用对象方式
（2）如果新状态依赖于原状态 ===> 使用函数方式
（3）如果需要在setState()执行后获取最新的状态数据,
要在第二个callback函数中读取
3、这个是没有绝对的，开发中可以任意选择