11. setState

1. 对象式的setState

setState(stateChange, [callback])-——-对象式的setState

• stateChange为状态改变对象(该对象可以体现出状态的更改)
• callback是可选的回调函数, 它在状态更新完毕、界面也更新后(render调用后)才被调用 ```javascript import React, { Component } from ‘react’

export default class Demo extends Component { state = { count:0 } add = () => { const {count} = this.state this.setState({ count: count + 1 },() => { // 如果需要打印最新的值，相当于vue中的nextTick / 此处的回调函数执行机制： 先执行setState,然后执行render,最后执行此处的回调， 所以能拿到最新的值 / console.log(‘newtCount’,this.state.count) }) console.log(‘oldCount’,this.state.count) //打印的还是旧的值，
} render() { return (

因为setState是异步执行的， 所以先打印oldCount,然后打印newCount。    
<a name="IG9BZ"></a>
## 2. 函数式的setState
**setState(updater, [callback])**------函数式的setState
- updater为返回stateChange对象的函数。
- updater可以接收到state和props。
- callback是可选的回调函数, 它在状态更新、界面也更新后(render调用后)才被调用。
```javascript
import React, { Component } from 'react'
export default class Demo extends Component {
  state = {
    count:0
  }
  add = () => {
    this.setState((state,props) => {
      // console.log(state,props);
      return {
        count:state.count + 1
      }
    },() => {
      console.log(this.state.count) //最新的值
    })   
  }
  //下面是优化后的代码
   add = () => {
    this.setState(state =>({count:state.count + 1}))   
  }
  render() {
    return (
      <div>
        <h2>我是Demo组件：{this.state.count}</h2>
        <button onClick={this.add}>+</button>
      </div>
    )
  }
}

3. 总结

• 对象式的setState是函数式的setState的简写方式(语法糖)
• 使用原则：
  • 如果新状态不依赖于原状态 ===> 使用对象方式
  • 如果新状态依赖于原状态 ===> 使用函数方式
  • 如果需要在setState()执行后获取最新的状态数据,
  • 要在第二个callback函数中读取