React中 setState 是同步的还是异步的?调和阶段 setState 干了什么?

React中 setState 是同步的还是异步的

  • 1. React 的 setState 是异步的
  • 2. 为什么 setState 在合成事件和生命周期函数中是异步的
  • 3. 为什么 setState 在原生事件和定时器中是同步的
  • 4. 为什么要这样设计?
  • 调和阶段是什么
  • setState在调和阶段干了什么?
  • 总结:

1. React 的 setState 是异步的

在 React 中,setState 并不是立即更新组件的状态,而是被放入一个更新队列。React 会批量处理这些更新,以提高性能。这种更新行为在一些情况下是异步的,特别是在某些事件回调或生命周期函数中。

2. 为什么 setState 在合成事件和生命周期函数中是异步的

React 的合成事件(Synthetic Events)和生命周期方法(如 componentDidMount、componentDidUpdate)是与 React 的事件处理和渲染周期紧密相关的。当你在这些地方调用 setState 时,React 会将更新加入到事件循环的下一轮,这样做是为了批量更新。

批量更新:在一个事件处理或生命周期方法内,React 会将多个 setState 更新合并(或“批处理”),以减少重新渲染的次数。这有助于提升性能,避免因每次状态变更都重新渲染组件。

异步行为:为了支持批量更新,React 会将状态更新的操作排入队列,并异步执行。这意味着,在同一个事件回调内,setState 并不会立即生效。你无法在 setState 之后立即读取到更新后的状态。

举个例子:

handleClick() {this.setState({ count: this.state.count + 1 });console.log(this.state.count); // 这里输出的值是旧的,因为setState是异步的
}

React 会将状态更新的操作放到事件队列中,等事件处理完后再批量执行更新。这就意味着,this.state.count 在 console.log 时,仍然是更新前的值。

3. 为什么 setState 在原生事件和定时器中是同步的

在原生事件和定时器中,React 选择了同步更新状态。这是因为 React 的更新机制和原生事件及定时器的执行机制有所不同。

原生事件:当你在原生事件(如 click、keydown 等)中调用 setState 时,React 会同步执行更新。这是因为原生事件是浏览器的事件系统,不依赖于 React 的事件系统批处理机制,因此 React 会立即执行状态更新并重新渲染组件。

定时器:setTimeout 或 setInterval 等定时器回调函数也是同步的,因为它们是在 JavaScript 执行队列中排队的,React 在这些情况下也会直接处理状态更新。

举个例子:

handleClick() {setTimeout(() => {this.setState({ count: this.state.count + 1 });console.log(this.state.count); // 此时输出的是新的值}, 0);
}

在这个例子中,由于 setState 是在 setTimeout 回调中调用的,React 会在这个回调执行完之后立即同步更新状态并重新渲染。

4. 为什么要这样设计?

React 设计这种行为是为了优化性能。通过将 setState 更新合并、批量处理,React 能减少不必要的重新渲染,从而提高性能。在合成事件和生命周期方法中,React 能够在事件循环的下一轮批量更新所有状态,避免频繁渲染。

而在原生事件和定时器中,React 选择同步更新,是为了避免与浏览器的原生事件处理和定时器队列发生冲突。如果 setState 在这些场景中是异步的,可能会导致不符合预期的渲染行为。

调和阶段是什么

调和阶段是 React 渲染过程中,从旧的虚拟 DOM 到新的虚拟 DOM 的比较过程。React 会根据新状态或新属性重新计算出组件的虚拟 DOM 树,并与当前的虚拟 DOM 树进行对比,然后通过差异算法(也叫做Diffing 算法)来找到两者之间的差异,最终生成最小的更新策略,然后将更新应用到真实 DOM 上。

setState在调和阶段干了什么?

  • 调和阶段 是 React 更新流程中的一部分,负责比较旧的虚拟 DOM 和新的虚拟 DOM,计算出需要更新的最小差异,并将这些差异应用到真实 DOM 上。
  • setState 是触发更新的机制,通过异步更新和批处理,React 能高效地更新组件状态并重新渲染 UI。
  • setState 的工作原理和调和过程密切相关,setState 更新的状态最终通过调和过程影响虚拟 DOM 的变化,并应用到真实 DOM 上。

总结:

合成事件和生命周期函数中:setState 是异步的,React 会批量处理更新以提高性能。
原生事件和定时器中:setState 是同步的,React 会立即执行状态更新,以避免与原生事件的同步执行发生冲突。
这种设计主要是为了平衡性能和正确的行为,确保 React 在不同场景下都能高效、可预测地工作。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/477318.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Redis最终篇分布式锁以及数据一致性

在前三篇我们几乎说完了Redis的所有的基础知识以及Redis怎么实现高可用性,那么在这一篇文章中的话我们主要就是说明如果我们使用Redis出现什么问题以及解决方案是什么,这个如果在未来的工作中也有可能会遇到,希望对看这篇博客的人有帮助,话不多说直接开干 一.Hotkey以及BigKey…

docker搭建私有的仓库

docker搭建私有仓库 一、为什么要搭建私有的仓库? 因为在国内,访问:https://hub.docker.com/ 会出现无法访问页面。。。。(已经使用了魔法) 当然现在也有一些国内的镜像管理网站,比如网易云镜像服务、Dao…

1123--日期类

目录 一 java 1. Date类 2. calendar类 3. 第三代日期类‘ 3.1 常用方法 3.2 格式化操作 一 java 1. Date类 2. calendar类 3. 第三代日期类‘ 3.1 常用方法 3.2 格式化操作

07-Making a Bar Chart with D3.js and SVG

课程链接 Curran的课程,通过 D3.js 的 scaleLinear, max, scaleBand, axisLeft, axisBottom,根据 .csv 文件生成一个横向柱状图。 【注】如果想造csv数据,可以使用通义千问,关于LinearScale与BandScale不懂的地方也可以在通义千…

mysql根据日期查询没有的日期也要显示数据

先查询出日期数据(当前日期往前推12个月) select bb.datefrom (select num : num 1,date_format(adddate(date_sub(date_sub(curdate(),interval 12 month),interval 1 month),interval num month), %Y-%m) as datefrom mysql.help_topic,(select num : 0) as twhere addd…

计算机网络 实验六 组网实验

一、实验目的 通过构造不同的网络拓扑结构图并进行验证,理解分组转发、网络通信及路由选择的原理,理解交换机和路由器在子网划分中的不同作用。 二、实验原理 组网实验是指将多个计算机通过网络连接起来,实现数据的共享和通信。 组网需要考虑…

10-单表查询

SQL语言 sql语言分类 SQL类别主要动作DQL(Data Query Language)SELECT(通常与FROM、WHERE、GROUP BY、HAVING、ORDER BY等组合使用),用作数据chaxunDMLINSERT、UPDATE和DELETE,用作定义数据库记录(数据)TCLCOMMIT、ROLLBACK、SAVEPOINT、SET TRANSACTI…

深度学习每周学习总结J6(ResNeXt-50 算法实战与解析 - 猴痘识别)

🍨 本文为🔗365天深度学习训练营 中的学习记录博客🍖 原作者:K同学啊 | 接辅导、项目定制 目录 0. 总结ResNeXt基本介绍 1. 设置GPU2. 导入数据及处理部分3. 划分数据集4. 模型构建部分5. 设置超参数:定义损失函数&…

采用python3.12 +django5.1 结合 RabbitMQ 和发送邮件功能,实现一个简单的告警系统 前后端分离 vue-element

一、开发环境搭建和配置 #mac环境 brew install python3.12 python3.12 --version python3.12 -m pip install --upgrade pip python3.12 -m pip install Django5.1 python3.12 -m django --version #用于检索系统信息和进程管理 python3.12 -m pip install psutil #集成 pika…

【H2O2|全栈】JS进阶知识(八)ES6(4)

目录 前言 开篇语 准备工作 浅拷贝和深拷贝 浅拷贝 概念 常见方法 弊端 案例 深拷贝 概念 常见方法 弊端 逐层拷贝 原型 构造函数 概念 形式 成员 弊端 显式原型和隐式原型 概念 形式 constructor 概念 形式 原型链 概念 形式 结束语 前言 开篇语…

订单日记为“惠采科技”提供全方位的进销存管理支持

感谢温州惠采科技有限责任公司选择使用订单日记! 温州惠采科技有限责任公司,成立于2024年,位于浙江省温州市,是一家以从事销售电气辅材为主的企业。 在业务不断壮大的过程中,想使用一种既能提升运营效率又能节省成本…

【Isaac Sim】配置 Nucleus 本地服务器

Omniverse 提供了本地(局域)服务器 Nucleus,可以将资产上传到该服务器,Nucleus 能够高效地存储和管理大量三维模型和其他资产,确保用户可以轻松访问这些资源。它还支持多用户环境下的实时协作,使得不同地理…

递归-迭代

24. 两两交换链表中的节点 Leetcode 24 给你一个链表,两两交换其中相邻的节点,并返回交换后链表的头节点。你必须在不修改节点内部的值的情况下完成本题(即,只能进行节点交换)。 递归解法 // 注意:cpp …

小蒋聊技术:大数据驱动决策——技术落地与业务深度融合

时间:2024年 10月 23日 作者:小蒋聊技术 邮箱:wei_wei10163.com 音频: 喜马拉雅 一.数据决策,真的是企业的“未来”吗? 大家好,欢迎来到“小蒋聊技术”!今天,我们继续聊一个让企业关…

无插件直播流媒体音视频播放器EasyPlayer.js播放器的g711系列的音频,听起来为什么都是杂音

在数字化时代,流媒体播放器已成为信息传播和娱乐消遣的重要工具。随着技术的进步,流媒体播放器的核心技术和发展趋势不断演变,以满足用户对于无缝播放、低延迟和高画质的需求。 EasyPlayer播放器属于一款高效、精炼、稳定且免费的流媒体播放…

UVM 验证方法学之interface学习系列文章(七)高级 《bind 操作》(4)级联

在 SystemVerilog 中,bind 操作符用于将一个模块或接口实例绑定到另一个模块或接口的层次结构中。这在很多情况下非常有用,尤其是当你需要在不修改原始模块代码的情况下,添加或替换某些组件时。bind 操作符常用于仿真和测试平台中,以便灵活地组织测试环境。 前面的文章,我…

Vue3+SpringBoot3+Sa-Token+Redis+mysql8通用权限系统

sa-token支持分布式token 前后端代码,地球号: bright12389

Ansys Zemax Optical Studio 中的近视眼及矫正

近视,通常称为近视眼,是一种眼睛屈光不正,导致远处物体模糊,而近处物体清晰。这是一种常见的视力问题,通常发生在眼球过长或角膜(眼睛前部清晰的部分)过于弯曲时。因此,进入眼睛的光…

利用FileZilla搭建ftp服务器

一 利用windows自带的ftp服务搭建服务器,要复杂一些,好处是无需借用外部软件。 也有一些好的工具,如FileZilla的Server版,构建过程简单,好用。 下面看看。 二 安装FileZilla Server 当前下载版本是0.9.43&#xf…

2022 年中高职组“网络安全”赛项-海南省省竞赛任务书-1-B模块B-1-Windows操作系统渗透测试

前言 本章节我将带领大家一起重新模拟操作一次Windows渗透测试模块,并加固的流程。 任务概览 环境部署 我的实验复现环境: 服务器Windows server 2008 R2 攻击机Kali Linux 场景操作系统Windows 7 额外还有台交换机支持: 这里我使用的是…