当前位置：首页 > article >正文

setState更新状态的2种写法

article 2024/10/21 2:18:08

   (1). setState(stateChange, [callback])------对象式的setState
1.stateChange为状态改变对象(该对象可以体现出状态的更改)
2.callback是可选的回调函数, 它在状态更新完毕、界面也更新后(render调用后)才被调用

   (2). setState(updater, [callback])------函数式的setState
1.updater为返回stateChange对象的函数。
2.updater可以接收到state和props。
4.callback是可选的回调函数, 它在状态更新、界面也更新后(render调用后)才被调用。
总结:
       1.对象式的setState是函数式的setState的简写方式(语法糖)
       2.使用原则：
               (1).如果新状态不依赖于原状态 ===> 使用对象方式
               (2).如果新状态依赖于原状态 ===> 使用函数方式
               (3).如果需要在setState()执行后获取最新的状态数据,
                   要在第二个callback函数中读取

1，对象式写法

.如果需要在setState()执行后获取最新的状态数据, 
                    要在第二个callback函数中读取

如果想改完立即查看，那就在回调函数中进行查看打印

state = {age:0,name:'小米',age1:'',name1:''}


<button onClick={this.bck}>点我修改</button>






  bck = () =>{
    const {age,name} = this.state
    // setState的两种写法
    //对象式
    this.setState({age:age+1,name:'小米2'},()=>{
      const {age,name} = this.state
    console.log(this.state.age,this.state.name,'修改完打印值age------name-------1')
    console.log(age,name,'修改完打印值age------name-------2')
    })
    console.log(age,name,'修改完打印值age1-----------name1---------------3')
  }

2，函数式setState

.如果需要在setState()执行后获取最新的状态数据,
要在第二个callback函数中读取

函数式组件，是写两个函数

    第一个函数中的state，可以直接获取到state中定义的，不需要结构，方便获取，第二个函数是，如果想要在修改后立马看到数据，就使用第二个函数，因为setState是异步的
    this.setState((state)=>{
      return {age:state.age + 1,name:'小李'}
    },()=>{
      const {age,name} = this.state
      console.log(this.state.age,this.state.name,'修改完打印值age------name-------1')
      console.log(age,name,'修改完打印值age------name-------2')
    })

state = {age:0,name:'小米',age1:'',name1:''} 


<button onClick={this.bck}>点我修改</button>


  bck = () =>{

    //函数式
    this.setState((state)=>{
      return {age:state.age + 1,name:'小李'}
    },()=>{
      const {age,name} = this.state
      console.log(this.state.age,this.state.name,'修改完打印值age------name-------1')
      console.log(age,name,'修改完打印值age------name-------2')
    })
    console.log(this.state.age,this.state.name,'修改完打印值age------name-------3')
  }