react中setState同步与异步

在react的组件中:

setState用于修改state(类似于vue中的data)中的状态

无论react18版本前还是react18版本后，合成函数中的setState都是异步的

在react中的18版本之前，原生函数与定时器中的setState都是同步的

在react中的18版本之后，原生函数与定时器中的setState也是异步的

将合成函数中的setState改为同步

方法1:

        //合成方法中setState都为异步
        //将合成方法改为同步操作
        //语法1:this.setState(()=>{return },()=>{})

add(){
        console.log('A轮第一次未自加前打印',this.state.num)
        this.setState(()=>{
             return this.state.num=this.state.num+1
        },()=>{
             console.log('setState合成方法中改为同步',this.state.num)
        })
}

方法2:引入react-dom

import ReactDOM from "react-dom";//引入react-dom调用flushSync改同步

add(){   
    ReactDOM.flushSync(()=>{
            console.log('flushSync第一次',this.state.num)
            this.setState({
                num:this.state.num+1 
            })
        })
        console.log('flushSync同步',this.state.num)
}