Class 组件 setState() 第二个参数是一个回调函数，useState官方移除setState的回调

之前用类组件的时候，通过点击一个按钮从而改变一个文本时，就需要使用到 setState方法

• setState 属于异步更新

this.setState({mes: "fxcx"})
console.log(this.state.mes);     //发现mes依旧是原来的值，并不是fxcx，由此可以看到 setState 是异步操作，在执行完setState之后不能够立刻拿到最新的state的结果

• 这个回调函数会在状态更新后立即执行，拿到最新的state值
• 与 componentDidUpdate生命周期 作用类似，在组件更新后执行

this.setState({mes: "Fxcx"}, () => {
    console.log(this.state.mes)  // mes已改变为Fxcx
})

setState 方法到底是同步还是异步分两种情况

• 在setTimeout或者原生dom事件中，setState是同步
• 有一说一，这个我也是今天才知道，我也没验证过，反正现在我也不用类组件了

Fuck.addEventListener("click", () => {
    this.setState({mes: "Fxcx"})
    console.log(this.state.mes)   // mes已改变为Fxcx
})

setTimeout(() => {
    this.setState({mes: "Fxcx"});
    console.log(this.state.mes)   // mes已改变为Fxcx
}, 0)

多个setState合并

• this.state = {age: 0}
• state 方法执行了3次，但是 counter 的值还是为1，这就是多个state进行合并

add() {
    this.setState({
        age: this.state.age + 1
    })
     this.setState({
        age: this.state.age + 1
    })
     this.setState({
        age: this.state.age + 1
    })
}

如果想要变为3，传入一个函数

add() {
   this.setState((state, props) => {
       return {
           age: state.age + 1
       }
   })
   this.setState((state, props) => {
       return {
           age: state.age + 1
       }
   })
   this.setState((state, props) => {
       return {
           age: state.age + 1
       }
   })
}

useState实现回调

• 由于setState是异步方法，没办法直接在set后拿到最新的数据，所以我们可以通过以下两种方式来拿到更新后的值。
• const [age, setAge] = useState(1);

add() {
    new Promise(resolve => {
        setAge(pre => {
            resolve(pre + 1);
            return pre + 1;
        })
    }).then(res => {
        // res 其实就是最新的state
        doSomeThing(res)
    })
}

结语

前端react QQ群：788023830 ---- React/Redux - 地下老英雄

前端交流QQ群：249620372 ---- FRONT-END-JS前端

（我们的宗旨是，为了加班，为了秃顶……，仰望大佬），希望小伙伴们加群一起学习