React中setState的原理及深层理解

news2024/10/3 23:21:49

1.为什么使用setState

React并没有实现类似于Vue2中的Object.defineProperty或者Vue3中的Proxy的方式来监听数据的变化

我们必须通过setState来告知React数据已经发生了变化

setState方法是从Component中继承过来的。

2.setState异步更新

  • setState设计为异步,可以显著的提升性能
    • 如果每次调用 setState都进行一次更新,那么意味着render函数会被频繁调用,界面重新渲染,这样效率是很低的
    • 最好的办法应该是获取到多个更新,之后进行批量更新
  • 如果同步更新了state,但是还没有执行render函数,那么state和props不能保持同步
如何可以获取到更新后的值
方式一

setState的回调

setState接受两个参数:第二个参数是一个回调函数,这个回调函数会在更新后会执行

setState(partialState, callback)

方式二

生命周期内获取

3.setState异步与同步的理解

在React18版本之前

分成两种情况

  • 在组件生命周期或React合成事件中,setState是异步;
  • 在setTimeout或者原生dom事件中,setState是同步;

在React18版本之后

默认所有的操作都被放到了批处理中,异步处理

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

23. 图论 - 图的由来和构成

文章目录 图的由来图的构成Hi, 你好。我是茶桁。 从第一节课上到现在,我基本上把和人工智能相关的一些数学知识都教给大家了,终于来到我们人工智能数学的最后一个部分了,让我们从今天开始进入「图论」。 图论其实是一个比较有趣的领域,因为微积分其实更多的是对应连续型的…

【react】使用useEffect操作dom

简言 在学习react时,需要了一个需要在useEffect里操作dom的用法。 一般不推荐这么干,如果是函数组件在一渲染已挂载后立即需要操作dom绑定事件等可以参考下面解决方法。 描述 官网交错运动示例这个示例中,usePointerPosition() Hook 追踪当…

【前段基础入门之】=>初识 HTML

文章目录 前言HTML的详情简介HTML 发展史HTML 入门1. HTML 标签元素2. HTML标签属性3. HTML的标准结构 总结 前言 在整个前端开发中,必须掌握的技术栈为: HTML ,CSS,JavaScript,它们三者,共同组成了前端开发…

华为云云耀云服务器L实例评测|认识redis未授权访问漏洞 漏洞的部分复现 设置连接密码 redis其他命令学习

前言 最近华为云云耀云服务器L实例上新,也搞了一台来玩,期间遇到过MySQL数据库被攻击的情况,数据丢失,还好我有几份备份,没有造成太大的损失。昨天收到华为云的邮箱提醒,我的redis数据库没有设置密码&…

MySQL高级语句 Part2(视图表 +存储过程+条件语句+循环语句)

这里写目录标题 一、视图表 create view1.1 视图表概述1.2 视图表能否修改?(面试题)1.3 基本语法1.3.1 创建1.3.2 查看1.3.3 删除 1.4 通过视图表求无交集值 二、case语句三、空值(null) 和 无值( ) 的区别四、正则表达式4.1 基本语法和匹配模…

pcl--第十二节 2D和3D融合和手眼标定

2D&3D融合 概述 截止目前为止,我们学习了机器人学,学习了2D和3D视觉算法。我们也学习了2D相机(图像数据的来源)和3D相机(点云数据的来源)工作原理。 实际上,我们最终要做的,是一个手眼机器人系统。在这个系统里&#xff0c…

数据仓库整理

数仓 olap vs oltp OLTP主要用于支持日常的业务操作,如银行交易、电子商务等,强调数据的准确性、实时性和并发性。OLAP主要用于支持复杂的数据分析,如数据仓库、决策支持等,强调数据的维度、聚合和可视化。 将OLTP数据库的数据…

接入国家能源平台MQTT应用案例

一、项目介绍 随着国家对节能环保措施的力度不断加大,基于物联网技术搭建的国家能源平台在国家相关部门的建设下逐渐成熟。致力于利用实际能耗数据建立能效仿真模型,通过实时寻优运算,获得当前的最优化运行策略,并将控制指令下发…

从Langchain到ReAct,在大模型时代下全新的应用开发核心

简介: 什么是ReAct框架关于什么是langchain,可以参考:https://ata.alibaba-inc.com/articles/266839?spmata.23639420.0.0.1dea7536uD7yhh在使用langchain的过程中,大模型给人留下最深刻的印象无疑是Agent功能。大模型会自己分析…

@Cacheable 注解(指定缓存位置)

一、Cacheable的作用 1、缓存使用步骤:Cacheable这个注解,用它就是为了使用缓存的。所以我们可以先说一下缓存的使用步骤: 1、开启基于注解的缓存,使用 EnableCaching 标识在 SpringBoot 的主启动类上。 2、标注缓存注解即可 使用…

【Less-CSS】初识Less,使编写 CSS 变得简洁

初识Less,使编写 CSS 变得简洁 1.Less简述2.LESS 原理及使用方式3.示例4.less语法5.Easy Less插件 作为一门标记性语言,CSS 的语法相对简单,对使用者的要求较低,但同时也带来一些问题:CSS 需要书写大量看似没有逻辑的代…

【初阶数据结构】二叉树链式结构的实现和遍历

个人主页 代码仓库 C语言专栏 初阶数据结构专栏 Linux专栏 目录 前言 二叉树链式结构的实现 二叉树的遍历 前序、中序和后序遍历 前序遍历 中序遍历 后序遍历 求结点个数 求总的结点个数 创建变量求结点 创建静态修饰变量 拆分左右子树加根 求叶子节点的个…

LeetCode【65. 有效数字】

没有完美的傀儡,没有完美的人类,却有绝美的离逝。 有效数字(按顺序)可以分成以下几个部分: 一个 小数 或者 整数(可选)一个 e 或 E ,后面跟着一个 整数 小数(按顺序)可以分成以下几…

2023华为杯研究生数学建模竞赛CDEF题思路+模型代码

全程更新华为杯研赛CDEF题思路模型及代码,大家查看文末名片获取 华为杯C题思路分析 问题一 在每个评审阶段,作品通常都是随机分发的,每份作品需要多位评委独立评审。为了增加不同评审专家所给成绩之间的可比性,不同专家评审的作…

【Java毕设项目】基于SpringBoot+Vue校园便利平台的设计与实现

博主主页:一季春秋博主简介:专注Java技术领域和毕业设计项目实战、Java、微信小程序、安卓等技术开发,远程调试部署、代码讲解、文档指导、ppt制作等技术指导。主要内容:毕业设计(Java项目、小程序等)、简历模板、学习资料、面试题…

3.6+铁死亡+WGCNA+机器学习

今天给同学们分享一篇3.6铁死亡WGCNA机器学习的生信文章“Identification of ferroptosis related biomarkers and immune infiltration in Parkinsons disease by integrated bioinformatic analysis”,这篇文章于2023年3月14日发表在BMC Med Genomics期刊上&#…

【笔记】ubuntu 20.04 + mongodb 4.4.14定时增量备份脚本

环境 ubuntu 20.04mongodb 4.4.14还没实际使用(20230922)后续到10月底如果有问题会修改 原理 只会在有新增数据时生成新的备份日期目录备份恢复时,如果恢复的数据库未删除,则会覆盖数据 准备 准备一个文件夹,用于…

2023华为杯数学建模竞赛E题

一、前言 颅内出血(ICH)是由多种原因引起的颅腔内出血性疾病,既包括自发性出血,又包括创伤导致的继发性出血,诊断与治疗涉及神经外科、神经内科、重症医学科、康复科等多个学科,是临床医师面临的重要挑战。…

Springboot2 Pandas Pyecharts 量子科技专利课程设计大作业

数据集介绍 1.背景 根据《中国科学:信息科学》期刊上的一篇文章,量子通信包括多种协议与应用类型: 基于量子隐形传态与量子存储中继等技术,可实现量子态信息传输,进而构建量子信息网络,已成为当前科研热点&…

成为威胁:网络安全中的动手威胁模拟案例

不断变化的网络威胁形势要求组织为其网络安全团队配备必要的技能来检测、响应和防御恶意攻击。然而,在研究中发现并继续探索的最令人惊讶的事情是,欺骗当前的网络安全防御是多么容易。 防病毒程序建立在庞大的签名数据库之上,只需更改程序内…