React面试题---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 }
// 上述验证得到结果是异步执行
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <br> 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放在异步代码中,则为同步执行。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配,妙~啊~
· .NET Core 中如何实现缓存的预热?