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

在react18版本之前setState既可以是同步也可以是异步的

在Promise的状态更新、js原生事件、定时器中是同步的

在react的合成事件中,是异步的

在react18版本之后是setState异步的

代码

javascript 复制代码
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更新的值

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

函数写法

javascript 复制代码
this.setState(
  () => ({ counte: this.state.counte + 1 }),
  () => {console.log("更新后的值:", this.state.counte)}
);
相关推荐
清灵xmf22 分钟前
TypeScript 类型进阶指南
javascript·typescript·泛型·t·infer
小白学大数据29 分钟前
JavaScript重定向对网络爬虫的影响及处理
开发语言·javascript·数据库·爬虫
黑叶白树33 分钟前
简单的签到程序 python笔记
笔记·python
qq_3901617737 分钟前
防抖函数--应用场景及示例
前端·javascript
334554321 小时前
element动态表头合并表格
开发语言·javascript·ecmascript
John.liu_Test1 小时前
js下载excel示例demo
前端·javascript·excel
幸运超级加倍~1 小时前
软件设计师-上午题-15 计算机网络(5分)
笔记·计算机网络
PleaSure乐事1 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶1 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json
getaxiosluo1 小时前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx