setState更新状态的2种写法

    (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')
  }

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值