当前位置： 首页 > article >正文

React状态管理-对state进行保留和重置

article 2025/9/27 18:22:31

相同位置的相同组件会使得 state 被保留下来

在这里插入图片描述
在这里插入图片描述
当你勾选或清空复选框的时候，计数器 state 并没有被重置。不管 isFancy 是 true 还是 false，根组件 App 返回的 div 的第一个子组件都是 <Counter />：
在这里插入图片描述
在这里插入图片描述在这里插入图片描述
你可能以为当你勾选复选框的时候 state 会被重置，但它并没有！这是因为 两个 标签被渲染在了相同的位置。 React 不知道你的函数里是如何进行条件判断的，它只会“看到”你返回的树。在这两种情况下，App 组件都会返回一个包裹着 作为第一个子组件的 div。这就是 React 认为它们是 同一个 的原因。

你可以认为它们有相同的“地址”：根组件的第一个子组件的第一个子组件。不管你的逻辑是怎么组织的，这就是 React 在前后两次渲染之间将它们进行匹配的方式。

相同位置的不同组件会使 state 重置

在这里插入图片描述
在这里插入图片描述

在相同位置重置 state

  • 方法一：将组件渲染在不同的位置
    在这里插入图片描述

  • 方法二：使用 key 来重置 state
    在这里插入图片描述
    https://react.docschina.org/learn/preserving-and-resetting-state#option-1-rendering-a-component-in-different-positions

相关文章：

React状态管理-对state进行保留和重置

相同位置的相同组件会使得 state 被保留下来 当你勾选或清空复选框的时候&#xff0c;计数器 state 并没有被重置。不管 isFancy 是 true 还是 false&#xff0c;根组件 App 返回的 div 的第一个子组件都是 <Counter />&#xff1a; 你可能以为当你勾选复选框的时候 st…...

编程日记 2025/9/24 18:50:24

vue和springboot交互数据，使用axios【跨域问题】

vue和springboot交互数据&#xff0c;使用axios【跨域问题】 提示&#xff1a;帮帮志会陆续更新非常多的IT技术知识&#xff0c;希望分享的内容对您有用。本章分享的是node.js和vue的使用。前后每一小节的内容是存在的有&#xff1a;学习and理解的关联性。【帮帮志系列文章】&…...

编程日记 2025/9/24 18:52:21

AJAX 使用 和 HTTP

ajax学习 promise和 awit Node.js 和 webpack 前端工程化 Git工具 AJAX异步的JS和XML&#xff1a; 使用XML对象和服务器通信 在这里插入图片描述 统一资源定位符 URL HTTP 超文本传输协议 域名 资源路径 资源目录和类型 URL 查询参数 使用&#xff1f;表示之后的参数…...

编程日记 2025/9/22 13:04:32

MySQL之基础事务

目录 引言&#xff1a; 什么是事务&#xff1f; 事务和锁 mysql数据库控制台事务的几个重要操作指令&#xff08;transaction.sql&#xff09; 1、事物操作示意图&#xff1a; 2.事务的隔离级别 四种隔离级别&#xff1a; 总结一下隔离指令 1. 查看当前隔离级别​​ …...

编程日记 2025/9/24 0:05:44

uniapp设置 overflow：auto；右边不显示滚动条的问题

设置了overflow&#xff1a;auto;或者其它overflow的属性不显示滚动条是因为在uniapp中默认隐藏了滚动条 解决方法&#xff1a; //强制显示滚动条 ::-webkit-scrollbar {width: 8px !important;background: #ccc !important;display: block !important;}//设置滚动条颜色.cu-…...

编程日记 2025/6/25 4:30:23

数据库基础复习笔记

数据库 相关概念 名称全称检查数据库存储数据的仓库&#xff0c;数据是有组织的进行存储DataBase&#xff08;DB&#xff09;数据库管理系统操作和管理数据库的大型软件DataBase Management System(DBMS)SQL操作关系型数据库的编程语言&#xff0c;定义了一套操作关系型数据库…...

编程日记 2025/9/10 23:15:31

MySQL基础关键_013_常用 DBA 命令

目 录 一、MySQL 用户信息存储位置 二、新建用户 1.创建本地用户 2.创建外网用户 三、用户授权 1.说明 2.实例 四、撤销授权 五、修改用户密码 六、修改用户名、主机名/IP地址 七、删除用户 八、数据备份 1.导出数据 2.导入数据 &#xff08;1&#xff09;方式…...

编程日记 2025/9/27 4:43:31

爬虫请求频率应控制在多少合适？

爬虫请求频率的控制是一个非常重要的问题&#xff0c;它不仅关系到爬虫的效率&#xff0c;还涉及到对目标网站服务器的影响以及避免被封禁的风险。合理的请求频率需要根据多个因素来综合考虑&#xff0c;以下是一些具体的指导原则和建议&#xff1a; 一、目标网站的政策 查看网…...

编程日记 2025/5/28 18:04:24

探秘网络邮差：FTP、Telnet、SMTP、NFS、SNMP介绍

引言&#xff1a;谁是网络世界的“邮差”&#xff1f; 想象一下&#xff0c;你正在网上冲浪——发送一封邮件、上传一份文件、远程登录服务器&#xff0c;甚至只是打开一个网页。这些看似简单的操作背后&#xff0c;其实有一群默默无闻的“邮差”在辛勤工作。它们就是应用层协…...

编程日记 2025/9/16 19:07:25

java基础：异常体系

目录 一、java异常体系介绍二、异常1、运行时异常2、非运行时异常 三、错误四、异常的处理方式1、方式1&#xff1a;throws声明抛出异常1.1、throws关键字1.2、throw关键字 2、方式2&#xff1a;try-catch-finally 一、java异常体系介绍 异常体系图如下&#xff1a; Throwable…...

编程日记 2025/9/24 0:28:39

CSS Grid布局：从入门到实战

CSS Grid布局&#xff1a;从入门到实战 一、初识Grid布局 还在为网页布局发愁吗&#xff1f;Flexbox虽然好用&#xff0c;但当遇到复杂布局时&#xff0c;CSS Grid才是真正的王者。Grid布局是CSS中最强大的二维布局系统&#xff0c;它就像一张无形的网格纸&#xff0c;让我们…...

编程日记 2025/6/13 1:55:13

记录算法笔记(20025.5.14)对称二叉树

给你一个二叉树的根节点 root &#xff0c; 检查它是否轴对称。 示例 1&#xff1a; 输入&#xff1a;root [1,2,2,3,4,4,3] 输出&#xff1a;true 示例 2&#xff1a; 输入&#xff1a;root [1,2,2,null,3,null,3] 输出&#xff1a;false 提示&#xff1a; 树中节点数目…...

编程日记 2025/9/23 22:03:07

QT Creator配置Kit

0、背景&#xff1a;qt5.12.12vs2022 记得先增加vs2017编译器 一、症状&#xff1a; 你是否有以下症状&#xff1f; 1、用qt新建的工程&#xff0c;用qmake&#xff0c;可惜能看见的只有一个pro文件&#xff1f; 2、安装QT Creator后&#xff0c;使用MSVC编译显示no c com…...

编程日记 2025/9/25 2:51:21

JVM 与云原生的完美融合：引领技术潮流

最近佳作推荐&#xff1a; Java 大厂面试题 – 揭秘 JVM 底层原理&#xff1a;那些令人疯狂的技术真相&#xff08;New&#xff09; Java 大厂面试题 – JVM 性能优化终极指南&#xff1a;从入门到精通的技术盛宴&#xff08;New&#xff09; Java 大厂面试题 – JVM 深度剖析&…...

编程日记 2025/9/24 22:45:58

Ubuntu24.04编译ORB_SLAM的一系列报错解决

Ubuntu24.04编译ORB_SLAM的一系列报错解决 decay_t报错 报错信息&#xff1a;error: ‘decay_t’ is not a member of ‘std’&#xff1b;did you mean ‘decay’ 将CMakeLists.txt中第17行的c标准修改为c14即可&#xff1a; 修改前&#xff1a; CHECK_CXX_COMPILER_FLAG…...

编程日记 2025/9/18 15:42:06

为何大模型都使用decoder-only?

第一章 架构之争的历史脉络 1.1 从双向到单向的革命 2017年&#xff0c;BERT的横空出世让双向注意力机制成为NLP领域的“武林盟主”。通过Masked Language Modeling&#xff08;MLM&#xff09;&#xff0c;BERT在阅读理解、情感分析等任务中展现出惊人的表现&#xff0c;但它…...

编程日记 2025/9/23 20:06:07

《Effective Python》第2章 字符串和切片操作——Python 字符串格式化的现代选择f-strings

引言 本篇博客基于学习《Effective Python》第三版 Chapter 2: Strings and Slicing 的 Item 11 “Prefer Interpolated F-Strings Over C-style Format Strings and str.format” 的总结与延伸。 字符串格式化是 Python 编程中的常见操作&#xff0c;用于动态生成可读性高的…...

编程日记 2025/6/12 3:18:40

企业报表平台如何实现降本增效

一、你的企业是否正被这些问题拖累&#xff1f;‌ 财务还在手动汇总各门店的Excel销售数据&#xff1b;市场部总抱怨“客户分析全靠拍脑袋”&#xff1b;仓库突然发现爆款断货&#xff0c;但上周的报表显示库存充足…… 这些场景你是否熟悉&#xff1f;数据散落在ERP、E…...

编程日记 2025/9/23 16:55:47

Ollama+OpenWebUI+docker完整版部署，附带软件下载链接，配置+中文汉化+docker源，适合内网部署，可以局域网使用

前言&#xff1a; 因为想到有些环境可能没法使用外网的大模型&#xff0c;所以可能需要内网部署&#xff0c;看了一下ollama适合小型的部署&#xff0c;所以就尝试了一下&#xff0c;觉得docker稍微简单一点&#xff0c;就做这个教程的&#xff0c;本文中重要的内容都会给下载…...

编程日记 2025/9/24 18:59:41

git push 报错：send-pack: unexpected disconnect while reading sideband packet

背景 新建了一个仓库&#xff0c;第一次push 代码文件&#xff0c;文件中有一个依赖的jar&#xff0c;有80MB&#xff0c;结果push的时候报错。 错误信息 error: RPC failed; HTTP 500 curl 22 The requested URL returned error: 500 send-pack: unexpected disconnect whi…...

编程日记 2025/8/21 19:58:25

考研英一真题学习笔记 2018年

2018 年全国硕士研究生招生考试 英语 &#xff08;科目代码&#xff1a;201&#xff09; Section Ⅰ Use of English Directions: Read the following text. Choose the best word(s) for each numbered blank and mark A, B, C or D on the ANSWER SHEET. (10 points) Trust i…...

编程日记 2025/6/9 3:01:09

ultralytics中tasks.py---parse_model函数解析

一、根据scale获取对应的深度、宽度和最大通道数 具体例如yaml文件内容如下： depth=0.33,那么重复的模块例如C2f原本重复次数是3，6，6，3，那么T对应的模型重复次数就是三分之一即1，1，2，1次。这个在后面定义的： width=0.25，max_channels=1024 原本c2=64,但经过make_div…...

编程日记 2025/9/24 8:00:16

Java知识框架

一、Java 基础语法 1. 基础语法 数据类型 基本类型&#xff1a;int, double, boolean, char 等 引用类型&#xff1a;String, 数组, 对象 变量与常量 final 关键字 作用域&#xff08;局部变量、成员变量&#xff09; 运算符 算术、逻辑、位运算 三元运算符 ? : 控制…...

编程日记 2025/9/17 19:19:41

2024年业绩增速大幅回退，泸州老窖未能“重回前三”

撰稿|行星 来源|贝多财经 回望过去的2024年&#xff0c;受制于购买力与消费需求的持续疲软&#xff0c;白酒行业的发展面临诸多复杂性与不确定性&#xff0c;“量价齐跌”犹如笼罩在各大企业头顶的一片阴云。 正如巴菲特所言&#xff1a;“当潮水退去时&#xff0c;才知道谁在…...

编程日记 2025/9/26 18:40:36

院校机试刷题第二天：1479 01字符串、1701非素数个数

一、1479 01字符串 1.题目描述 2.解题思路 方法一&#xff1a;暴力法 模拟过程&#xff0c;列出几个数据来a[1]1, a[2]2, a[3]3, a[4]5以此类推&#xff0c;这就是斐波那契数列&#xff0c;每一项都等于前两项之和&#xff0c;确定好a[1], a[2]即可。 方法二&#xff1a;动…...

编程日记 2025/9/24 18:41:45

【Vue.js 的核心魅力：深入理解声明式渲染】

Vue.js 的核心魅力&#xff1a;深入理解声明式渲染 在现代前端框架的浪潮中&#xff0c;Vue.js 以其轻量、易学、高效的特点赢得了广大开发者的青睐。其核心魅力之一&#xff0c;便是其优雅的**声明式渲染 (Declarative Rendering)**机制。理解声明式渲染不仅能帮助我们更好地…...

编程日记 2025/9/21 22:12:45

制作一款打飞机游戏48：敌人转向

射击功能 有一个重要的功能我们还没实现&#xff0c;那就是射击。目前&#xff0c;敌人还不能射击&#xff0c;这显然是不行的。因此&#xff0c;我们决定添加一个射击命令&#xff0c;暂时用一个显示圆圈的方式来表示射击动作。 编程语言的调试 有趣的是&#xff0c;我们创…...

编程日记 2025/9/23 22:33:55

鸿蒙OSUniApp打造多功能图表展示组件 #三方框架 #Uniapp

使用UniApp打造多功能图表展示组件 在当前移动应用开发领域&#xff0c;数据可视化已成为不可或缺的一部分。无论是展示销售数据、用户增长趋势还是其他业务指标&#xff0c;一个优秀的图表组件都能有效提升用户体验。UniApp作为一款跨平台开发框架&#xff0c;如何在其中实现…...

编程日记 2025/9/17 23:32:27

Chrome浏览器实验性API computePressure的隐私保护机制如何绕过？

一、computePressure API 设计原理与隐私保护机制 1.1 API 设计目标 computePressure是W3C提出的系统状态监控API，旨在： • 提供系统资源状态的抽象指标（非精确值） • 防止通过高精度时序攻击获取用户指纹 • 平衡开发者需求与用户隐私保护 1.2 隐私保护实现方式 // 典…...

编程日记 2025/9/20 13:14:51

RK3588 串行解串板，支持8路GMSL相机

RK3588 支持的 GMSL 相机接入数量取决于所使用的解串板型号及配置方案&#xff1a; ‌xcDeserializer3.0 解串板‌ 可接入最多 ‌8 路 2M GMSL2 相机‌1。 ‌xcDeserializer4.0 解串板‌ 支持 ‌4 路 2M GMSL2 相机‌1。 ‌边缘计算盒解决方案‌ 部分商用方案可实现 ‌4 或 8…...

编程日记 2025/9/23 23:04:05