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
    评论
专栏目录
详解React中setState回调函数
08-27
"详解React中setState回调函数" React中setState回调函数是React框架中的一种重要机制，用于更新组件的状态。setState函数是异步的，因此在使用时需要特别注意。下面将详细介绍setState回调函数的使用方法和注意...
setState是同步还是异步的？
油墨香^-^的博客
10-12 1301
组件中的所有函数在执行时临时设置一个变量isBatchingUpdates = true，当遇到setState时，如果isBatchingUpdates是true，那么setState就是异步的，如果是false，那么setState就是同步的。2 当函数遇到setTimeout、setInterval时isBatchingUpdates = false。setState在合成事件和生命周期函数中是异步的，在原生事件和定时器中都是同步的。是同步也是异步、合成事件、生命周期函数、原生事件、定时器。
setState是同步还是异步
Ll1994693的博客
09-24 2038
如果判断是异步，那么react’就会收集setState，也就是收集我们定义的收集器，将我们的setState每个都push到定义的批量更新对象（updateQueue）的数组中，然后等事件函数结束的时候重置这个变量标志，才会取出之前缓存的setState，进行一次执行。相反，他们会先让你完成你的订单，让你修改它，甚至接受桌子上其他人的订单。那么在setState的时候，会判断该变量标识的值，如果是fasle，也就是setState同步更新，如果是同步，那么直接更新组件。绑定事件的时候 加上批量处理逻辑。
setState是同步还是异步问题讲解
qq_48637854的博客
05-26 2620
setState是同步执行的还是异步执行的。
【JavaScript源代码】代码解析React中setState同步和异步问题.docx
12-29
在React开发中，`setState`方法是用于更新组件的状态对象（`state`）的关键方法，它的行为有时会被误解，因为它可以表现出同步或异步的特性。理解这些特性对于编写高性能和可靠的React应用至关重要。 首先，我们要...
React：setState详解
01-02
react之setState遇到的坑、解释setState为什么是异步的、怎样变成同步setState。。。。。。
深入研究React中setState
11-27
在React框架中，`setState`方法是核心功能之一，它负责更新组件的状态（state），进而触发视图（View）的重绘。通过深入研究源码，我们可以了解`setState`背后的工作原理。 首先，当我们创建一个React组件时，例如`...
深入掌握 react的 setState的工作机制
08-29
setState 是 React 框架中最常用的方法之一，它允许开发者更新组件的状态。但是，setState 的工作机制却是 React 中最容易被误解的地方。今天，我们将深入探讨 setState 的工作机制，以便更好地理解和使用 setState...
react中的setState到底是同步还是异步的
weixin_39838846的博客
03-16 642
setState是同步还是异步的
【React】setState是同步的还是异步的？
南栀的博客
03-31 3518
异步情况下的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_69892739的博客
12-24 912
大部分开发中用到的都是React封装的事件，比如onChange、onClick、onTouchMove等（合成事件中），这些事件处理函数中的setState都是异步处理的。并不是说内部由异步代码实现，其实本身执行的过程和代码是同步的，只是合成事件和钩子函数的调用在更新之前，导致在合成事件和钩子函数中没法里吗拿到更新后的值，形成了所谓的"异步"setState本事代码的执行肯定是同步的，这里的异步是指的多个state会合并到一起进行批量更新。React控制之外的事件中调用setState是同步更新的。
react常见面试题之SetState是同步还是异步？实现同步的方法？是一个伪异步，实现的原理是什么？
XZ85201的博客
05-26 494
首先它是异步的； constructor(props){ super(props) this.state={ num:6666 } } fun=()=>{ this.setState({ ...
【每天一个知识点】setState 到底是同步的，还是异步的
youshenshiwoye的博客
04-24 3376
看了很多文章，再结合了自己的了解，我简化的说一下。 这里先说答案：setState本身是异步的，但在特殊环境（setTimeout、setInterval 等 DOM 原生事件）他是同步的。 先看一下代码： add () { this.setState({ count:10 }) // 这里拿不到 console.log(this.state.count) } 这是一个很明显的校验出setState是异步的情况。 假设你想同步获取值，setState还提提供
React setState同步更新的几种方法
分享互联网的有趣知识~
08-15 2699
官方文档在setState的说明上有这么一句话：State 的更新可能是异步的。也就是说，State在某些情况下可以是同步的表现形式。
一篇文章彻底理解setState是同步还是异步！
GMLGDJ的博客
03-08 1582
只要你进入了 react 的调度流程，那就是异步的。只要你没有进入 react 的调度流程，那就是同步的。什么东西不会进入 react 的调度流程？ setTimeout setInterval ，直接在 DOM 上绑定原生事件等。这些都不会走 React 的调度流程，你在这种情况下调用 setState ，那这次 setState 就是同步的。 否则就是异步的。 而 setState 同步执行的情况下， DOM 也会被同步更新，也就意味着如果你多次 setState ，会导致多次更新，这是毫无意义并且浪费
react 中 setState 如何 实现同步的用法，入门级别理解
业余前端的职业经历
06-26 3735
其实 博主之前是搞vue开发的，后来就转了react，现在全职搞react也有两个月了， 之前面试的时候碰见一个 有趣的问题， 面试官问 如何在react中实现同步的写法，我有点疑惑了，说实话刚转过来，对react并不是太熟悉 有的功能也没有完全摸透。 我就实话说说了，这个还真没有用过呢， 麻烦老哥稍微提点一下，那个面试官就说了，在某些原生js事件种，或者 setTimeout 和 setIntrval中可以获取到 最新的state状态 达到同步的效果。 这里 我们来尝试看下 效果哈 拿类式组件 来做例子
setState同步的，还是异步的?
最新发布
qq_70036866的博客
09-01 110
2．在定时器里面和原生事件里面是同步的（(onclick addEventListener setTimeout setInterval)3. setState为什么能通过this访问。this.setstate 是通过原型链查找的。4.setState的第一个参数，可以是对象，也可以是函数、null。1．在合成事件和声明周期里面是异步的。答案，既有同步也有异步。
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、付费专栏及课程。

余额充值