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

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适用于类式组件中&#xff0c;而再函数式组件中需要使用 useState HOOK 模拟状态; React的组件就是一个状态机&#xff0c;通过与用户的交互&#xff0c;实现不同的状态&#xff0c;根据不同的状态展现出不一样的UI视图 并不是组件中所有的属性 都是组件的状态…...

MongoDB进阶篇-索引(索引概述、索引的类型、索引相关操作、索引的使用)

文章目录 1. 索引概述2. 索引的类型2.1 单字段索引2.2 复合索引2.3 其他索引2.3.1 地理空间索引&#xff08;Geospatial Index&#xff09;2.3.2 文本索引&#xff08;Text Indexes&#xff09;2.3.3 哈希索引&#xff08;Hashed Indexes&#xff09; 3. 索引相关操作3.1 查看索…...

使用FFmpeg实现视频与GIF的画中画效果

用FFmpeg命令行工具将GIF动画作为画中画&#xff08;Picture-in-Picture&#xff0c;简称PiP&#xff09;叠加到视频上。FFmpeg是一个强大的多媒体框架&#xff0c;能够处理几乎所有格式的音频和视频文件。通过这个教程&#xff0c;你将学会如何将一个小的GIF动画循环播放&…...

车载信息安全框架 --- 车载信息安全相关事宜

我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 所有人的看法和评价都是暂时的,只有自己的经历是伴随一生的,几乎所有的担忧和畏惧,都是来源于自己的想象,只有你真的去做了,才会发现有多快乐。…...

Unreal5从入门到精通之EnhancedInput增强输入系统详解

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

泛微E9与金蝶云星空的集成方案:实现审批流程与财务管理的无缝对接

泛微E9与金蝶云星空的集成方案&#xff1a;实现审批流程与财务管理的无缝对接 背景介绍&#xff1a; 在企业日常运营中&#xff0c;泛微OA-E9和金蝶云星空是两个关键的系统。泛微OA-E9是一款广受企业青睐的办公自动化软件&#xff0c;它通过流程管理、文档管理、协同办公等模…...

理解设计模式与 UML 类图:构建稳健软件架构的基石

在软件开发的广阔天地里&#xff0c;设计模式与 UML&#xff08;统一建模语言&#xff09;类图犹如两座灯塔&#xff0c;为开发者照亮前行的道路&#xff0c;指引着我们构建出高质量、可维护且易于扩展的软件系统。今天&#xff0c;就让我们一同深入探索单一职责、开闭原则、简…...

FastAPI重载不生效?解决PyCharm中Uvicorn无法重载/重载缓慢的终极方法!

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

最新子比主题zibll8.0开心版源码 无加密无后门

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

【数据分析】认清、明确

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

工业生产安全-安全帽第二篇-用java语言看看opencv实现的目标检测使用过程

一.背景 公司是非煤采矿业&#xff0c;核心业务是采选&#xff0c;大型设备多&#xff0c;安全风险因素多。当下政府重视安全&#xff0c;头部技术企业的安全解决方案先进但价格不低&#xff0c;作为民营企业对安全投入的成本很敏感。利用我本身所学&#xff0c;准备搭建公司的…...

人工智能(AI)与机器学习(ML)基础知识

目录 1. 人工智能与机器学习的核心概念 什么是人工智能&#xff08;AI&#xff09;&#xff1f; 什么是机器学习&#xff08;ML&#xff09;&#xff1f; 什么是深度学习&#xff08;DL&#xff09;&#xff1f; 2. 机器学习的三大类型 &#xff08;1&#xff09;监督式学…...

得物彩虹桥架构演进之路-负载均衡篇

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

Jmeter中的断言(四)

13--XPath断言 功能特点 数据验证&#xff1a;验证 XML 响应数据是否包含或不包含特定的字段或值。支持 XPath 表达式&#xff1a;使用 XPath 表达式定位和验证 XML 数据中的字段。灵活配置&#xff1a;可以设置多个断言条件&#xff0c;满足复杂的测试需求。 配置步骤 添加…...

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实现页面操作指引

概述 在访问某些网站的时候&#xff0c;第一次进去你会发现有个操作指引&#xff0c;本文引用driver.js&#xff0c;教你在你的页面也加入这般高大上的操作指引。 实现效果 实现 driver.js简介 driver.js是一个功能强大且高度可定制的基于原生JavaScript开发的新用户引导库…...

ffmpeg区域颜色覆盖

ffmpeg去除水印(遮盖指定区域)的几种办法_ffmpeg去水印-CSDN博客 ffmpeg -i a.mp4 -vf "drawboxx1560:y30:w310:h100:tfill" b.mp4 drawbox在视频帧上绘制一个矩形&#xff1a; x和y&#xff1a;矩形左上角的坐标。默认值是0。 w和h&#xff1a;矩形的宽度和高度。…...

【Python TensorFlow】进阶指南(续篇三)

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

QT 实现仿制 网络调试器(未实现连接唯一性) QT5.12.3环境 C++实现

网络调试助手&#xff1a; 提前准备&#xff1a;在编写代码前&#xff0c;要在.pro工程文件中&#xff0c;添加network模块。 服务端&#xff1a; 代码&#xff1a; widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QtWidgets> #inclu…...

【英特尔IA-32架构软件开发者开发手册第3卷:系统编程指南】2001年版翻译,2-31

文件下载与邀请翻译者 学习英特尔开发手册&#xff0c;最好手里这个手册文件。原版是PDF文件。点击下方链接了解下载方法。 讲解下载英特尔开发手册的文章 翻译英特尔开发手册&#xff0c;会是一件耗时费力的工作。如果有愿意和我一起来做这件事的&#xff0c;那么&#xff…...

linux之kylin系统nginx的安装

一、nginx的作用 1.可做高性能的web服务器 直接处理静态资源&#xff08;HTML/CSS/图片等&#xff09;&#xff0c;响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器 隐藏后端服务器IP地址&#xff0c;提高安全性 3.负载均衡服务器 支持多种策略分发流量…...

树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频

使用rpicam-app通过网络流式传输视频 使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 使用 rpicam-app 通过网络流式传输视频 本节介绍来自 rpica…...

Linux相关概念和易错知识点(42)(TCP的连接管理、可靠性、面临复杂网络的处理)

目录 1.TCP的连接管理机制&#xff08;1&#xff09;三次握手①握手过程②对握手过程的理解 &#xff08;2&#xff09;四次挥手&#xff08;3&#xff09;握手和挥手的触发&#xff08;4&#xff09;状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...

React Native在HarmonyOS 5.0阅读类应用开发中的实践

一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强&#xff0c;React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 &#xff08;1&#xff09;使用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 中的一种 系统属性定义文件&#xff08;System Property Definition File&#xff09;&#xff0c;用于声明和管理 Bluetooth 模块相…...

EtherNet/IP转DeviceNet协议网关详解

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

【开发技术】.Net使用FFmpeg视频特定帧上绘制内容

目录 一、目的 二、解决方案 2.1 什么是FFmpeg 2.2 FFmpeg主要功能 2.3 使用Xabe.FFmpeg调用FFmpeg功能 2.4 使用 FFmpeg 的 drawbox 滤镜来绘制 ROI 三、总结 一、目的 当前市场上有很多目标检测智能识别的相关算法&#xff0c;当前调用一个医疗行业的AI识别算法后返回…...

企业如何增强终端安全?

在数字化转型加速的今天&#xff0c;企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机&#xff0c;到工厂里的物联网设备、智能传感器&#xff0c;这些终端构成了企业与外部世界连接的 “神经末梢”。然而&#xff0c;随着远程办公的常态化和设备接入的爆炸式…...

【生成模型】视频生成论文调研

工作清单 上游应用方向&#xff1a;控制、速度、时长、高动态、多主体驱动 类型工作基础模型WAN / WAN-VACE / HunyuanVideo控制条件轨迹控制ATI~镜头控制ReCamMaster~多主体驱动Phantom~音频驱动Let Them Talk: Audio-Driven Multi-Person Conversational Video Generation速…...