React第四节 组件的三大属性之state
前言
状态 state
适用于类式组件中,而再函数式组件中需要使用 useState HOOK
模拟状态;
React的组件就是一个状态机
,通过与用户的交互,实现不同的状态,根据不同的状态展现出不一样的UI视图
并不是组件中所有的属性 都是组件的状态:
如:以下几种都不是组件的状态
1、自定义的常量(整个生命周期过程中没有变化),没有根据值的变化而进行视图渲染的属性
;
2、通过 props 传递得到的属性
;
3、没有在 render() 中使用到的属性
;
1、写法:
a、类式组件的写法
通过 ES6
类和React 的Component
类派生出来的类组件;
可以通过 state 管理组件内部的状态
,
通过继承 获取到 React Component类的生命周期
;
import React, { Component } from 'react'
// 首先是 类式组件
class MyState extends Component {// constructor() {// super();// this.state = {// count: 0// }// }// 如果没有继承使用父组件的 this 则没有必要写 constructor// 或者 声明状态属性state = {count: 0}handleIncrement = () => {// 更新修改状态属性this.setState({count: this.state.count + 1})}render(){return(<><h2>计数器:{this.state.count}</h2><button onClick={this.handleIncrement}>+</button></>)}
}export default MyState
b、函数式组件中的写法
import { useState } from 'react'export default function MyState() {// 通过 useState 声明一个 count 属性,以及修改 count的方法 setCountconst [count, setCount] = useState(0)// 通过自定义事件 触发 count 累加const handleIncrement = () => {setCount(count + 1)}return (<><h2>计数器:{count}</h2><button onClick={handleIncrement}>+</button></>)}
相比较类式组件,函数式组件书写更简洁更轻量;
函数式组件不能通过 State 管理函数中的状态
,如需要管理 需使用 useState Hook
进行处理;
函数式组件中没有生命周期
,只能通过 useEffect useCallback 模拟生命周期
函数式组件可以通过 props 接收参数状态
,并更新视图;
2、修改state
a、基本类型
number、string、null、undefined、boolean
主要以 16.8版本之后的写法
const [name, setName] = useState('Andy')
//修改名称
setState('Jack')
b、引用类型修改时候注意事项
对象、数组为引用类型,在React 的Diffing
算法中对比新旧引用类型时
,对比的是引用
,而不是引用的对象
,若引用的地址不变则不会触发视图更新,故需要返回新的对象或者数组
对象修改
注意:直接修改 这样是不会触发视图更新的
student.age = student.age + 1
如下修改才可以更新视图:
const [student, setStudent] = useState({age: 18,sex: '男'
})
// 通过扩展运算符
setStudent({...student, age: student.age + 1})
// 通过回调函数创建新对象
setStudent((pre) => {console.log('==pre==', pre)return{...pre,age: pre.age + 1}
})
// 通过ES6 的 Object.assign() 方法修改
setStudent(Object.assign({}, student, {age:student.age + 1}))
数组修改
const [cars, setCars] = useState([{name: '大众', price: 100},{name:'奥迪', price:40}])
// 添加数据
setCars([...cars, {name:'奥迪', price:90}])
const newCars = cars.concat([{name:'奥迪', price:90}])
setCars(newCars)// 删除数据
setCars(cars.slice(1))// 过滤
setCars(cars.filter(itm => itm.name === '大众'))
在React中对数组
进行修改,需要使用能返回新数组
的方法,因为如果数组的指针不改变,是不会触发视图更新的;
比如: 不要使用push、pop、shift、unshift、splice
等方法修改数组类型的状态,因为这些方法都是在原数组的基础上修改
3、state更新
异步更新
比如:
const [count, setCount] = useState()
const handleIncrement = () => {setCount(count + 1)// 这里log 输出的不是最新的 count;console.log('===count=', count)// 若想拿到最新的 count 需要如下:const curCount = count + 1setCount(curCount)console.log('===curCount=', curCount)
}
比如:const [count, setCount] = useState()const handleIncrement = () => {// 这些视图不会一次增加3、依然是1setCount(count + 1)setCount(count + 1)setCount(count + 1)console.log('===count=', count)// 若要一次增加三setCount((count) => count + 1)setCount((count) => count + 1)setCount((count) => count + 1)// 或者setCount((count) => count + 3)}
因为:当我们传入多个 setState
的多个 Object 会被 shallow Merge
,而传入多个 setState 的多个 function
会被 “queue”
起来,queue 里的 function 接收到的 state(上面是 参数 )都是前一个 function 操作过的 state
。
合并更新
调用 setState
时,组件的 state 并不会立即改变
, setState
只是把要修改
的 state 放入一个队列
, React 会优化真正的执行时机,并出于性能原因,会将 React 事件处理程序中的多次React 事件处理程序中的多次 setState 的状态修改合并成一次状态修改。 最终更新只产生一次
组件及其子组件的重新渲染,这对于大型应用程序中的性能提升至关重要。
setCount(count + 1) // 加入队列 count + 1 任务setCount(count + 1) // 加入队列 count + 1 count + 1 任务setCount(count + 1) // 加入队列 count + 1 count + 1 count + 1 任务// 合并为 count + 1 任务执行
相关文章:
React第四节 组件的三大属性之state
前言 状态 state适用于类式组件中,而再函数式组件中需要使用 useState HOOK 模拟状态; React的组件就是一个状态机,通过与用户的交互,实现不同的状态,根据不同的状态展现出不一样的UI视图 并不是组件中所有的属性 都是组件的状态…...

MongoDB进阶篇-索引(索引概述、索引的类型、索引相关操作、索引的使用)
文章目录 1. 索引概述2. 索引的类型2.1 单字段索引2.2 复合索引2.3 其他索引2.3.1 地理空间索引(Geospatial Index)2.3.2 文本索引(Text Indexes)2.3.3 哈希索引(Hashed Indexes) 3. 索引相关操作3.1 查看索…...

使用FFmpeg实现视频与GIF的画中画效果
用FFmpeg命令行工具将GIF动画作为画中画(Picture-in-Picture,简称PiP)叠加到视频上。FFmpeg是一个强大的多媒体框架,能够处理几乎所有格式的音频和视频文件。通过这个教程,你将学会如何将一个小的GIF动画循环播放&…...
车载信息安全框架 --- 车载信息安全相关事宜
我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 所有人的看法和评价都是暂时的,只有自己的经历是伴随一生的,几乎所有的担忧和畏惧,都是来源于自己的想象,只有你真的去做了,才会发现有多快乐。…...

Unreal5从入门到精通之EnhancedInput增强输入系统详解
前言 从Unreal5开始,老版的输入系统,正式替换为EnhancedInput增强型输入系统,他们之间有什么区别呢? 如果有使用过Unity的同学,大概也知道,Unity也在2020版本之后逐渐把输入系统也升级成了新版输入系统,为什么Unreal和Unity都热衷于升级输入系统呢?这之间又有什么联系…...

泛微E9与金蝶云星空的集成方案:实现审批流程与财务管理的无缝对接
泛微E9与金蝶云星空的集成方案:实现审批流程与财务管理的无缝对接 背景介绍: 在企业日常运营中,泛微OA-E9和金蝶云星空是两个关键的系统。泛微OA-E9是一款广受企业青睐的办公自动化软件,它通过流程管理、文档管理、协同办公等模…...
理解设计模式与 UML 类图:构建稳健软件架构的基石
在软件开发的广阔天地里,设计模式与 UML(统一建模语言)类图犹如两座灯塔,为开发者照亮前行的道路,指引着我们构建出高质量、可维护且易于扩展的软件系统。今天,就让我们一同深入探索单一职责、开闭原则、简…...

FastAPI重载不生效?解决PyCharm中Uvicorn无法重载/重载缓慢的终极方法!
文章目录 📖 介绍 📖🏡 演示环境 🏡📒 重载缓慢 📒📝 问题概述🚨 相关原因📝 解决方案一📝 解决方案二📝 解决方案三📝 解决方案四⚓️ 相关链接 ⚓️📖 介绍 📖 在使用FastAPI开发时,reload=True 本应让你在修改代码后自动重启服务,提升开发效率…...

最新子比主题zibll8.0开心版源码 无加密无后门
Zibll子比主题专为博客、自媒体及资讯类网站精心打造,以其简约而不失高雅的设计风格,为网站增添独特魅力与视觉美感。 8.0更新内容: 新增发帖选择板块、话题、标签时支持搜索,同时优化了选择栏目,更加方便快捷 新增小工具文章列表…...

【数据分析】认清、明确
1、什么是数据分析。 - 通过对大量的数据进行科学的分析。 - 得出结论,提出建议,辅助公司企业的决策。2、数据分析分为几步。 - 1.明确目的! - 2.收集数据!自己的数据! 自动化采集的数据! - 3.数据处理! - 4.数据分析!数据分析(业务)数据挖掘(代码算法…...

工业生产安全-安全帽第二篇-用java语言看看opencv实现的目标检测使用过程
一.背景 公司是非煤采矿业,核心业务是采选,大型设备多,安全风险因素多。当下政府重视安全,头部技术企业的安全解决方案先进但价格不低,作为民营企业对安全投入的成本很敏感。利用我本身所学,准备搭建公司的…...

人工智能(AI)与机器学习(ML)基础知识
目录 1. 人工智能与机器学习的核心概念 什么是人工智能(AI)? 什么是机器学习(ML)? 什么是深度学习(DL)? 2. 机器学习的三大类型 (1)监督式学…...

得物彩虹桥架构演进之路-负载均衡篇
文 / 新一 一、前言 一年一更的彩虹桥系列又来了,在前面两期我们分享了在稳定性和性能2个层面的一些演进&优化思路。近期我们针对彩虹桥 Proxy 负载均衡层面的架构做了一次升级,目前新架构已经部署完成,生产环境正在逐步升级中…...

Jmeter中的断言(四)
13--XPath断言 功能特点 数据验证:验证 XML 响应数据是否包含或不包含特定的字段或值。支持 XPath 表达式:使用 XPath 表达式定位和验证 XML 数据中的字段。灵活配置:可以设置多个断言条件,满足复杂的测试需求。 配置步骤 添加…...
vue2 src_Todolist编辑($nextTick)
main.js //引入Vue import Vue from "vue"; //引入App import App from ./App;//关闭Vue的生产提示 Vue.config.productionTip false;new Vue({el: #app,render: h > h(App),beforeCreate() {//事件总线Vue.prototype.$bus this;} });App.vue <template>…...

driver.js实现页面操作指引
概述 在访问某些网站的时候,第一次进去你会发现有个操作指引,本文引用driver.js,教你在你的页面也加入这般高大上的操作指引。 实现效果 实现 driver.js简介 driver.js是一个功能强大且高度可定制的基于原生JavaScript开发的新用户引导库…...
ffmpeg区域颜色覆盖
ffmpeg去除水印(遮盖指定区域)的几种办法_ffmpeg去水印-CSDN博客 ffmpeg -i a.mp4 -vf "drawboxx1560:y30:w310:h100:tfill" b.mp4 drawbox在视频帧上绘制一个矩形: x和y:矩形左上角的坐标。默认值是0。 w和h:矩形的宽度和高度。…...

【Python TensorFlow】进阶指南(续篇三)
在前几篇文章中,我们探讨了TensorFlow的高级功能,包括模型优化、分布式训练、模型解释等多个方面。本文将进一步深入探讨一些更具体和实用的主题,如模型持续优化的具体方法、异步训练的实际应用、在线学习的实现细节、模型服务化的最佳实践、…...

QT 实现仿制 网络调试器(未实现连接唯一性) QT5.12.3环境 C++实现
网络调试助手: 提前准备:在编写代码前,要在.pro工程文件中,添加network模块。 服务端: 代码: widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QtWidgets> #inclu…...

【英特尔IA-32架构软件开发者开发手册第3卷:系统编程指南】2001年版翻译,2-31
文件下载与邀请翻译者 学习英特尔开发手册,最好手里这个手册文件。原版是PDF文件。点击下方链接了解下载方法。 讲解下载英特尔开发手册的文章 翻译英特尔开发手册,会是一件耗时费力的工作。如果有愿意和我一起来做这件事的,那么ÿ…...

linux之kylin系统nginx的安装
一、nginx的作用 1.可做高性能的web服务器 直接处理静态资源(HTML/CSS/图片等),响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器 隐藏后端服务器IP地址,提高安全性 3.负载均衡服务器 支持多种策略分发流量…...
树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频
使用rpicam-app通过网络流式传输视频 使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素 文章来源: http://raspberry.dns8844.cn/documentation 原文网址 使用 rpicam-app 通过网络流式传输视频 本节介绍来自 rpica…...

Linux相关概念和易错知识点(42)(TCP的连接管理、可靠性、面临复杂网络的处理)
目录 1.TCP的连接管理机制(1)三次握手①握手过程②对握手过程的理解 (2)四次挥手(3)握手和挥手的触发(4)状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...
React Native在HarmonyOS 5.0阅读类应用开发中的实践
一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强,React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 (1)使用React Native…...
postgresql|数据库|只读用户的创建和删除(备忘)
CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...
【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】
1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件(System Property Definition File),用于声明和管理 Bluetooth 模块相…...

EtherNet/IP转DeviceNet协议网关详解
一,设备主要功能 疆鸿智能JH-DVN-EIP本产品是自主研发的一款EtherNet/IP从站功能的通讯网关。该产品主要功能是连接DeviceNet总线和EtherNet/IP网络,本网关连接到EtherNet/IP总线中做为从站使用,连接到DeviceNet总线中做为从站使用。 在自动…...

【开发技术】.Net使用FFmpeg视频特定帧上绘制内容
目录 一、目的 二、解决方案 2.1 什么是FFmpeg 2.2 FFmpeg主要功能 2.3 使用Xabe.FFmpeg调用FFmpeg功能 2.4 使用 FFmpeg 的 drawbox 滤镜来绘制 ROI 三、总结 一、目的 当前市场上有很多目标检测智能识别的相关算法,当前调用一个医疗行业的AI识别算法后返回…...

企业如何增强终端安全?
在数字化转型加速的今天,企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机,到工厂里的物联网设备、智能传感器,这些终端构成了企业与外部世界连接的 “神经末梢”。然而,随着远程办公的常态化和设备接入的爆炸式…...
【生成模型】视频生成论文调研
工作清单 上游应用方向:控制、速度、时长、高动态、多主体驱动 类型工作基础模型WAN / WAN-VACE / HunyuanVideo控制条件轨迹控制ATI~镜头控制ReCamMaster~多主体驱动Phantom~音频驱动Let Them Talk: Audio-Driven Multi-Person Conversational Video Generation速…...