【React】setState的两种形式以及setState后console输出数值不对的原因

对象式的setState，开发调试时如何查看更新后的值

我们在开发调试时，经常会用对象式操作state，然后console输出state的值看一下，例如：

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

但实际上React 状态更新是异步的，React 不会立即的去更新数据，因此我们输出的 count 值会是状态更新之前的数据。
那应该怎么查看更新后的值呢？其实在 setState 调用的第二个参数，我们可以接收一个函数，这个函数会在状态更新完毕并且界面更新之后调用，例如：

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

就能成功的获取到最新的数据了

函数式的setState

实际上，对象式的 setState 是函数式 setState 的语法糖
而与对象式 setState 不同的是，函数式的setState传递的第一个参数 updater 可以接收到2个参数 state 和 props，例如：

//函数式的setState
this.setState( state => ({count:state.count+1}))

第一个参数中传入了一个函数，这个函数可以接收到 state ，通过更新 state 中的 count 值，驱动页面的更新。