setState是同步更新还是异步更新的

最新推荐文章于 2024-03-22 15:09:11 发布
最新推荐文章于 2024-03-22 15:09:11 发布
阅读量541 收藏 1
点赞数
分类专栏： react面试 文章标签： javascript 前端 react.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52563729/article/details/127795847
版权

setState用于变更状态触发组件重新渲染，更新视图UI.不清楚setState什么时候更新,所以难以解释是同步的还是异步的

只需要说明什么是同步场景什么是异步场景

首先我们要知道什么是合成事件?

1.React给document挂上事件监听
2.DOM事件触发后冒泡到document
3.React找到对应的组件造出一个合成事件出来
4.并按组件树模拟一遍事件冒泡

在这里插入图片描述

在这里插入图片描述

调用顺序

通常我们认为是异步的,React根据队列逐一执行，合并state数据完成后执行回调，根据结果更新虚拟DOM触发渲染.

为什么设置为异步

1.保持内部的一致性
2.为后续的架构升级启用并发更新,根据数据的来源分配不同的优先级,再根据优先级并发处理提升渲染的性能
3.统一渲染,减少渲染的次数.提升性能

什么时候优势同步的呢???

在这里插入图片描述
正确的应该是输出0和1,为什么???

因为我们的setState并不是真正的异步函数,是通过队列延迟操作来模拟实现的,通过isBatchUpdate来判断是先存进队列还是同步跟新…值为t则执行异步操作,值为f,则为同步更新

在外部的原生事件中,并没有外层的封装和拦截,无法更新isBatchUpdate的值,导致值为false.所以我们会立即渲染.

总结:
在addEventListener . setTimeout.setlnterval这些原生事件中都会同步更新

在这里插入图片描述

大总结:

在这里插入图片描述

pqxpq
关注
专栏目录
【JavaScript源代码】代码解析React中setState同步和异步问题.docx
12-29
在React开发中，`setState`方法是用于更新组件的状态对象（`state`）的关键方法，它的行为有时会被误解，因为它可以表现出同步或异步的特性。理解这些特性对于编写高性能和可靠的React应用至关重要。 首先，我们要...
setState是同步还是异步
Ll1994693的博客
09-24 2078
如果判断是异步，那么react’就会收集setState，也就是收集我们定义的收集器，将我们的setState每个都push到定义的批量更新对象（updateQueue）的数组中，然后等事件函数结束的时候重置这个变量标志，才会取出之前缓存的setState，进行一次执行。相反，他们会先让你完成你的订单，让你修改它，甚至接受桌子上其他人的订单。那么在setState的时候，会判断该变量标识的值，如果是fasle，也就是setState同步更新，如果是同步，那么直接更新组件。绑定事件的时候 加上批量处理逻辑。
React-50：setState
臧小川的博客
09-02 300
对象形式 也是最经常用到的 import React, { Component } from 'react'; export default class Demo extends Component { state = { count: 0 }; add = () => { //对象式的setState //1.获取原来的count值 const { count } = this.state; //2.更新状态 this.setState({ c.
setState是同步还是异步问题讲解
qq_48637854的博客
05-26 2691
setState是同步执行的还是异步执行的。
setState 是同步，还是异步的？
路人贾！
01-07 221
setState 是同步，还是异步的？
react基本原理---setState() 是异步更新数据的
imkaifan的博客
09-13 576
更新数据 setState() 是异步更新数据的 注意：使用该语法时，后面的setState() 不要依赖于前面的setState() 可以多次调用 setState() ，只会触发一次重新渲染 (为了提高性能) import React from 'react'; import ReactDOM from 'react-dom'; class App extends React.Component { state = { num: 1 }; handle..
深入掌握 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
这意味着开发者可以指定某些`setState`调用以异步的方式执行，以便更好地控制应用的状态更新。 ### 总结 综上所述，`setState`在React中的执行并不是简单的宏任务或微任务。它实际上是通过React框架的内部机制来...
浅谈使用React.setState需要注意的三点
08-28
setState 的调用没有任何同步性的保证，并且调用可能会为了性能收益批量执行。因此，在使用 setState 时需要注意调用顺序，避免不必要的重新渲染。例如，在上面的例子中，在 onKeyDown 方法中，使用 setState 来更新...
React原理解密
liuyuhua666的博客
07-19 946
1. setState() 的说明 1.1 更新数据 setState() 是异步更新数据的 注意：使用该语法时，后面的 setState() 不要依赖于前面的 setState() 可以多次调用 setState() ，只会触发一次重新渲染 this.state = { count: 1 } this.setState({ count: this.state.count + 1 }) co...
setState是同步还是异步的？
油墨香^-^的博客
10-12 1482
组件中的所有函数在执行时临时设置一个变量isBatchingUpdates = true，当遇到setState时，如果isBatchingUpdates是true，那么setState就是异步的，如果是false，那么setState就是同步的。2 当函数遇到setTimeout、setInterval时isBatchingUpdates = false。setState在合成事件和生命周期函数中是异步的，在原生事件和定时器中都是同步的。是同步也是异步、合成事件、生命周期函数、原生事件、定时器。
彻底搞懂setState到底是同步还是异步（一)
最新发布
y_ang_1的博客
03-22 1244
React通过设置全局变量来标志当前的变化是否发生在React的可调度范围内。如果在可调度范围内，那么将开启批量更新，即表现为异步刷新。如果不在可调度范围内，那么将进入函数进行同步刷新。由于只有在React合成事件中才会设置标志，因此像setTimeout自定义监听事件.then等触发的数据更新都无法触发批处理，即表现为同步刷新。
setState异步、同步与进阶
weixin_33705053的博客
11-18 637
如何使用setState 在 React 日常的使用中，一个很重要的点就是，不要直接去修改 state。例如：this.state.count = 1是无法触发 React 去更新视图的。因为React的机制规定，一个state的更新，首先需要调用 setState 方法。 this.setState({ count: 1 }) ...
React 中setState更新state何时同步何时异步？
bgogo的博客
10-29 877
React中constructor是唯一可以初始化state的地方，也可以把它理解成一个钩子函数，该函数最先执行且只执行一次。 更新状态不要直接修改this.state。虽然状态可以改变，但不会触发组件的更新。 应当使用this.setState()，该方法接收两种参数：对象或函数。 对象：即想要修改的state 函数：接收两个函数，第一个函数接受两个参数，第一个是当前state，第二个是当前props，该函数返回一个对象，和直接传递对象参数是一样的，就是要修改的state；第二个函数参数是stat
React中的setState方法究竟是同步还是异步？
qq_47199913的博客
10-09 1641
React中的setState方法究竟是同步还是异步？
深入剖析setState同步异步机制
AI乔治
01-18 857
关于 setState setState 的更新是同步还是异步，一直是人们津津乐道的话题。不过，实际上如果我们需要用到更新后的状态值，并不需要强依赖其同步/异步更新机制。在类组件中，我们可以通过 this.setState的第二参数、 componentDidMount、 componentDidUpdate等手段来取得更新后的值；而在函数式组件中，则可以通过 useEffect来获取更新后的状态。所以这个问题，其实有点无聊。 不过，既然大家都这么乐于讨论，今天我们就系统地梳理一下这个问题，主要...
关于setState的异步更新
qq_45830543的博客
12-23 1201
我们都知道setState是异步执行的； 事实上，setState本身的执行过程是同步的，只是因为在react的 合成事件与钩子函数 中它的执行顺序在更新之前，所以不能直接拿到更新后的值，形成了所谓的异步。 那么请问setState是什么时候是同步的呢？ 事实上它在ajax、原生事件与setTimeout中是同步的。 今天主要是深入探讨一下关于setState为什么是异步的问题。 先来看一个例子。它是在面试里非常容易出现的一道题。 import React, { Component } from 'reac
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、付费专栏及课程。

余额充值