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放在异步代码中,则为同步执行。

posted @   zhijie_wang  阅读(42)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配,妙~啊~
· .NET Core 中如何实现缓存的预热?
点击右上角即可分享
微信分享提示