当前位置: 首页 > news >正文

React中的setState执行机制

我这里今天下雨了,温度一下从昨天的22度降到今天的6度,家里和学校已经下了几天雪了,还是想去玩一下的,哈哈,只能在图片里看到了。

在这里插入图片描述

一. setState是什么

它是React组件中用于更新状态的方法。它是类组件中的方法,用于更新组件的状态并重新渲染组件。
setState 方法接受一个对象或一个函数作为参数。当传递一个对象时,它会将该对象合并到当前的状态对象中,并触发组件的重新渲染。当传递一个函数时,该函数会接收先前的状态作为参数,并返回一个新的状态对象,然后 setState 方法会将返回的状态对象合并到当前的状态中。
简单例子

class MyComponent extends React.Component {constructor(props) {super(props);this.state = {count: 0};}incrementCount() {this.setState({ count: this.state.count + 1 });}render() {return (<div><p>Count: {this.state.count}</p><button onClick={() => this.incrementCount()}>Increment</button></div>);}
}

这里有个count属性。当用户点击按钮时,调用incrementCount方法,该方法使用setState更新count属性的值,触发组件的重新渲染,并在页面上显示更新后的计数值。

二、更新类型

在使用setState更新数据的时候,setState的更新类型分成:

  • 异步更新
  • 同步更新

异步更新

当调用setState方法时,React会将更新请求放入队列中,并在合适的时候进行批处理,然后批量更新组件的状态。这意味着在调用setState后,不会立即改变组件的状态值,而是在稍后的时间点进行更新。
异步更新的好处是可以提高性能,避免不必要的重复渲染。当多次调用setState时,React会将这些更新合并为一个更新,只触发一次重新渲染。

changeAge() {this.setState({age: 22})console.log(this.state.age); // 不会是22,是之前的一个值
}

这并不能看到最新的state的结果

changeText() {this.setState({age: 22}, () => {console.log(this.state.age); // 22});
}

同步更新

在某些情况下,需要立即获取最新的状态值,而不是等待异步更新。为了实现同步更新,可以使用回调函数形式的setState
回调函数形式的setState接收一个函数作为参数,该函数可以接受先前的状态和属性作为参数,并返回一个新的状态对象。React会立即执行该函数,并使用返回的状态对象进行更新。

componentDidMount() {const btn = document.getElementById("btn");btn.addEventListener('click', () => {this.setState({mes: "你好啊,白鲸"});console.log(this.state.mes); // 你好啊,白鲸})
}

小结

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

State的赋值

三种情况

1.通常情况下的赋值

使用的类型有:数字,字符串,布尔值,null,undefined

this.setState({count: 1,title: 'setState',success: true
})

2.数组类型的赋值

增加一个值的方法

// 方法一:将state先赋值给另外的变量,然后使用concat创建新数组
var hobaies= this.state.hobaies; 
this.setState({hobaies: hobaies.concat(['篮球']);
})
// 方法二:使用preState、concat创建新数组
this.setState(preState => ({hobaies: preState.hobaies.concat(['篮球']);
}))
// 方法三:ES6数组扩展 
this.setState(preState => ({hobaies: [...preState.hobaies, '篮球'];
}))

3.对象类型的赋值

// 方法一:使用Object.assign
let ages= this.state.ages;
this.setState({owner: Object.assign({}, ages, {age: 22});
})
// 方法二:使用preState、Object.assign创建新对象
this.setState(preState => ({owner: Object.assign({}, preState.ages, {age: 22});
}))

今天就学到这,以后有深入理解还会更新的。
在这里插入图片描述
终究是无法去玩了,憾尔!

相关文章:

React中的setState执行机制

我这里今天下雨了&#xff0c;温度一下从昨天的22度降到今天的6度&#xff0c;家里和学校已经下了几天雪了&#xff0c;还是想去玩一下的&#xff0c;哈哈&#xff0c;只能在图片里看到了。 一. setState是什么 它是React组件中用于更新状态的方法。它是类组件中的方法&#x…...

LabVIEW实时建模检测癌细胞的异常

LabVIEW实时建模检测癌细胞的异常 癌症是全球健康的主要挑战之一&#xff0c;每年导致许多人死亡。世界卫生组织指出&#xff0c;不健康的生活方式和日益严重的环境污染是癌症发生的主要原因之一。癌症的发生通常与基因突变有关&#xff0c;这些突变导致细胞失去正常的增长和分…...

Python卡尔曼滤波器OpenCV跟踪和预测物体的轨迹

模拟简单物体二维运动和预测位置 预测数学式 想象一下你正坐在一辆汽车里&#xff0c;在雾中行驶。 你几乎看不到路&#xff0c;但你有一个 GPS 系统可以告诉你你的速度和位置。 问题是&#xff0c;这个 GPS 并不完美&#xff1b; 它有时会产生噪音或不准确的读数。 您如何知…...

LeetCode Hot100 25.K个一组翻转链表

题目&#xff1a; 给你链表的头节点 head &#xff0c;每 k 个节点一组进行翻转&#xff0c;请你返回修改后的链表。 k 是一个正整数&#xff0c;它的值小于或等于链表的长度。如果节点总数不是 k 的整数倍&#xff0c;那么请将最后剩余的节点保持原有顺序。 你不能只是单纯…...

中职网络安全应急响应—Server2228

应急响应 任务环境说明: 服务器场景:Server2228(开放链接) 用户名:root,密码:p@ssw0rd123 1. 找出被黑客修改的系统别名,并将倒数第二个别名作为Flag值提交; 通过用户名和密码登录系统 在 Linux 中,利用 “alias” 命令去查看当前系统中定义的所有别名 flag:ss …...

springboot 获取路径

PostConstructpublic void setup() {try {// jar包所在目录 /Users/mashanshanString path this.getClass().getProtectionDomain().getCodeSource().getLocation().getPath();System.out.println("path:" path); // file:/Users/mashanshan/manual-admin-0.0.1-…...

C#上位机与欧姆龙PLC的通信01----项目背景

最近&#xff0c;【西门庆】作为项目经理负责一个70万的北京项目&#xff0c;需要在工控系统集成软件开发中和欧 姆龙PLC对接&#xff0c;考虑项目现场情况优先想到了采用FinsTCP通讯协议&#xff0c;接下来就是记录如何一步步实现这些通讯过程的&#xff0c;希望给电气工程师&…...

SE考研真题总结(二)

接上条&#xff0c;今天继续更新~ SE考研真题总结&#xff08;一&#xff09;-CSDN博客文章浏览阅读340次&#xff0c;点赞6次&#xff0c;收藏11次。本帖开始分享考研真题中设计【软件工程】的部分&#xff0c;预计会出5期左右&#xff0c;敬请期待~https://blog.csdn.net/js…...

vue中预览pdf的方法

使用vue-pdf 备注&#xff1a;这里只介绍了一页的pdf <div class"animation-box-pdf"><pdf :src"http://xxxx" /> </div>import Pdf from vue-pdf // src可以是文件地址url&#xff0c;也可以是文件流blob&#xff08;将blob转成url&a…...

详谈前端中常用的加/密算法

本文主要详细介绍了在前端开发中常用的加/解密算法&#xff0c;以及前端如何实现。 总的来说&#xff1a;前端加密无论使用哪个加密都一样是有可能性被他人获取到相关的公钥或密钥的&#xff08;比如&#xff1a;拦截请求、查看源代码等&#xff09;&#xff0c;然后进行加密与…...

宣布全面推出适用于 macOS 的 Amazon EC2 M2 Pro Mac 实例

即日起&#xff0c;Amazon Elastic Compute Cloud (Amazon EC2) M2 Pro Mac 实例现已全面推出 (GA)。在为 Apple 平台&#xff08;例如 iOS、macOS、iPadOS、tvOS、watchOS、visionOS 和 Safari&#xff09;构建和测试应用程序时&#xff0c;这些实例的性能比现有的 M1 Mac 实例…...

【记录版】SpringBoot下Filter注册源码解读

SpringBoot TomcatEmbeddedContext Servlet ApplicationFilterChain Filter 背景&#xff1a; 在之前博客中有说明SpringBoot内嵌Web容器后&#xff0c;Filter及Servlet解析与注册流程的变化。将Filter实例封装成FilterRegistrationBean实例并添加到ServletContext后&…...

WPF的WebBrowser控件

在 WPF 中显示网页&#xff0c;你可以使用 WebBrowser 控件来实现。WebBrowser 控件是一个嵌入式的浏览器控件&#xff0c;可以加载和显示网页内容。 以下是在 WPF 中显示网页的示例代码&#xff1a; <Window x:Class"WpfApp.MainWindow"xmlns"http://sche…...

WX小程序案例(一):弹幕列表

WXML内容 <!--pages/formCase/formCase.wxml--> <!-- <text>pages/formCase/formCase.wxml</text> --> <view class"bk bkimg"><!-- <image src"/static/imgs/ceeb653ely1g9na2k0k6ug206o06oaa8.gif" mode"scal…...

基于ssm医用物理学实验考核系统论文

摘 要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本医用物理学实验考核系统就是在这样的大环境下诞生&#xff0c;其可以帮助管理者在短时间内处理完毕庞大的数…...

鸿蒙HarmonyOS4.0 入门与实战

一、开发准备: 熟悉鸿蒙官网安装DevEco Studio熟悉鸿蒙官网 HarmonyOS应用开发官网 - 华为HarmonyOS打造全场景新服务 应用设计相关资源: 开发相关资源: 例如开发工具 DevEco Studio 的下载 应用发布: 开发文档:...

论文阅读——GroupViT

GroupViT: Semantic Segmentation Emerges from Text Supervision 一、思想 把Transformer层分为多个组阶段grouping stages&#xff0c;每个stage通过自注意力机制学习一组tokens&#xff0c;然后使用学习到的组tokens通过分组模块Grouping Block融合相似的图片tokens。通过这…...

时光机器:用rrweb打造可回溯的用户体验!

在现代Web应用中&#xff0c;理解用户如何与你的产品互动变得越来越重要。rrweb&#xff08;record and replay the web&#xff09;是一个开源库&#xff0c;它能够记录用户在网站上的所有操作&#xff0c;并能够像回放视频一样回放这些操作。这就像给你的网站装上了一台时光机…...

不同的葡萄品种的葡萄酒有什么共同特质?

在某种程度上几乎所有的葡萄酒都是混合的&#xff0c;在大多数葡萄酒产地&#xff0c;法律允许在单一品种葡萄酒中混入高达15%的另一种葡萄酒&#xff0c;且还能被称为由主要葡萄酿造的单一品种葡萄酒酒。这些单一品种葡萄酒混合了少量其他葡萄酒&#xff0c;是为了创造一个特质…...

Visual Studio编辑器中C4996 ‘scanf‘: This function or variable may be unsafe.问题解决方案

目录 ​编辑 题目&#xff1a;简单的ab 1. 题目描述 2. 输入格式 3. 输出格式 4. 样例输入 5. 样例输出 6. 解题思路 7. 代码示例 8. 报错解决 方案一 方案二 方案三 方案四 总结 题目&#xff1a;简单的ab 1. 题目描述 输入两个整数a和b&#xff0c;…...

用TensorFlow 2.0复现Mask R-CNN:从ResNet主干到ROI Align的保姆级代码解读

TensorFlow 2.0实现Mask R-CNN核心技术解析&#xff1a;从ResNet到ROI Align的工程实践 在计算机视觉领域&#xff0c;实例分割一直是最具挑战性的任务之一。它不仅需要精确地定位物体&#xff0c;还要在像素级别上区分不同实例。本文将深入探讨如何用TensorFlow 2.0实现Mask R…...

别再手动刷新了!Qt5/Qt6下用信号槽优雅处理串口热插拔(避坑QTimer的误用)

Qt串口热插拔检测&#xff1a;从定时轮询到事件驱动的架构升级 在工业控制、医疗设备和物联网终端开发中&#xff0c;串口通信的稳定性直接关系到系统可靠性。传统QTimer轮询方案虽然实现简单&#xff0c;但在实际项目中常遇到两个典型问题&#xff1a;一是频繁的端口扫描造成C…...

高光谱图像分类避坑指南:Hughes现象、同物异谱,这些坑你踩过吗?

高光谱图像分类实战避坑手册&#xff1a;从Hughes现象到模型优化的深度解析 当你的高光谱分类模型在验证集上表现优异&#xff0c;却在真实场景中频频失误时&#xff0c;或许正遭遇着这个领域特有的"暗礁"。不同于常规RGB图像分类&#xff0c;高光谱数据特有的图谱合…...

嵌入式扫码模组:POS机核心部件技术解析与选型指南

1. 项目概述&#xff1a;固定式POS机里的“眼睛”与“大脑”如果你拆开过一台超市、便利店或者餐厅里常见的固定式POS机&#xff0c;可能会发现一个有趣的现象&#xff1a;那个用来扫商品条码的“窗口”或“枪口”&#xff0c;其内部结构远比我们想象的要精密。它不是一个简单的…...

书匠策AI:一个让论文小白也能“开挂“的毕业论文神器,到底有多能打?

各位同学&#xff0c;你有没有经历过这种崩溃时刻——毕业论文 deadline 倒计时&#xff0c;你的Word文档里只有标题&#xff0c;脑子里一片空白&#xff0c;选题没思路、大纲理不清、参考文献不会找&#xff0c;甚至连学校格式都搞不明白&#xff1f; 别慌&#xff0c;今天作…...

避开这些坑!用Python做模糊控制项目时,关于隶属函数和规则表的5个常见误区

避开这些坑&#xff01;用Python做模糊控制项目时&#xff0c;关于隶属函数和规则表的5个常见误区 第一次用Python实现模糊控制系统时&#xff0c;那种兴奋感我至今记得——仿佛打开了人工智能的另一扇门。但很快&#xff0c;这种兴奋就被各种报错和不符合预期的结果浇灭了。记…...

告别卡顿!在Ubuntu 22.04 LTS上丝滑安装Burp Suite 2024.1(附国内源加速配置)

在Ubuntu 22.04 LTS上极速安装Burp Suite 2024.1的终极指南 每次启动Burp Suite都要等上几分钟&#xff1f;运行过程中频繁卡顿甚至崩溃&#xff1f;如果你正在使用Ubuntu 22.04 LTS或更新的版本&#xff0c;很可能是因为还在沿用那些针对Ubuntu 18.04的过时教程。本文将带你彻…...

WebToEpub:5分钟快速制作专业EPUB电子书的完整指南

WebToEpub&#xff1a;5分钟快速制作专业EPUB电子书的完整指南 【免费下载链接】WebToEpub A simple Chrome (and Firefox) Extension that converts Web Novels (and other web pages) into an EPUB. 项目地址: https://gitcode.com/gh_mirrors/we/WebToEpub 还在为在线…...

TDAD时间序列异常检测实战:从算法原理到生产部署

1. 项目概述&#xff1a;从零开始理解TDAD最近在GitHub上看到一个名为“TDAD”的项目&#xff0c;仓库地址是zd8899/TDAD。乍一看这个缩写&#xff0c;很多朋友可能会有点懵&#xff0c;这到底是做什么的&#xff1f;是某个新框架&#xff0c;还是一个数据处理工具&#xff1f;…...

CodMate:基于上下文感知的智能代码伴侣设计与实践

1. 项目概述&#xff1a;一个为开发者量身定制的代码伴侣如果你和我一样&#xff0c;每天大部分时间都在和代码编辑器、终端以及各种文档打交道&#xff0c;那你一定对“效率”这个词有很深的执念。我们总是在寻找能让自己写代码更快、调试更准、理解项目更轻松的工具。今天要聊…...