setState是同步的还是异步的(都有)

最新推荐文章于 2025-06-10 09:22:31 发布

月迷津渡丶

最新推荐文章于 2025-06-10 09:22:31 发布

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： react 文章标签： javascript 前端 review

本文链接：https://blog.youkuaiyun.com/oYueMiJinDu/article/details/123688344

react 专栏收录该内容

5 篇文章

订阅专栏

本文解析React中setState的异步行为，探讨生命周期和合成事件中的批处理策略，以及何时呈现为同步效果，如setTimeout和DOM事件。重点在于批处理机制如何避免重复渲染和优化性能。

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

异步情况在React事件当中是异步操作

生命周期和合成事件中

无论调用多少次 setState，都会不会立即执行更新，而是将要更新的·存入 _pendingStateQueue，将要更新的组件存入 dirtyComponent。
当上一次更新机制执行完毕，以生命周期为例，所有组件，即最顶层组件didmount后会将批处理标志设置为 false。这时将取出dirtyComponent中的组件以及 _pendingStateQueue中的 state进行更新。这样就可以确保组件不会被重新渲染多次。
setState本身并不是异步的，而是 React的批处理机制给人一种异步的假象。

同步情况

如果是在setTimeout事件或者自定义的dom事件中，都是同步的

setTimeout(()=>{
    this.setState({
        count: this.state.count + 1
    });
    console.log(3,this.state.count);//3
})
new Promise<void>(resolve=>{
    this.setState({
        count: this.state.count + 1
    });
    resolve()
    console.log(0,this.state.count);//0
}).then(()=>{
    this.setState({
        count: this.state.count + 1
    });
    console.log(2,this.state.count);//2
})

document.querySelector('#btn').addEventListener('click',()=>{
    this.setState({
        count: this.state.count + 1
    });
    console.log(this.state.count);
});