react, setState的两种写法。

*

setState只在合成事件和钩子函数中是“异步”的，在原生事件和setTimeout中、axios 回调里都是同步的。

 

//* 使用回调函数，这样能拿到值

//* 属于异步的  能把多个 setState  合并成一个。 并且render只会渲染被修改后的dom  使用diff算法 减少渲染

 

首先我们定义一个state

state = { 
    username: '小白'  
}

　例： 我定义了一个事件， 取名为 updateUsername

第一种： 对象形式

this.setState({
     username: '小黑'
}, () => {  
     console.log( this.state.username )　　//拿到更新后的值，回调里拿
})

　第二种写法：

this.setState( () => { 
      return {
        username: '鸟蛋'
    }
})

　第二种里面值也可以拼接的用

this.setState( old => { //old上一次的state  这种可以把第一种 回调分离出来。
      console.log(old)
      return{
        username: `${old.username}XXX`
      }
})

 

this.setState( old => {

　　console.log(old)   //拿上一次的值

})