（四）正确使用setState

不要直接修改 State

直接对 this.state 赋值不会重新渲染组件

应该使用 setState 方法修改 state,调用 setState 可以使 React 能够知道 state 已经改变了，然后会重新调用 render() 方法来确定页面上该显示什么。只有在构造函数是可以使用this.state = {} 直接赋值。

this.setState(partialState, callback)接收两个参数

1. partialState: Object|Function (用于产生当前合并的子集)

2. callback: Function (state更新之后调用)

state 的更新是异步的

setState 在合成事件和生命周期中是异步的，异步其实就是将多个setState批量更新的，这样可以达到优化性能 的目的。

要获取到最新值有3种方法

1. 可以通过setTimeout达到同步，0秒后再执行

const { count } = this.state
setTimeout(() => {
  this.setState{ count: ++count }   
  console.log(this.state.count)
}, 0)

2. 回调事件在state在更新完成后执行，也可以获取state改变后的值

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

3. 原生事件

componentDidMount(){
    document.body.addEventListener('click',e => {
        this.setState{ count: this.state.count + 1 }  
        console.log(this.state.count)
    }, false)
}

setState的更新是批量的

要实现链式更新，可以使用下面方法

this.setState(state => ({count: state.count + 1}))
this.setState(state => ({count: state.count + 2}))

setState 第一个参数还可以是个函数，它接收上一个state参数作为第一个参数