react中setState同步与异步

Will_Season

已于 2023-04-13 21:50:53 修改

阅读量666

点赞数

CC 4.0 BY-SA版权

文章标签： react.js javascript 前端

于 2023-04-13 17:19:51 首次发布

本文链接：https://blog.youkuaiyun.com/Will_Season/article/details/130135055

文章讲述了在React中，setState通常是异步的，但在React18之后，原生函数和定时器中的setState也变为异步。提供了两种方法将合成函数中的setState改为同步：一是通过setState的回调函数；二是使用react-dom的flushSync方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在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)
}