React中的setState方法究竟是同步还是异步？

已于 2022-10-09 19:47:41 修改
阅读量1.5k 收藏 2
点赞数 4
分类专栏： React 文章标签： javascript 前端 开发语言 react.js
于 2022-10-09 19:44:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_47199913/article/details/127232038
版权

        关于这个问题，答案无非就两种，要么是同步，要么是异步，哈哈哈哈！！！

        好了，不卖关子了，这个问题的答案就是：

setState更新数据状态是异步的，但也有同步的情况（17版本中）

        下面让我们来看看到底是怎么回事：

        首先，有一个需求：state中num的初始值为1，通过点击按钮实现num加一的操作：

        我们先用18的版本来测试一段代码

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    //react18版本
    <script src="./lib/react.development.js"></script>
    <script src="./lib/react-dom.development.js"></script>
    <script src="./lib/babel.min.js"></script>
</head>

<body>
    <div id="app"></div>
    <script type="text/babel">
        // 在React中更新数据的setState是异步的
        class App extends React.Component{
            state={num:1}
            add = ()=>{
                this.setState({num:this.state.num+1})
                console.log(this.state.num)//1
                }
            render(){
                return(
                    <div>
                        <button onClick={this.add}>{this.state.num}</button>    
                    </div>
                )
            }
        }
        const app = ReactDOM.createRoot(document.getElementById('app'))
        app.render(<App/>)
    </script>
</body>

</html>

运行结果：

结论： 此时界面上变成了2，但打印的结果还是1，由此可以看出setState更新数据状态是异步的

接下来，我们再把需求改一下：在之前的基础上点击一次连续加三次1

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    //react18版本
    <script src="./lib/react.development.js"></script>
    <script src="./lib/react-dom.development.js"></script>
    <script src="./lib/babel.min.js"></script>
</head>

<body>
    <div id="app"></div>
    <script type="text/babel">
        class App extends React.Component{
            state={num:1}
            add = ()=>{
                this.setState({num:this.state.num+1})
                console.log('1',this.state.num)//1
                this.setState({num:this.state.num+1})
                console.log('2',this.state.num)//1
                this.setState({num:this.state.num+1})
                console.log('3',this.state.num)//1
            }
            render(){
                return(
                    <div>
                        <button onClick={this.add}>{this.state.num}</button>    
                    </div>
                )
            }
        }
        const app = ReactDOM.createRoot(document.getElementById('app'))
        app.render(<App/>)
    </script>
</body>

</html>

运行结果：

此时页面只更新了一次，控制台打印三次1，说明：setState可以调用多次，会集中一次更新。

那么我们如何得到更新后的数据呢？

通过查找官方文档，setState接收两个参数，第一个：对象/函数 第二个：数据修改并且dom更新后的回调函数

证明：

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/react.development.js"></script>
    <script src="./lib/react-dom.development.js"></script>
    <script src="./lib/babel.min.js"></script>
</head>

<body>
    <div id="app"></div>
    <script type="text/babel">
        class App extends React.Component{
            state={num:1}
            add = ()=>{
                this.setState({num:this.state.num+1},()=>{
                    // state中的数据
                    console.log('setState回调',this.state.num);//2
                    // 按钮中的内容
                    console.log('dom',document.querySelector('button').innerText);//2
                })
                console.log(this.state.num);//1
            }
            render(){
                return(
                    <div>
                        <button onClick={this.add}>{this.state.num}</button>    
                    </div>
                )
            }
        }
        const app = ReactDOM.createRoot(document.getElementById('app'))
        app.render(<App/>)
    </script>
</body>

</html>

运行结果：

 此时回调函数中打印的结果以及按钮中的文本也是最新的，说明回调函数是在数据及dom更新完之后随之更新的，那么我们也可以在该回调函数中继续调用setState更新状态

但是，当我们写这种需求时，比如：要在原来状态的基础上进行操作的话，建议使用setState(函数)

官方建议：如果要在原来状态的基础上进行操作的话，建议使用setState(函数)

喔喔喔，原来setState第一个参数也可以是函数呀，那就试试呗

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/react.development.js"></script>
    <script src="./lib/react-dom.development.js"></script>
    <script src="./lib/babel.min.js"></script>
</head>

<body>
    <div id="app"></div>
    <script type="text/babel">
        // 在React中更新数据的setState是异步的
        class App extends React.Component{
            state={num:1}

            //官方：如果要在原来状态的基础上进行操作的话，建议使用setState(函数)
            add = ()=>{
                this.setState(prevState=>{
                    return{
                        num:prevState.num+1
                    }
                })
                this.setState(prevState=>{
                    return{
                        num:prevState.num+1
                    }
                },()=>{
                    console.log(this.state.num);
                })
                
            }
            render(){
                return(
                    <div>
                        <button onClick={this.add}>{this.state.num}</button>    
                    </div>
                )
            }
        }
        const app = ReactDOM.createRoot(document.getElementById('app'))
        app.render(<App/>)
    </script>
</body>

</html>

运行结果：

 此时，界面和打印结果都是最新的。因此，我们以后在遇到此种场景的时候就需要这样以函数的形式来使用

那么setState更新数据状态都是异步的吗？

这里我们使用react17测试一下

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    //react17版本
    <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="./lib/babel.min.js"></script>
</head>

<body>
    <!-- 在react17中，修改状态可能是同步的 -->
    <div id="app"></div>
    <script type="text/babel">
        class App extends React.Component{
            state = {num:1}
            add = ()=>{
                this.setState({num:this.state.num+1})
                console.log(this.state.num);//1
            }
            render(){
                return (
                    <div>
                        <button onClick={this.add}>{this.state.num}</button>
                    </div>
                )
            }
        }
        ReactDOM.render(<App/>,document.getElementById('app'))
    </script>
</body>

</html>

这里打印结果还是1，说明还是异步的

当使用定时器时：

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="./lib/babel.min.js"></script>
</head>

<body>
    <!-- 在react17中，修改状态可能是同步的 -->
    <div id="app"></div>
    <script type="text/babel">
        class App extends React.Component{
            state = {num:1}
            add = ()=>{
                // 1.定时器
                 setTimeout(()=>{
                     this.setState({num:this.state.num+1})
                     console.log(this.state.num);//2
                 })
            }
            render(){
                return (
                    <div>
                        <button onClick={this.add}>{this.state.num}</button>
                    </div>
                )
            }
        }
        ReactDOM.render(<App/>,document.getElementById('app'))
    </script>
</body>

</html>

运行结果：

 由此可见，在定时器的情况下更新状态是同步的

当时用Promise时：

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="./lib/babel.min.js"></script>
</head>

<body>
    <!-- 在react17中，修改状态可能是同步的 -->
    <div id="app"></div>
    <script type="text/babel">
        class App extends React.Component{
            state = {num:1}
            add = ()=>{
                
                // 2.Promise中
                Promise.resolve().then(()=>{
                    this.setState({num:this.state.num+1})
                    console.log(this.state.num);//2
                })
            }
            render(){
                return (
                    <div>
                        <button onClick={this.add}>{this.state.num}</button>
                    </div>
                )
            }
        }
        ReactDOM.render(<App/>,document.getElementById('app'))
    </script>
</body>

</html>

运行结果：

 由此可见，在使用Promise的情况下更新状态也是同步的

总结：

React更新数据状态是异步的，但是在react17中可能存在同步的情况（定时器，Promise）

好了，以上就更新状态同步和异步的情况已经做了详细说明，关于setState更新数据状态的答案想必大家都已经理解了吧，下次有人问你的时候，你可以理直气壮地讲给他听啦！！！！

是个程序员吧
关注
  • 4
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
setState是同步还是异步的？
油墨香^-^的博客
10-12 1277
组件中的所有函数在执行时临时设置一个变量isBatchingUpdates = true，当遇到setState时，如果isBatchingUpdates是true，那么setState就是异步的，如果是false，那么setState就是同步的。2 当函数遇到setTimeout、setInterval时isBatchingUpdates = false。setState在合成事件和生命周期函数中是异步的，在原生事件和定时器中都是同步的。是同步也是异步、合成事件、生命周期函数、原生事件、定时器。
【React】setState是同步的还是异步的？
南栀的博客
03-31 3511
异步情况下的setState() import React,{Compontent} from 'react'; class Mydemo extends React.Component { state = { num: 0 }; add = () => { this.setState({ num: this.state.num + 1 }) console.log(this.state
面试官：react中的setState()是同步还是异步？如何证明？
最新发布
m0_61408947的博客
04-13 752
面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。前端面试题汇总JavaScript性能linux前端资料汇总。
react setState 是同步还是异步？
m0_68866668的博客
04-23 159
在 React 中，setState() 方法既有同步的行为，也有异步的行为，具体取决于使用方式和场景，通常情况下，setState() 方法是异步执行的，也就是说，React 不会立即更新组件 state 的值，而是将这个更新动作放到一个队列中，等待合适的时机再去执行。这样可以避免频繁的重新渲染，提高性能。下面是一个示例，展示了在生命周期函数、事件处理函数和回调函数中调用 setState() 的不同行为：
彻底搞懂setState到底是同步还是异步（一)
y_ang_1的博客
03-22 863
React通过设置全局变量来标志当前的变化是否发生在React的可调度范围内。如果在可调度范围内，那么将开启批量更新，即表现为异步刷新。如果不在可调度范围内，那么将进入函数进行同步刷新。由于只有在React合成事件中才会设置标志，因此像setTimeout自定义监听事件.then等触发的数据更新都无法触发批处理，即表现为同步刷新。
React中的setState的同步异步与合并
wuyxinu的博客
02-20 4150
文章目录前言引入同步和异步合并浅析原理图总结最后再看一道常见面试题 前言 这篇文章主要是因为自己在学习React中setState的时候，产生了一些疑惑，所以进行了一定量的收集资料和学习，并在此记录下来 引入 使用过React的应该都知道，在React中，一个组件中要读取当前状态需要访问this.state，但是更新状态却需要使用this.setState，不是直接在this.state上修改，就比如这样： //读取状态 const count = this.state.count； //更新状态 thi
详解React中setState回调函数
08-27
"详解React中setState回调函数" React中setState回调函数是React框架中的一种重要机制，用于更新组件的状态。setState函数是异步的，因此在使用时需要特别注意。下面将详细介绍setState回调函数的使用方法和注意...
React：setState详解
01-02
react之setState遇到的坑、解释setState为什么是异步的、怎样变成同步setState。。。。。。
深入掌握 react的 setState的工作机制
08-29
setState 是 React 框架中最常用的方法之一，它允许开发者更新组件的状态。但是，setState 的工作机制却是 React 中最容易被误解的地方。今天，我们将深入探讨 setState 的工作机制，以便更好地理解和使用 setState...
浅谈使用React.setState需要注意的三点
08-28
在 React 中，使用 setState 是一件很复杂的事情，即使是熟练的 React 开发，也很有可能因为 React 的一些机制而产生一些 bug。因此，在使用 setState 时需要注意三个问题： 一、 setState 是异步的 setState 这个...
第十一篇：setState 到底是同步的，还是异步的？
越陌度阡
10-30 601
setState 对于许多的 React 开发者来说，像是一个“最熟悉的陌生人”： 1.当你入门 React 的时候，接触的第一波 API 里一定有 setState——数据驱动视图，没它就没法创造变化； 2.当你项目的数据流乱作一团的时候，层层排查到最后，始作俑者也往往是 setState——工作机制太复杂，文档又不说清楚，只能先“摸着石头过河”。 久而久之，setState 的工作机制渐渐与 React 调和算法并驾齐驱，成了 React 核心原理中区分度最高的知识模块之一。本讲我们就紧贴 R..
了解React中setState同步/异步表现
hao255的博客
05-19 564
一、了解 在React优化场景环境中，将对组件state的更改加入到队列中，并通知React需要使用更新后的state重新渲染组件及其子组件，用于更新用户界面、响应处理事件等主要方式。 二、特点 无论是this.setState还是hook，在调用state过程中都是一个请求的动作，不断加入React的state队列，并不会马上更新命令，而是会进行延迟调用，出现state更新的异步表现。 三、调用同步/异步的操作方式 1、异步表现 可以通过setState的第二个参数回调方法获取传递结果，或componen
关于setState的那点事
Mr_RedStar的博客
04-28 604
文章目录一、setState执行初探事件里的setState定时器里的setState二、setState的使用setState的第二个参数（callback）关于多个setState的执行setState第一个参数（函数写法）三、浅谈setState源码总结 一、setState执行初探 事件里的setState 请说出以下代码按钮点击之后输出的值： import React, { Component } from 'react' export default class App extends Co
浅析React中setState()的异步和同步机制
HenryYey博客
08-19 3942
场景引入 相信大家在使用React的时候都会遇到关于setState()的问题，例如以下场景: 本意是改变输入框时，对应替换state.text。但是如果在setState() 后打印一下就会发现，state的改变总是‘慢一拍’ 比如你输入123时，控制台会先后打印 ’ ’ ,‘1’, ‘12’ 。 经过思考和翻看文档，不难发现，这是因为setState()是异步的。如果换一种场景，在输入12...
setState是异步还是同步？
weixin_42539141的博客
11-16 1138
笔记：改setState为同步的三种方法 import React, { Component } from 'react' export default class App extends Component { constructor(props) { super(props); this.state = { age: 18, }; } // 1.async await方法 update = (asy
react的setState到底是同步还是异步？
公众号【猴哥说前端】
07-11 691
在介绍这个问题之前，我们先来看一下一个例子： state = { number:1 }; componentDidMount(){ this.setState({number:3}) console.log(this.state.number) } 看完这个例子，也许很多小伙伴会下意识的以为setState是一个异步方法，但是其实setState并没有异步的说法，之所以会有一种异步方法的表现形式，归根结底还是因为react框架本身的性能机制所导致的。因为每次调用setState都
setState是同步还是异步
jdrunk的博客
03-15 2899
在react中，修改状态如果直接使用this.state，不会引起组件的重新渲染，需要通过 this.setState来对组件的属性进行修改。 1、this.setState的两种定义方式 定义初始状态 state = { count: 0 }, 如果此时有一个按钮，点击按钮让计数加1，我们可以有两种写法 (1)传递对象 this.setState({ count: this.state.count + 1}) (2)传递函数 this.setState((state, props) =>.
React的setState同步和异步？
CSDN_chengchen的博客
09-18 119
异步: 1.setState在React本身事件中是异步的比如：用onClick，onChange绑定的事件是异步的。 2.在生命周期函数中是异步的，比如在componentDidMount中 同步： 1.在自己注册的事件中，比如:el.addEventLitener注册的事件 2.在setTimeout，setInterval中 3.在ajax回调中 可以自己试一下！ ...
setState是同步还是异步？
05-19
在 React 中，`setState` 实际上是异步更新状态的，也就是说，当我们调用 `setState` 方法时，React 并不会立刻更新组件的状态，而是将状态更新请求放入一个队列中，等到合适的时机再去批量更新状态。这种机制可以...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

是个程序员吧

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值