笔记二十五、React中setState是同步还是异步的？

不念不忘少年蓝@ 2024-05-01 16:24 36阅读 0赞

> 在react18版本之前setState既可以是同步也可以是异步的
> 
> 在Promise的状态更新、js原生事件、定时器中是同步的
> 
> 在react的合成事件中，是异步的
> 
> 在react18版本之后是setState异步的

代码

import React, {Component} from 'react';
    
    class Async extends Component {
    
        state = {count: 0}
    
        add = () => {
            // {count: this.state.count + 1}
            this.setState(() => ({count: this.state.count + 1}), () => {
                // 回调函数 获取更新的 state 值
                console.log('更新之后的值:', this.state.count)
            });
            console.log("更新前打印的值:", this.state.count)
        }
    
        render() {
            return (
                <div>
                    <h2>{this.state.count}</h2>
                    <button onClick={this.add}>增加</button>
                </div>
            );
        }
    }
    
    export default Async;

如何拿到setstate更新的值

this.setState({ counte: this.state.counte + 1 }, () => {
      console.log("更新后的值：", this.state.counte);
    });

函数写法

this.setState(
      () => ({ counte: this.state.counte + 1 }),
      () => {console.log("更新后的值：", this.state.counte)}
    );

发表评论取消回复

表情：

评论列表（有 0 条评论，36人围观）

还没有评论，来说两句吧...

相关阅读

相关笔记二十五、React中setState是同步还是异步的？

在react18版本之前setState既可以是同步也可以是异步的。在Promise的状态更新、js原生事件、定时器中是同步的。在react18版本之后是setState...

不念不忘少年蓝@/ 2024年05月01日 16:24/ 0 赞/ 37 阅读

相关 React setState 是同步更新还是异步更新？

目录 1. 为什么使用setState 2. setState 异步更新 3. setState 同步场景

Bertha 。/ 2023年01月01日 03:50/ 0 赞/ 151 阅读

相关 react在setState之后数据没变化(setState同步还是异步)

> 场景是这样的： > 我有一个分页列表的场景，目前在点击页码之后，将这个页码setState，然后调用分页接口，如下： // 这是antd的分页上的 onCha

蔚落/ 2022年12月30日 13:45/ 0 赞/ 294 阅读

相关 React中的setState的同步异步与合并

文章目录前言引入同步和异步合并浅析

淩亂°似流年/ 2022年10月31日 01:44/ 0 赞/ 289 阅读

相关 setState 到底是同步的，还是异步的

点击上方程序员成长指北，关注公众号回复1，加入高级Node交流群从一道面试题说起这是一道变体繁多的面试题，在 BAT 等一线大厂的面试中考察频率非常高。

梦里梦外;/ 2022年10月09日 15:26/ 0 赞/ 159 阅读

相关【面试题】1085- setState 到底是同步的，还是异步的

![105574cf757a557de1c91f42c5c9593a.png][] 从一道面试题说起这是一道变体繁多的面试题，在 BAT 等一线大厂的面试中考察

快来打我*/ 2022年09月12日 03:00/ 0 赞/ 155 阅读

相关 React 中 setState 是一个宏任务还是微任务？

点击上方程序员成长指北，关注公众号回复1，加入高级Node交流群最近有个朋友面试，面试官问了个奇葩的问题，也就是我写在标题上的这个问题。 ![41258

深碍√TFBOYSˉ_/ 2022年09月03日 13:21/ 0 赞/ 122 阅读

相关 console异步还是同步

在看Async JavaScript这本书时意外发现有个地方跟作者结果不相同，然后就在Stack Overflow得到了解释。原问题： > [https://stacko

拼搏现实的明天。/ 2022年06月09日 02:40/ 0 赞/ 147 阅读

相关 React（7）异步的数据更改（setState 是异步行为）

与Vue不同，React的设置变量是异步的。 13、setState 是异步行为 > setState() 这是一个异步操作，如： class HelloW

我就是我/ 2022年05月31日 08:08/ 0 赞/ 197 阅读

相关 react 深入异步setState

(1)多个setState一起调用会被合并成一个批处理,相同属性只会保留最后一次的结果 (2)若setState有回调函数,则会在setState的所

灰太狼/ 2021年07月25日 00:27/ 0 赞/ 369 阅读