react中setState更新状态几种方式

2

前言

setState 在合成事件和挂钩函数、本机事件和 setTimeout 已同步到

对象编写

setState(stateChange, [callback])

• stateChange 更改状态的对象(该对象可以反映状态变化)

• callback 是可选的回调函数, 在更新状态和更新界面之后( render 调用后)才被调用

  state = {count:0}
  
  add = ()=>{
      // 对象式setState
      this.setState({count:this.state.count+1},()=>{
          console.log(this.state.count);
      })
  }

功能写作

setState(updater, [callback])

• updater 为返回 stateChange 对象的函数。
• updater 可以收到 state 和 props 。 (主要区别)

• callback 是可选的回调函数, 它在状态和界面也更新之后更新。( render 调用后)被称为。

  state = {count:0}
  
  add = ()=>{
      //函数式的setState
      this.setState( state => ({count:state.count+1}),()=>{
          console.log(this.state.count)
      })
  }

总结

• 对象式的 setState 是一种功能性的 setState 简明的写作方式(语法糖)
• 使用原则：
  • 如果新状态不依赖于原始状态 ===> 使用对象方法
  • 如果新状态依赖于原始状态 ===> 使用函数方法
  • 如果需要，请参阅 setState() 在执行后获取最新的状态数据。, 名列第二 callback 读入函数