setState是同步还是异步

最新推荐文章于 2024-04-13 04:47:41 发布
最新推荐文章于 2024-04-13 04:47:41 发布
阅读量3.1k 收藏 8
点赞数
分类专栏： js react javascript 文章标签： react.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41716949/article/details/120067120
版权
本文探讨React中setState的同步与异步性质。setState实际上是一个异步操作，为了优化性能，避免频繁渲染。当需要依赖当前状态更新时，应传递函数而非对象。文章通过实例说明了传递对象和函数的区别，并指出在处理异步更新时应注意的问题。
摘要由CSDN通过智能技术生成
同步异步探讨
关于setState附上官网地址一份

setState描述

其实探讨是否是同步还是异步这个问题很好理解，可结合EventLoop来参照

  • 能紧随其后拿到结果的可以认为同步（简单理解哈，一些场景暂不考虑，就像有一些属于异步的但是异步任务刚好都结束了，直接拿到了对应的结果等）
  • 至于异步，他添加在异步队列，不影响同步任务的执行，在所有的同步任务执行完它才会按照顺序开始执行队列里面的任务，有一个等待的过程

而setState它是属于异步任务，试想一下，如果它是同步更新的，那我们每次setState一次就更新会浪费多少渲染消耗，一个页面可能十来个就要渲染十几次，无疑浪费性能开销。所以他设计成了异步任务，将其统一添加到异步队列里面，等待所有的函数等同步任务执行完之后，统一执行setstate更新状态，就像vue的异步事件队列一样。nexttick的设计也是利用这种思想来设计，利用新开启的异步队列延迟执行

setState使用

基本使用
这只是简单的赋值，但是我们是不能直接在下面拿到count的值为10 的

add () {
   
    this.setState({
   
        count:10
    })
    // 这里拿不到
    console.log(this.state
最低0.47元/天 解锁文章
浅听记忆2
关注
  • 0
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【JavaScript源代码】代码解析React中setState同步和异步问题.docx
12-29
在React开发中，`setState`方法是用于更新组件的状态对象（`state`）的关键方法，它的行为有时会被误解，因为它可以表现出同步或异步的特性。理解这些特性对于编写高性能和可靠的React应用至关重要。 首先，我们要...
setState是同步还是异步问题讲解
qq_48637854的博客
05-26 2648
setState是同步执行的还是异步执行的。
setState是同步还是异步的？
油墨香^-^的博客
10-12 1352
组件中的所有函数在执行时临时设置一个变量isBatchingUpdates = true，当遇到setState时，如果isBatchingUpdates是true，那么setState就是异步的，如果是false，那么setState就是同步的。2 当函数遇到setTimeout、setInterval时isBatchingUpdates = false。setState在合成事件和生命周期函数中是异步的，在原生事件和定时器中都是同步的。是同步也是异步、合成事件、生命周期函数、原生事件、定时器。
React：setState详解
01-02
react之setState遇到的坑、解释setState为什么是异步的、怎样变成同步setState。。。。。。
深入掌握 react的 setState的工作机制
08-29
很多开发者认为，setState 是同步的，但是实际上，setState 是异步的。例如： `handleSyncStateChange = () => { this.setState({ demo: this.state.demo + 1 }); this.setState({ demo: this.state.demo...
详解React中setState回调函数
08-27
在使用setState函数时，需要注意的是，setState是异步的，因此不能保证数据的同步。例如，如果我们在使用setState函数更新状态后，立即使用`this.state`访问状态，可能不会获取到最新的状态。例如： ```javascript ...
【JavaScript源代码】详细谈谈React中setState是一个宏任务还是微任务.docx
12-29
### React中的`setState`: 宏任务还是微任务？ #### 前言 在前端开发领域，尤其是对于React框架的学习和应用过程中，`setState`作为React组件状态管理的关键API，其执行机制一直是开发者们关注的重点之一。本文将...
React中的setState方法究竟是同步还是异步？
qq_47199913的博客
10-09 1608
React中的setState方法究竟是同步还是异步？
this.setState同步还是异步？
outstanding木槿
01-12 530
this.setState()不保证是同步的，所以在if条件中调用setState修改后的值，是做不到更新。利用this.setState()的第二个参数：回调函数，在等第一个参数内的state更新后再调用。param2: 回调函数 --- 等待state更新后，执行的函数。param1: 对象或函数 --- 改变state的值。发现if语句里拿不到type的值。
setState同步的，还是异步的?
qq_70036866的博客
09-01 133
2．在定时器里面和原生事件里面是同步的（(onclick addEventListener setTimeout setInterval)3. setState为什么能通过this访问。this.setstate 是通过原型链查找的。4.setState的第一个参数，可以是对象，也可以是函数、null。1．在合成事件和声明周期里面是异步的。答案，既有同步也有异步。
【每天一个知识点】setState 到底是同步的，还是异步的
youshenshiwoye的博客
04-24 3398
看了很多文章，再结合了自己的了解，我简化的说一下。 这里先说答案：setState本身是异步的，但在特殊环境（setTimeout、setInterval 等 DOM 原生事件）他是同步的。 先看一下代码： add () { this.setState({ count:10 }) // 这里拿不到 console.log(this.state.count) } 这是一个很明显的校验出setState是异步的情况。 假设你想同步获取值，setState还提提供
彻底搞懂setState到底是同步还是异步（一)
y_ang_1的博客
03-22 1067
React通过设置全局变量来标志当前的变化是否发生在React的可调度范围内。如果在可调度范围内，那么将开启批量更新，即表现为异步刷新。如果不在可调度范围内，那么将进入函数进行同步刷新。由于只有在React合成事件中才会设置标志，因此像setTimeout自定义监听事件.then等触发的数据更新都无法触发批处理，即表现为同步刷新。
this.setState的详细用法
oldwang1999的博客
08-31 4745
1.为什么不要直接对state进行赋值？ 如果直接对this.state复制是不会去更新视图的,this.setState的原理是同一个队列来实现state的更新的,将需要更新的state放入到状态队列中,在一定时间段之后,合并并更新state,然后进行渲染.而直接对this.state赋值是不会有这些操作的,因此不要对state进行直接赋值. 2.this.setState为什么是异步的? this.setState的操作是异步的,是为了提升性能对state的更新进行批量操作,官方文档中的原话:
setState 到底是同步的，还是异步的
最新发布
2401_84091742的博客
04-13 992
技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。有需要面试题资料的朋友点击这里可以领取。
一篇文章彻底理解setState是同步还是异步！
GMLGDJ的博客
03-08 1618
只要你进入了 react 的调度流程，那就是异步的。只要你没有进入 react 的调度流程，那就是同步的。什么东西不会进入 react 的调度流程？ setTimeout setInterval ，直接在 DOM 上绑定原生事件等。这些都不会走 React 的调度流程，你在这种情况下调用 setState ，那这次 setState 就是同步的。 否则就是异步的。 而 setState 同步执行的情况下， DOM 也会被同步更新，也就意味着如果你多次 setState ，会导致多次更新，这是毫无意义并且浪费
setstate 是同步还是异步
07-27
回答: setState既可以是同步的，也可以是异步的，取决于它被调用的环境。在异步环境中，如promise的then()方法、setTimeOut()、setInterVal()、ajax的回调等，setState是异步的。而在同步环境中，setState是同步的。\[1\]举个例子来说，如果在一个同步环境中调用setState，那么setState是异步的，因为它还未被赋值。而如果在一个异步环境中调用setState，那么setState是同步的，因为它会立即执行并更新状态。\[2\]需要注意的是，setState的异步并不是指内部由异步代码实现，而是指合成事件和钩子函数的调用在更新之前，导致在合成事件和钩子函数中无法立即获取到更新后的值，形成了所谓的"异步"。\[3\] #### 引用[.reference_title] - *1* *2* [setState是同步还是异步问题讲解](https://blog.csdn.net/qq_48637854/article/details/124980239)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [React中的setState是同步还是异步](https://blog.csdn.net/m0_69892739/article/details/128424377)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值