React 中 useState 的 基础使用
概念：useState 是一个React Hook（函数），它允许我们向组件添加状态变量，从而影响组件的渲染结果。
本质：和普通JS变量不同的是，状态变量一旦发生变化，组件的视图UI也会跟着变化（数据驱动视图）。react没有双向绑定，所以要使用useState，vue可以直接使用变量 就会双向绑定。
// 用useState给组件添加状态变量，以实现一个计数器按钮
import { useState } from "react";function App() {//第一步，调用useState添加一个状态变量//count是状态变量，setCount是用来修改状态变量的方法，其参数为状态变量的初值const [count, setCount] = useState(0);//第二步，点击事件调用setCount方法//作用：1、用传入的新值修改count 2、重新用新的count渲染UIconst handleClick = () => {setCount(count + 1);};return (<div className="App"><button onClick={handleClick}>{ count }</button></div>);
}export default App;
修改状态的规则
规则：在React中，状态被认为是只读的，我们应该始终替换它而不是修改它，直接修改状态不能引发视图更新。
修改对象状态
规则：对于对象类型的状态变量，应该始终传给set方法一个全新的对象来进行修改。
// 用useState给组件添加状态变量，以实现一个计数器按钮
import { useState } from "react";function App() {const [count, setCount] = useState(0);const handleClick = () => {setCount(count + 1);};//修改对象状态const [form, setForm] = useState({name: 'jack'});const changeForm = () => {//setForm()函数会用新对象替换旧对象, 但是这里新对象相对于老对象只是修改了name属性, 其他属性保持不变//...是展开运算符, 用来把form对象的所有键值对展开到新对象中. 然后重新设置了name属性setForm({...form, name: 'rose'});}return (<div className="App"><button onClick={handleClick}>{count}</button><button onClick={changeForm}>修改对象状态 {form.name}</button></div>);
}export default App;
相关文章：
React 中 useState 的 基础使用
概念：useState 是一个React Hook（函数），它允许我们向组件添加状态变量，从而影响组件的渲染结果。 本质：和普通JS变量不同的是，状态变量一旦发生变化，组件的视图UI也会跟着变化&…...
蓝桥杯单片机组第十二届省赛第二批次
前言 第十二届省赛涉及知识点：NE555频率数据读取，NE555频率转换周期，PCF8591同时测量光敏电阻和电位器的电压、按键长短按判断。 本试题涉及模块较少，题目不难，基本上准备充分的都能完整的实现每一个功能，并…...
React Native 原理
React Native 是一个跨平台移动应用开发框架，它允许开发者使用 JavaScript 和 React 来开发 iOS 和 Android 原生应用。React Native 的核心原理是通过 桥接（Bridge） 技术，使用 JavaScript 来控制原生组件，并将应用逻辑…...
C++简易贪食蛇项目
一.案例介绍 二.制作思路 三.墙模块 #include "wall.h" //初始化墙 void initWall() { for (int i 0; i < HEIGHT; i) { for (int j 0; j < WIDTH;j) { if (i 0 || j 0 || i HEIGHT - 1 || j WIDTH - 1) …...
C++蓝桥杯基础篇（七）
片头 嗨~小伙伴们，大家好！今天我们来一起学习蓝桥杯基础篇（七），学习相关字符串的知识，准备好了吗？咱们开始咯！ 一、字符与整数的联系——ASCII码 每个常用字符都对应一个-128~127的…...
Sass基础
目录 什么是sass? Sass的安装 Sass的编译 Sass的语法： Sass的基本使用: 一、Sass变量： 二、嵌套语法： 三、import的使用： 四、mixin混入和include: 五、extend: 六、注释 七、if和if: 八、for: 总结： 什么是sas…...
Linux文档编辑相关命令详解
Linux文档编辑相关命令 1. grep grep (global regular expression) 命令用于查找文件里符合条件的字符串或正则表达式。 1.1 语法 grep [options] pattern [files] 1.2 常用选项 -i：忽略大小写进行匹配。-v：反向查找，只打印不匹配的行。-…...
QT实现简约美观的动画Checkbox
*最终效果: * 一共三个文件: main.cpp , FancyCheckbox.h , FancyCheckbox.cpp main.cpp #include <QApplication> #include "FancyCheckbox.h" #include <QGridLayout> int main(int argc, char *argv[]) {QApplication a(argc, argv);QWidget* w new…...
每日学习Java之一万个为什么？[MySQL面试篇]
分析SQL语句执行流程中遇到的问题 前言1 MySQL是怎么在一台服务器上启动的2 MySQL主库和从库是同时启动保持Alive的吗？3 如果不是主从怎么在启动的时候保证数据一致性4 ACID原则在MySQL上的体现5 数据在MySQL是通过什么DTO实现的6 客户端怎么与MySQL Server建立连接…...
git笔记
定义：分布式版本控制工具，免费开源的，快速高效的处理从小到大的项目，git占地面积小，性能快，有廉价的本地库 安装：官网最新版 全部点下一步就行 版本控制工具：使用中央服务器&#…...
Full GC 排查
在 Java 中，Full GC（完全垃圾回收）会对整个堆（包括年轻代和老年代，甚至可能包括永久代/元空间）进行垃圾回收，通常会导致较长的停顿（STW，Stop-The-World）。如果…...
VS2022远程调试Ubuntu中的C++程序
前言 最近想基于星火大模型的SDK开发第一些应用。但是，发现星火的SDK当中Linux版本的比较丰富，Windows 版本支持的比较少。但是，从调试的IDE而言，Visual Studio又是最方便的。所以，考虑采用Visual Studio Ubuntu的形式…...
Flutter 学习之旅 之 flutter 使用 flutter_screenutil 简单进行屏幕适配
Flutter 学习之旅 之 flutter 使用 flutter_screenutil 简单进行屏幕适配 目录 Flutter 学习之旅 之 flutter 使用 flutter_screenutil 简单进行屏幕适配 一、简单介绍 二、简单介绍 flutter_screenutil 三、安装 carousel_slider 四、简单案例实现 五、关键代码 六、补…...
--微服务的集成测试)
【华为OD机考】华为OD笔试真题解析(16)--微服务的集成测试
题目描述 现在有n个容器服务，服务的启动可能有一定的依赖性（有些服务启动没有依赖），其次，服务自身启动加载会消耗一些时间。 给你一个 n n n \times n nn的二维矩阵useTime，其中useTime[i][i]10表示服务…...
NCCL AI 分布式训练集合通讯库技术基本原理
目录 文章目录 目录AI 分布式训练NCCL 的简介NCCL 的核心功能NCCL 的基本工作流程NCCL 的集合通信操作方式NCCL 的 API 编程示例 AI 分布式训练 在一个最初的 AI 模型训练场景中，由于模型自身的程序体积、输入的参数量以及样本的数据量都比较有限，一张 …...
算法-回溯篇01-组合
组合 力扣题目链接 题目描述 给定两个整数 n 和 k，返回范围 [1, n] 中所有可能的 k 个数的组合。 你可以按 任何顺序 返回答案。 解题思路 刚开始做回溯的题目，关于回溯的相关知识推荐大家去看代码随想录的视频。 做了几道题，感觉回溯题…...
泵吸式激光可燃气体监测仪：快速精准守护燃气管网安全
在城市化进程加速的今天，燃气泄漏、地下管网老化等问题时刻威胁着城市安全。如何实现精准、高效的可燃气体监测，守护“城市生命线”，成为新型基础设施建设的核心课题。泵吸式激光可燃气体监测仪，以创新科技赋能安全监测࿰…...
Lumoz Chain正式上线：AI 时代的新算力破局者
新的叙事和技术突破永远是推动行业前行的核心动力。当下，AI Agent无疑是最炙手可热的赛道之一。 当加密世界将目光投向AI领域时，大多数项目仍停留在以AI为工具或应用场景的层面，试图通过集成AI模型或优化链上功能来吸引用户。然而࿰…...
算法之排序算法
排序算法 ♥常见排序算法知识体系详解♥ | Java 全栈知识体系 算法 - 排序 | CS-Notes 面试笔记 十大经典排序算法总结 | JavaGuide...
Java面试第七山！《MySQL索引》
一、索引的本质与作用 索引是帮助MySQL高效获取数据的数据结构，类似于书籍的目录。它通过减少磁盘I/O次数（即减少数据扫描量）来加速查询，尤其在百万级数据场景下，索引可将查询效率提升数十倍。 核心作用：…...
基于 Rust 与 GBT32960 规范的编解码层
根据架构设计，实现编解码层的代码设计 Cargo.toml 加入二进制序列化支持 # 序列化支持 ... bincode "1.3" # 添加二进制序列化支持 bytes-utils "0.1" # 添加字节处理工具 开始编码 错误处理（error.rs&#x…...
二、Redis 安装与基本配置：全平台安装指南 服务器配置详解
Redis 安装与基本配置：全平台安装指南 & 服务器配置详解 Redis 作为高性能的内存数据库，其安装和配置是使用 Redis 的第一步。本篇文章将全面介绍 Redis 的安装方式，覆盖 Windows、Linux、Docker 环境，并详细讲解 Redis 的基础配置，包括 持久化、日志、端口设置等。此…...
⭐算法OJ⭐矩阵的相关操作【动态规划 + 组合数学】（C++ 实现）Unique Paths 系列
文章目录 62. Unique Paths动态规划思路实现代码复杂度分析 组合数学思路实现代码复杂度分析 63. Unique Paths II动态规划定义状态状态转移方程初始化复杂度分析 优化空间复杂度状态转移方程 62. Unique Paths There is a robot on an m x n grid. The robot is initially lo…...
基于 Elasticsearch 和 Milvus 的 RAG 运维知识库的架构设计和部署落地实现指南
最近在整理一些业务场景的架构设计和部署落地实现指南 先放一个 【基于RAG的运维知识库 (ElasticSearch + Milvus) 的详细实现指南】，其中包含了详尽的技术实现细节、可运行的示例代码、原理分析、优缺点分析和应用场景分析。 架构描述： 基于RAG的运维知识库 (ElasticSearch…...
山西青年杂志山西青年杂志社山西青年编辑部2025年第3期目录
青年争鸣 教师发展中心行动转向的价值意蕴分析框架研究与启示 于宝证;李军红;郑钰莹;何易雯; 产教融合视角下职业本科工商管理专业人才培养模式探析 杜芯铭; 青年教育研究 教育数字化背景下高职院校的课堂教学研究 张晨; 统筹职业教育、高等教育、继续教育协同…...
使用Truffle、Ganache、MetaMask、Vue+Web3完成的一个简单区块链项目
文章目录 概要初始化Truffle项目创建编写合约编译合约配置Ganache修改truffle-config.js文件编写迁移文件部署合约使用Truffle 控制台使用MetaMask和VueWeb3与链交互 概要 使用Truffle、Ganache、MetaMask、VueWeb3完成的一个简单区块链项目。 初始化Truffle项目 安装好truf…...
【GenBI优化】提升text2sql准确率：建议使用推理大模型，增加重试
引言 Text-to-SQL（文本转 SQL）是自然语言处理（NLP）领域的一项重要任务，旨在将自然语言问题自动转换为可在数据库上执行的 SQL 查询语句。这项技术在智能助手、数据分析工具、商业智能（BI）平台等领域具有广泛的应用前景，能够极大地降低数据查询和分析的门槛，让非技术用…...
LLVM - 编译器前端 - 学习将源文件转换为抽象语法树（二）
一：处理消息 在一个庞大的软件（比如编译器）中，我们不希望将消息字符串分散在各个地方。如果需要修改消息内容或将其翻译成另一种语言，最好将它们集中存放在一个地方！目前缺少的是对消息的集中定义。下面我们看看来如何实现它。 一种简单的方法是，每条消息都有一个 ID（一…...
T-SQL 语言基础： SQL 数据库对象元数据及配置信息获取
目录 介绍目录视图 获取表和架构名称获取列信息 信息架构视图 获取表信息获取列信息 系统存储过程和函数 获取对象列表获取对象详细信息获取约束信息获取数据库属性信息 总结引用 介绍 在 SQL 数据库管理中，获取数据库对象的元数据信息是至关重要的。元数据提供了…...
基于vue框架的游戏博客网站设计iw282（程序+源码+数据库+调试部署+开发环境）带论文文档1万字以上，文末可获取，系统界面在最后面。
系统程序文件列表 项目功能：用户,博客信息,资源共享,游戏视频,游戏照片 开题报告内容 基于FlaskVue框架的游戏博客网站设计开题报告 一、项目背景与意义 随着互联网技术的飞速发展和游戏产业的不断壮大，游戏玩家对游戏资讯、攻略、评测等内容的需求日…...
批量提取 Word 文档中的页面
如何将 Word 文档中的页面提取出来形成一个新的文档呢？比如将 Word 文档中的第一页提取出来、将 Word 文档中的最后一页提取出来、再或者将 Word 文档中的中间几页提取出来等等。人工的处理肯定非常的麻烦，需要新建 Word 文档，然后将内容复制…...
用langgraph实现基于SQL数据构建的问答系统(5))
本地大模型编程实战(26)用langgraph实现基于SQL数据构建的问答系统(5)
本文将将扩展上一篇文章完成的 langgraph 链，继续使用基于 langgraph 链 ，对结构化数据库 SQlite 进行查询的方法。该系统建立以后，我们不需要掌握专业的 SQL 技能，可以用自然语言询问有关数据库中数据的问题并返回答案。主要完善…...
csrf与ssrf学习笔记
一、CSRF（Cross-Site Request Forgery） 1. 定义 攻击目标：利用用户已登录的合法身份，在用户不知情的情况下发起恶意请求。 核心条件：受害者需已登录目标系统，且浏览器会自动携带身份凭证（如 C…...
安装Maven配置阿里云地址 详细教程
下面以安装Maven公认最稳定版本（使用最多）3.6.1为例 1、访问maven官网 Maven官网 直接跳转Maven3.6.1 Maven3.6.1 2、点击下载 跳转页面后继续单击 Maven 3 archives 下载后解压放到自己的软件目录下 ~ 2.配置本地仓库 在目录下创建repo文件夹 &…...
我的世界1.20.1forge模组开发进阶物品（7）——具有动画、3D立体效果的物品
基础的物品大家都会做了对吧？包括武器的释放技能，这次来点难度，让物品的贴图呈现动画效果和扔出后显示3D立体效果，这个3D立体效果需要先学习blockbench，学习如何制作贴图。 Blockbench Blockbench是一个用于创建和编辑三维模型的免费软件，特别适用于Minecraft模型的设计…...
火语言RPA--PDF提取表格
【组件功能】：提取PDF文档指定位置表格 配置预览 配置说明 文件路径 支持T或# 默认FLOW输入项 待提取表格的PDF文件的完整路径。 提取位置 全部、指定页、指定范围3种位置供选择。 PDF文件密码 支持T或# 打开PDF文件的密码。 页码 支持T或# 提取指定页的页…...
项目对比】)
【开源-线程池（Thread Pool)项目对比】
一些实现**线程池（Thread Pool）**功能的开源项目的对比分析。 线程池功能的开源项目 项目名称语言优点缺点适用场景开源代码链接ThreadPoolC简单易用，代码简洁；适合快速原型开发。功能较为基础，不支持动态调整线程数…...
JavaScript系列05-现代JavaScript新特性
JavaScript作为网络的核心语言之一，近年来发展迅速。从ES6(ECMAScript 2015)开始，JavaScript几乎每年都有新的语言特性加入，极大地改善了开发体验和代码质量。本文主要内容包括： ES6关键特性：解构赋值与扩展运算符&am…...
【二.提示词工程与实战应用篇】【3.Prompt调优：让AI更懂你的需求】
最近老张在朋友圈秀出用AI生成的国风水墨画，隔壁王姐用AI写了份惊艳全场的年终总结，就连楼下小卖部老板都在用AI生成营销文案。你看着自己跟AI对话时满屏的"我不太明白您的意思"，是不是怀疑自己买了台假电脑？别慌，这可能是你的打开方式不对。今天咱们就聊聊这个…...
C++学习之C++初识、C++对C语言增强、对C语言扩展
一.C初识 1.C简介 2.第一个C程序 //#include <iostream> //iostream 相当于 C语言下的 stdio.h i - input 输入 o -output 输出 //using namespace std; //using 使用 namespace 命名空间 std 标准 ，理解为打开一个房间，房间里有我们所需…...
基于eRDMA实测DeepSeek开源的3FS
DeepSeek昨天开源了3FS分布式文件系统, 通过180个存储节点提供了 6.6TiB/s的存储性能, 全面支持大模型的训练和推理的KVCache转存以及向量数据库等能力, 每个客户端节点支持40GB/s峰值吞吐用于KVCache查找. 发布后, 我们在阿里云ECS上进行了快速的复现, 并进行了性能测试, ECS…...
写Oracle表耗时25分钟缩短到23秒——SeaTunnel性能优化
本文主要给大家介绍JDBC Source批处理任务动态切分优化，希望大家批评指正 JDBC Source 如果配置了table_path 和 partition_column，引擎会对数据进行动态切分，可以通过分析样本数据优化切分区间，规避数据倾斜问题。 目前发现任务…...
Golang的图形用户界面设计
一、Golang图形用户界面设计的基本概念 了解Golang 也称为Go语言，是一种由Google开发的开源编程语言。它具有良好的并发性，能够更好地利用多核处理器，同时也拥有丰富的标准库和强大的工具链。 什么是图形用户界面 图形用户界面（GU…...
蓝桥杯备赛Day12 动态规划1基础
动态规划 动态规划基础 动态规划将复杂问题分解成很多重叠的子问题，再通过子问题的解得到整个问题的解 分析步骤: 确定状态:dp[i][j]val,“到第i个为止，xx为j的方案数/最小代价/最大价值” 状态转移方程: 确定最终状态 要求: (1)最优子结构 (2)无后效性…...
我的AI工具箱Tauri版-通用音频转文本
本模块支持FunAsr和FasterWhisper两种模式，可批量处理音频与视频文件，自动生成txt文本与srt字幕，满足多种应用场景需求。 工具内置FunAsr，无需额外参数调整，特别适用于中文语音的高质量转录，确保识别准确率…...
C#—Settings配置详解
C#—Settings配置详解 在C#项目中，全局配置通常指的是应用程序的设置（settings），这些设置可以跨多个类或组件使用，并且通常用于存储应用程序的配置信息，如数据库连接字符串、用户偏好设置等。 Settings配置…...
机器学习算法——分类任务
算法： 1、决策树 2、随机森林 3、梯度提升树 4、逻辑回归 5、支持向量机SVM 6、K近邻 KNN 7、朴素贝叶斯 8、多层感知机 9、统一分类 10、比较总结 11、完整代码 1、决策树 1.1 Decision Tree Analysis (C4.5,CART,CHAID)决策树 算法树结构特征选择连续值处理缺失…...
聆听PostgreSQL数据库的使用
参考：（1）零基础入门PostgreSQL教程 （2）菜鸟教程 文章目录 一、PostgreSQL是什么？二、基本使用1.下载2.操作（1）数据库（2）表 一、PostgreSQL是什么？…...
C# 装箱（Boxing）与拆箱（Unboxing）
C# 装箱（Boxing）与拆箱（Unboxing） 在 C# 中，装箱和拆箱是与值类型（如结构体）和引用类型（如类）之间的转换相关的操作。它们是类型系统的一部分，但如果不正确使…...
vue实例
// vue应用通过createApp函数创建一个新的应用实例，相当于根组件 import { createApp } from vue import App from ./App.vue // 在一个vue项目当中，有且只有一个vue的实例对象 const appcreateApp(App) // App:根组件 // 实例必须调用了.mount&am…...