import React from "react";

class App extends React.Component {
state = {
a: 0
};
componentDidMount() {
this.setState({ a: this.state.a + 1 });
console.log(this.state.a); // 0 this.setState({ a: this.state.a + 1 });
console.log(this.state.a); // 0 setTimeout(() => {
this.setState({ a: this.state.a + 1 });
console.log(this.state.a); // 2 this.setState({ a: this.state.a + 1 });
console.log(this.state.a); // 3
}, 0);
} render() {
return <>hello world</>;
}
} export default App;

react 异步的setState的更多相关文章

  1. React中setState 什么时候是同步的,什么时候是异步的?

    class Example extends React.Component { constructor() { super(); this.state = { val: 0 }; } componen ...

  2. 初学React,setState后获取到的thisstate没变,还是初始state?

    问题:(javascript)初学React,setState后获取到的thisstate没变,还是初始state?描述: getInitialState(){ return {data:[]}; } ...

  3. React中setState学习总结

    react中setState方法到底是异步还是同步,其实这个是分在什么条件下是异步或者同步. 1.先来回顾一下react组件中改变state的几种方式: import React, { Compone ...

  4. React的setState学习及应用

    React的setState学习及应用 一:作用: setState() 将对组件 state 的更改排入队列,并通知 React 需要使用更新后的 state 重新渲染此组件及其子组件.这是用于更新 ...

  5. react中setState用法

    setState()更新状态的2种写法 setState(updater, [callback]), updater为返回stateChange对象的函数: (state, props) => ...

  6. React组件setState

    注意: 1. 自定义组件首字母必须大写.这里是以函数表达式的方式定义子组件的. 2. 使用 ES6 的 class 关键字创建的 React 组件,组件中的方法遵循与常规 ES6 class 相同的语 ...

  7. React的setState分析

    前端框架层出不穷,不过万变不离其宗,就是从MVC过渡到MVVM.从数据映射到DOM,angular中用的是watcher对象,vue是观察者模式,react就是state了. React通过管理状态实 ...

  8. React中setState同步更新策略

    setState 同步更新 我们在上文中提及,为了提高性能React将setState设置为批次更新,即是异步操作函数,并不能以顺序控制流的方式设置某些事件,我们也不能依赖于this.state来计算 ...

  9. 「React Native笔记」在React的 setState 中操作数组和对象的多种方法(合集)

    运用在React 中 setState的对象.数组的操作时是不能用类似array.push()等方法,因为push没有返回值,setState后会出现state变成Number,为了方便他人和自己查看 ...

随机推荐

  1. Java 学习之路 -- day00

    Java 学习之路 -- day00 Typora 快捷键操作 标题:#+空格 2. *斜体* 3. **加粗** 4. **斜体加粗*** 5. ~~删除线~~ 6. > 引用 7. ···分 ...

  2. Redis 实战 —— 12. 降低内存占用

    简介 降低 Redis 的内存占用有助于减少创建快照和加载快照所需的时间.提升载入 AOF 文件和重写 AOF 文件时的效率.缩短从服务器进行同步所需的时间(快照. AOF 文件重写在 持久化选项 中 ...

  3. 前端开发规范之命名规范、html规范、css规范、js规范

    在学习编程的时候,每次看到那些整齐规范的代码,心里顿时对这个程序员表示点点好感,有时,比如看到自己和朋友写的代码时,那阅读起来就是苦不堪言,所以,一些基本的开发规范是必须的,是为了自己方便阅读代码,也 ...

  4. jQuery——通过Ajax发送数据

    Ajax(Asynchronous JavaScript and XML,异步JavaScript和XML),一个Ajax解决方案涉及如下技术: JavaScript:处理与用户及其他浏览器相关事件的 ...

  5. 封装各种生成唯一性ID算法的工具类

    /** * Copyright (c) 2005-2012 springside.org.cn * * Licensed under the Apache License, Version 2.0 ( ...

  6. git submodule添加、更新和删除

    添加 git submodule add <url> <path> url:替换为自己要引入的子模块仓库地址 path:要存放的本地路径 执行添加命令成功后,可以在当前路径中看 ...

  7. [The Preliminary Contest for ICPC Asia Nanjing 2019] L-Digit sum

    题意 $S_{b}(n)$表示数字$n$在$b$进制下各位的和,对于给定的数$N$和$b$,求出$\sum_{n=1}^{N}S_{b}(n)$ $[ link ]$ 分析 题解上写的是签到题,这是个 ...

  8. Windows10 ping通 虚拟机上的Linux-CentOS7操作系统

    我是按照Oracle VM VirtualBox 安装CentOS7操作系统这个博客安装Linux操作系统的. 我们这里只关心网卡的配置,网卡一: 网卡二: 我按照上面那个博客安装Linux操作系统之 ...

  9. HDU5213 Lucky【容斥+莫队】

    HDU5213 Lucky 题意: 给出\(N\)个数和\(k\),有\(m\)次询问,每次询问区间\([L1,R1]\)和区间\([L2,R2]\)中分别取一个数能相加得到\(k\)的方案数 题解: ...

  10. STL中pair容器的用法

    1.定义pair容器 1 pair <int, int> p, p1; 2 //定义 [int,int] 型容器 //直接初始化了p的内容 pair<string,int>p( ...