setState 更新状态的两种写法

对象式的 setState

setState(stateChange, [callback])

• stateChange为状态改变对象
  • 该对象可以体现出状态的更改
• callback 是可选的回调函数，它在状态更新完毕，界面更新也更新后（render 调用后）才被调用

函数式的 setState

setState(updater, [callback])

• updater 为返回 stateChange 对象的函数
  • 可以接收到 state 和 props
• callback 是可选的回调函数，它在状态更新完毕，界面更新也更新后（render 调用后）才被调用

示例

export default class App extends Component {
  state = {
    value: 0
  }
  // 加1
  add = () => {
    const { value } = this.state;
    this.setState({ value: value + 1 }, () => {
      console.log(this.state.value, 'callback')
    })
    console.log(this.state.value)
  }
  // 减1
  reduce = () => {
    this.setState((state, props) => {
      return {
        value: state.value - 1
      }
    }, () => {
      console.log(this.state.value, 'callback')
    })
    console.log(this.state.value)
  }
  render () {
    return (
      <div>
        <div>当前值为 {this.state.value}</div>
        <button onClick={c => this.add(c)}>+1</button>
        <button onClick={c => this.reduce(c)}>-1</button>
      </div >
    )
  }
}

总结

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