首页 > 其他分享 >React面试题---setState是同步执行还是异步执行?

React面试题---setState是同步执行还是异步执行?

时间:2023-02-09 17:24:35浏览次数:35  
标签:React 面试题 react 异步 --- state num setState

1. React中 setState是同步执行还是异步执行?什么时候是同步什么时候是异步?

 1 import React, { Component } from "react";
 2 import ReactDOM from "react-dom";
 3 // this.setState 到底是同步的还是异步的?
 4 class App extends Component {
 5     state = {
 6        num: 0
 7     };    
 8     onClick = () => {
 9       console.log("更新前,num:",this.state.num);
10       this.setState({
11           num: this.state.num + 1
12       });
13       console.log("更新后,num:",this.state.num);
14     };
// 打印得到的结果是: 0,0; 15 render() { 16 const { num } = this.state; 17 return ( 18 <div> 19 <h1>{num}</h1> 20 <button onClick={this.onClick}>+1</button> 21 </div> 22 ) 23 } 24 }
// 上述验证得到结果是异步执行


import React, { Component } from "react"; import ReactDOM from "react-dom"; // this.setState 到底是同步的还是异步的? class App extends Component { state = { num: 0 }; onClick = () => { console.log("更新前,num:",this.state.num); setTimeOut(()=>{ this.setState({ num: this.state.num + 1 }); console.log("更新后,num:",this.state.num); },1000) }; // 打印得到的结果是: 0,1; render() { const { num } = this.state; return ( <div> <h1>{num}</h1> <button onClick={this.onClick}>+1</button> </div> ) } } // 上述验证得到结果是同步执行

  总结:在react中,setState是异步执行,若将setState放在异步代码中,则为同步执行。

标签:React,面试题,react,异步,---,state,num,setState
From: https://www.cnblogs.com/wordxpp/p/17106137.html

相关文章

  • springcloud(四) - 服务治理Hystrix
    功能介绍调用下游服务,下游因为超时、异常等原因报错的时候。hystrix保证不会出现整体异常,避免雪崩。主要策略是服务的熔断、降级 应用场景降级:异常、超时、熔断等情况......
  • [threeJS]--- 外部导入的模型如何编程式实现帧动画以及调用模型自带的动画
    1.代码中编写帧动画并且调用 asyncfunctionkeyframeAni(object){consttimes=[0,2];//关键帧时间数组,单位'秒'constrorateValues=[0,-Math.PI*2];......
  • qiankun -- 微前端
    1.环境vue2.x@vue/cli5.0.8node16.18.02.搭建:使用vuecreate创建2个vue项目:qiankun-base,qiankun-subapp配置可参照官网及互联网资料进行。遇到的问题:在主应用......
  • springcloud(二) - 服务调用Feign&openFeign
    功能介绍:动态代理的方式,简化请求其他服务的开发成本,更好得对请求地址组装、接受返回信息、返回参数解析等  Feign和OpenFeign区别:OpenFeign实现了Feign的基础功能,同......
  • react 根据json分类显示数据 (react哲学示例部分)
    形如constPRODUCTS=[ {category:'SportingGoods',price:'$49.99',stocked:true,name:'Football'}, {category:'SportingGoods',price:'$9.99',sto......
  • springcloud(三) - 负载均衡Ribbon
    功能介绍基本保证每个服务不同的ip接收到的请求数量是一样的,确保在微服务下没有没有那个服务器负载过多而另外一个闲置。IRule:根据规则获取制定的服务  规则列表R......
  • 好客租房5-React脚手架的应用
    3.1react脚手架意义1脚手架是开发现代web应用的必备2充分利用webpackbabeleslint等工具进行使用3零配置4关注业务即可3.2使用react脚手架初始化项目1初始化项目命令:npx......
  • 好客租房2-React概述
    1.1什么是reactReact是一个用于构建用户界面的javascript库用户界面:HTML页面React主要用来HTML或者沟通构建web应用如果从MVC的角度来看react仅仅是从视图层也就是只负......
  • element el-table固定列凹陷问题
    1、业务背景列表显示字段过多,最后一栏操作列加固定显示,横向添加滚动条,在自测浏览器开发者模式时,发现固定列的最后一行出现了凹陷现象,网上查阅资料大多为在更新生命周期或者......
  • el-input 限制只能输入正整数
    1、前端页面<el-row:gutter="20"><el-col:span="20"><el-form-itemlabel="数量"prop="quantity"><el-inputclass="entity"placeho......