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

第二节:React 基础篇-受控组件 vs 非受控组件

一、场景题:设计一个实时搜索输入框,说明选择依据

受控组件 vs 非受控组件

核心区别
特征受控组件非受控组件
数据管理由React状态(state)控制通过DOM元素(ref)直接访问
更新时机每次输入触发onChange提交时通过ref获取值
实时性即时响应输入延迟获取最终值
典型场景需实时验证/反馈的输入表单提交后处理

实时搜索输入框设计

场景需求

• 用户输入时立即触发搜索请求(需防抖优化)
• 输入内容需要动态高亮匹配结果
• 支持清空输入后重置搜索结果

方案选择:受控组件

代码实现

import { useState, useEffect } from 'react';function SearchInput() {const [query, setQuery] = useState('');const [results, setResults] = useState([]);// 防抖处理(300ms延迟)useEffect(() => {const handler = setTimeout(() => {if (query) {fetchResults(query).then(setResults);} else {setResults([]);}}, 300);return () => clearTimeout(handler);}, [query]);return (<div><inputtype="text"value={query}onChange={(e) => setQuery(e.target.value)}placeholder="Search..."/><ul>{results.map((result) => (<li key={result.id}>{result.text}</li>))}</ul></div>);
}
选择依据
  1. 实时反馈需求
    • 输入内容需要立即触发搜索逻辑(防抖优化避免频繁请求)。
    • 受控组件的onChange可精准捕获每次输入变化,适合高频交互。

  2. 状态同步性
    • 搜索结果的渲染依赖当前输入值(如query清空时需同步清空结果)。
    • 受控组件通过useState保证UI与状态严格同步。

  3. React 18优化
    • 自动批处理(Automatic Batching)合并多次setQuery导致的渲染,减少性能损耗。
    useTransition可标记搜索为低优先级更新,避免输入卡顿。


为何不选非受控组件?

  1. 延迟问题
    • 非受控组件需通过ref.current.value手动获取值,无法实时响应输入变化。

  2. 防抖实现复杂
    • 需自行监听input事件并添加定时器,代码冗余易出错。

  3. 状态追溯困难
    • 清空输入框时需手动操作DOM(如ref.current.value = ""),违背React数据流原则。


总结

优先受控组件:实时交互、状态依赖型场景(搜索、表单验证)。
选非受控组件:仅需最终结果的文件上传、大型表单性能优化(如1000+字段)。
React 18+优化:利用useDeferredValue进一步降低高频输入的性能开销:

const deferredQuery = useDeferredValue(query); // 延迟更新派生值

二、场景:自己实现一个非受控组件的案例

以下是一个简单的非受控组件实现案例,通过 ref 直接访问输入框的值:

import { useRef } from 'react';function UncontrolledInput() {// 1. 创建ref引用const inputRef = useRef(null);// 2. 提交时获取值const handleSubmit = (e) => {e.preventDefault();alert("输入的值: " + inputRef.current.value);inputRef.current.value = ""; // 直接操作DOM清空输入};return (<form onSubmit={handleSubmit}><input type="text" ref={inputRef}  // 3. ref绑定到inputplaceholder="非受控输入" /><button type="submit">提交</button></form>);
}
核心特点:
  1. 直接DOM操作:通过 inputRef.current.value 直接读写输入框值
  2. 无状态管理:无需 useState 控制输入内容
  3. 适用场景:表单提交后只需最终值,无需实时验证或中间状态
对比受控组件优势:

更少渲染:输入过程不会触发组件重渲染
代码更简:适合简单表单(如一次性文件上传)

相关文章:

第二节:React 基础篇-受控组件 vs 非受控组件

一、场景题&#xff1a;设计一个实时搜索输入框&#xff0c;说明选择依据 受控组件 vs 非受控组件 核心区别 特征受控组件非受控组件数据管理由React状态&#xff08;state&#xff09;控制通过DOM元素&#xff08;ref&#xff09;直接访问更新时机每次输入触发onChange提交…...

电脑的usb端口电压会大于开发板需要的电压吗

电脑的USB端口电压通常不会大于开发板所需的电压&#xff0c;以下是详细解释&#xff1a; 1. USB端口电压标准 根据USB规范&#xff0c;USB接口的标称输出电压为5V。实际测量时&#xff0c;USB接口的输出电压会略有偏差&#xff0c;通常在4.75V到5.25V之间。USB 2.0和USB 3.0…...

软件界面设计:打造用户喜爱的交互体验

在数字化飞速发展的当下&#xff0c;软件已渗透进生活的各个角落&#xff0c;从日常使用的社交、购物软件&#xff0c;到专业领域的办公、设计软件&#xff0c;其重要性不言而喻。而软件界面作为用户与软件交互的桥梁&#xff0c;直接决定了用户对软件的第一印象与使用体验。出…...

7、linux基础操作2

一、linux调度 1、crontab [选项] 1.1、了解 定时任务调度:指每隔指定的时间&#xff0c;执行特定的命令或程序。 基本语法&#xff1a;crontab [选项] 常用选项&#xff1a; e&#xff1a; 编辑定时任务l&#xff1a;查询定时任务r&#xff1a;删除当前用户的所有定时任务…...

大数据管理专业想求职数据分析岗,如何提升面试通过率?

从技能到策略&#xff0c;解锁高薪岗位的六大核心逻辑 在数字化浪潮席卷全球的今天&#xff0c;数据分析岗位的竞争愈发激烈。对于大数据管理专业的学生而言&#xff0c;如何从众多求职者中脱颖而出&#xff1f;本文结合行业趋势与实战经验&#xff0c;提炼出提升面试通过率的…...

移动端六大语言速记:第15部分 - 其他方面

移动端六大语言速记:第15部分 - 其他方面 本文将对比Java、Kotlin、Flutter(Dart)、Python、ArkTS和Swift这六种移动端开发语言的其他重要特性,帮助开发者全面了解各语言的独特优势和应用场景。 15.1 语言特有功能 各语言特有功能对比: 语言特有功能描述Java注解(Annotat…...

3.1.3.4 Spring Boot使用使用Listener组件

在Spring Boot中&#xff0c;使用Listener组件可以监听和响应应用中的各种事件。首先&#xff0c;创建自定义事件类CustomEvent&#xff0c;继承自ApplicationEvent。然后&#xff0c;创建事件监听器CustomEventListener&#xff0c;使用EventListener注解标记监听方法。接下来…...

基于关键字定位的自动化PDF合同拆分

需求背景&#xff1a; 问题描述&#xff1a; 我有一份包含多份合同的PDF文件&#xff0c;需要将这些合同分开并进行解析。 传统方法&#xff08;如以固定页数作为分割点&#xff09;不够灵活&#xff0c;无法满足需求。 现有方法的不足&#xff1a; 网上找到的工具大多依赖手动…...

ssh连接远程Host key verification failed.

问题描述 在对已部署的项目进行维护过程中&#xff0c;遇到的一个小问题&#xff0c;记录一下。 SSH连接云服务器ssh xxx云服务器IP地址&#xff0c;提示&#xff1a; The authenticity of host xxxxxx (xx.xxx.123.321) cant be established. ECDSA key fingerprint is SHA…...

Matlab 汽车ABS的bangbang控制和模糊PID控制

1、内容简介 Matlab 197-汽车ABS的bangbang控制和模糊PID控制 可以交流、咨询、答疑 2、内容说明 略 摘要&#xff1a;本文旨在设计一种利用模糊控制理论优化的pid控制器&#xff0c;控制abs系统&#xff0c;达到对滑移率最佳控制范围的要求 &#xff0c;所提出的方案采用级联…...

kotlin的takeIf使用

takeIf用于判断指定对象是否满足条件&#xff0c;满足就返回该对象自身&#xff0c;不满足返回null。因为可以返回对象自身&#xff0c;所以可以用作链式调用&#xff0c;以简化代码&#xff0c;又因takeIf可能返回空&#xff0c;所以常常和let结合使用&#xff0c;示例如下&am…...

MySQL 进阶 - 2 ( 9000 字详解)

一&#xff1a; SQL 优化 1.1 插入数据 1.1.1 批量插入 单条 INSERT 语句执行时&#xff0c;需经历语法解析、事务提交、磁盘 I/O 等多个步骤。批量插入将多条数据合并为一条 SQL&#xff0c;能够减少网络通信和事务开销。 -- 单条插入&#xff08;低效&#xff09; INSERT…...

Devops之GitOps:什么是Gitops,以及它有什么优势

GitOps 定义 GitOps 是一种基于版本控制系统&#xff08;如 Git&#xff09;的运维实践&#xff0c;将 Git 作为基础设施和应用程序的唯一事实来源。通过声明式配置&#xff0c;系统自动同步 Git 仓库中的期望状态到实际运行环境&#xff0c;实现持续交付和自动化运维。其核心…...

VSCode和Fitten Code

提示&#xff1a;本文为学习记录&#xff0c;若有错误&#xff0c;请联系作者。 文章目录 一、离线安装二、在线安装总结 一、离线安装 访问 Open VSX 镜像站 打开 https://open-vsx.org&#xff0c;搜索 Fitten Code 点击“从VSIX安装”&#xff0c;选择下载的VSIX即可。安装…...

在 Visual Studio Code 中安装 Python 环境

在 Visual Studio Code 中安装 Python 环境 1. 安装 Visual Studio Code 首先&#xff0c;下载并安装 Visual Studio Code&#xff08;VS Code&#xff09;&#xff1a; 下载链接&#xff1a;Visual Studio Code 官网安装步骤&#xff1a;按照下载页面的说明进行安装。 2. …...

[问题帖] vscode 重启远程终端

原理 有的时候&#xff0c;在vscode 远程ssh连接到服务器的时候&#xff0c;可能遇到需要重启终端才能生效的配置&#xff0c;比如add group的时候&#xff0c;而此时无论你是关闭vscode终端重启&#xff0c;还是reload窗口都是没用的。 因为不管你本地是否连接了远程的vscode服…...

PostgreSQL技术大讲堂 - 第86讲:数据安全之--data_checksums天使与魔鬼

PostgreSQL技术大讲堂 - 第86讲&#xff0c;主题&#xff1a;数据安全之--data_checksums天使与魔鬼 1、data_checksums特性 2、避开DML规则&#xff0c;嫁接非法数据并合法化 3、避开约束规则&#xff0c;嫁接非法数据到表中 4、避开数据检查&#xff0c;读取坏块中的数据…...

No staged files match any configured task

我在拉取一个新项目的时候&#xff0c;进行 git commit 的时候就出现了这个问题 然后我现在来说一下我出现这个问题的解决思路 我们点击 “显示命令输出” 我们把第二行的错误 subject may not be empty [subject-empty] 复制搜索一下 这是其他人写的 博客&#xff1a;subje…...

Sqlite3 查看db文件

以下是一些 SQLite3 常用命令的整理&#xff0c;涵盖数据库操作、表管理、数据查询等场景&#xff1a; 1. 数据库连接与退出 打开/创建数据库&#xff1a;sqlite3 filename.db # 打开或创建数据库文件退出 SQLite3 命令行&#xff1a;.exit # 退出 .quit …...

【leetcode hot 100 152】乘积最大子数组

错误解法&#xff1a;db[i]表示以i结尾的最大的非空连续&#xff0c;动态规划&#xff1a;dp[i] Math.max(nums[i], nums[i] * dp[i - 1]); class Solution {public int maxProduct(int[] nums) {int n nums.length;int[] dp new int[n]; // db[i]表示以i结尾的最大的非空连…...

微信小程序实时日志记录-接口监控

文章目录 微信小程序如何抓取日志&#xff0c;分析用户异常问题可查看用户具体页面行为操作web体验分析![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/dd20bb72606842128aa1eaf0881196f6.png) 腾讯小程序平台&#xff0c;提供了非常好用的&#xff0c;。 web分析工…...

【C++刷题】二叉树基础OJ题

&#x1f4dd;前言说明&#xff1a; 本专栏主要记录本人的基础算法学习以及刷题记录&#xff0c;使用语言为C。 每道题我会给出LeetCode上的题号&#xff08;如果有题号&#xff09;&#xff0c;题目&#xff0c;以及最后通过的代码。没有题号的题目大多来自牛客网。对于题目的…...

CSS高级技巧

目录 一、精灵图 二、字体图标 三、CSS制作三角形 四、CSS用户界面样式 1、鼠标样式 cursor 2、轮廓线 outline 3、防止拖拽文本域 resize 五、vertical-align 属性 六、溢出的文字省略号显示 1、单行文本溢出显示省略号 2、多行文本溢出显示省略号 七、常见布局技…...

70. 爬楼梯:动态规划

题目来源 70. 爬楼梯 - 力扣&#xff08;LeetCode&#xff09; 题目描述 思路 1.观察每个较少的台阶的方法 2.dp[0,1,2,3,5,8,13]---->dp[i]表示爬上第i阶的方法数 3.观察dp&#xff1a;dp[i]dp[i-1]dp[i-2]; 代码 public int climbStairs(int n) {int[] dp new int…...

使用治疗前MR图像预测脑膜瘤Ki-67的多模态深度学习模型

大家好&#xff0c;我是带我去滑雪&#xff01; 脑膜瘤是一种常见的脑部肿瘤&#xff0c;Ki-67作为肿瘤细胞增殖的标志物&#xff0c;对于评估肿瘤的生物学行为、预后以及治疗方案的制定具有至关重要的作用。然而&#xff0c;传统的Ki-67检测依赖于组织学切片和免疫组化染色等方…...

Skynet.socket 函数族使用详解

目录 Skynet.socket 函数族使用详解核心功能分类一、TCP 连接管理1. 监听端口2. 建立连接3. 关闭连接 二、数据读写操作1. 阻塞式读取2. 写入数据2.1 socket.write(fd, data) 的返回值2.2 示例代码2.3 关键注意事项2.4 与其他函数的区别2.5 底层原理2.6 总结 三、UDP 处理1. 创…...

Python signal 模块详解:优雅处理异步事件

诸神缄默不语-个人技术博文与视频目录 在 Linux 或类 Unix 系统中&#xff0c;信号&#xff08;Signal&#xff09;是一种用于进程间通信的机制&#xff0c;允许操作系统或其他进程向目标进程发送异步通知。 Python 的 signal 模块提供了对这些信号的访问和处理能力&#xff0…...

[LeetCode 189] 轮转数组

[LeetCode 189] 轮转数组 题目描述&#xff1a; 给定一个整数数组 nums&#xff0c;将数组中的元素向右轮转 k 个位置&#xff0c;其中 k 是非负数。 示例 1: 输入: nums [1,2,3,4,5,6,7], k 3 输出: [5,6,7,1,2,3,4] 示例 2: 输入&#xff1a;nums [-1,-100,3,99], k 2 …...

【Qt】qDebug() << “中文测试“; 乱码问题

环境 Qt Creator版本&#xff1a;4.7.1 编译器&#xff1a;MSVC2015_32bit 解法一 在.pro文件中添加 msvc:QMAKE_CXXFLAGS -execution-charset:utf-8注意&#xff1a; 1、需要清理项目&#xff0c;并重新qmake&#xff0c;然后构建。 测试项目下载&#xff1a;https://do…...

解析Java根基:Object类核心方法

Object类常见方法解析 在Java编程中&#xff0c;Object类是所有类的根类&#xff0c;它包含了许多实用的方法&#xff0c;这些方法在不同的场景下发挥着重要作用。下面我们来详细了解一下Object类中的一些常见方法。 1. toString方法 toString方法是用于将对象转换为字符串表…...

最近在工作中感受到了设计模式的重要性

之前了解设计模式&#xff1a;只是应付一下面试 在之前一年多的工作中也没遇到使用场景 最近在搭建验证环境的时候&#xff0c;才发现这玩意这么重要 首先是设计模式的使用场景一定是在很复杂繁琐的场景下进行的 之所以说是复杂/繁琐的场景&#xff0c;因为一些场景也许逻辑不难…...

Docker 镜像、容器与数据卷的高效管理:最佳实践与自动化脚本20250411

Docker 镜像、容器与数据卷的高效管理&#xff1a;最佳实践与自动化脚本 引言 在现代软件开发中&#xff0c;容器化技术正变得越来越重要。Docker 作为容器化的代表工具&#xff0c;在各大企业中得到了广泛的应用。然而&#xff0c;随着容器化应用的增多&#xff0c;如何高效…...

[UEC++]UE5C++各类变量相关知识及其API(更新中)

基础变量 UE自己定义的目的&#xff1a;1.跨平台&#xff1b;2.兼容反射&#xff1b;3.方便宏替换 FString 基础赋值与初始化 遍历与内存 迭代器访问 清除系列操作 合并 插入与移除 RemoveFromStart是从开头看&#xff0c;没有则移除失败返回false&#xff1b; RemoveFromEnd是…...

C++中的设计模式

设计模式是软件工程中用于解决常见问题的可复用解决方案。它们提供了一种标准化的方法来设计和实现软件系统&#xff0c;从而提高代码的可维护性、可扩展性和可重用性。C 是一种支持多种编程范式&#xff08;如面向对象、泛型编程等&#xff09;的语言&#xff0c;因此可以方便…...

Java 设计模式:装饰者模式详解

Java 设计模式&#xff1a;装饰者模式详解 装饰者模式&#xff08;Decorator Pattern&#xff09;是一种结构型设计模式&#xff0c;它通过动态地为对象添加新功能&#xff0c;扩展其行为&#xff0c;而无需修改原有类的代码。装饰者模式遵循“开闭原则”&#xff0c;提供了比…...

C++ 大数相加(简要版)

#include <algorithm> #include <iterator> class Solution { public:/*** 计算两个数之和* param s string字符串 表示第一个整数* param t string字符串 表示第二个整数* return string字符串*/string solve(string s, string t) {// 处理空字符串的情况&#xf…...

Spring IoC深度解析:掌控Bean存储艺术与分层架构的智慧​​

一、IoC的本质&#xff1a;从"造物主"到"使用者"的思维跃迁 在传统编程中&#xff0c;开发者像"造物主"一样亲手创建每个对象&#xff08;new UserController()&#xff09;&#xff0c;并管理它们的依赖关系。这种方式导致代码高度耦合&#xf…...

8.4 容器2

版权声明&#xff1a;本文为博主原创文章&#xff0c;转载请在显著位置标明本文出处以及作者网名&#xff0c;未经作者允许不得用于商业目的 8.4.3 TabControl&#xff08;选项卡&#xff09;控件 TabControl控件可以通过设置多个选项卡页&#xff08;TabPage控件&#xff09…...

一组可能的机器学习问题列表

线性回归与多项式拟合的关系最小二乘法在机器学习中的应用梯度下降是如何实现的贝叶斯分类器的应用场景高斯分布与判定在哪里用到模型的评估有哪些参数误差中的偏差和方差定义训练集分组的快捷方式如何度量模型性能查准率查全率的定义roc,aux的含义正则化是什么意思k均值用来解…...

Android 权限列表

权限名称描述android.permission.ACCESS_CHECKIN_PROPERTIES访问登记属性读取或写入登记 check-in 数据库属性表的权限android.permission.ACCESS_COARSE_LOCATION获取粗略位置通过 WiFi 或移动基站的方式获取用户粗略的经纬度信息&#xff0c;定位精度大概误差在 30~1500 米an…...

探索在视频深度伪造中的细微的表情变化或对特定面部特征的小改动检测方法

概述 2019 年&#xff0c;美国众议院议长南希佩洛西成为了一次针对性的、技术含量相对较低的“深度伪造”式攻击的目标。真实的佩洛西视频被编辑&#xff0c;让她看起来像是喝醉了酒。这一不真实的事件在真相大白之前被分享了数百万次&#xff0c;而且在一些人没有关注后续报道…...

调用阿里云API实现身份证文字识别

TOC# 1.作者介绍 姚元帅&#xff0c;男&#xff0c;西安工程大学电子信息学院&#xff0c;2024级研究生 研究方向&#xff1a;机器视觉与人工智能 电子邮件&#xff1a;3183969029qq.com 乔幸荣&#xff0c;女&#xff0c;西安工程大学电子信息学院&#xff0c;2024级研究生&a…...

使用UFW+IPSET禁用海外IP配置持久化操作

上一章我们介绍了如何使用ufwipset禁用海外IP&#xff0c;但是如果服务器重启动&#xff0c;之前的配置就无效了&#xff0c;所以让配置持久化可以避免我们反复设置的麻烦。 IPSET配置持久化的方法有很多种&#xff0c;目前我配置成的是设置ipset后台服务&#xff0c;具体方法…...

深入Linux内核理解socket的本质

本文将从一个初学者的角度开始聊起&#xff0c;让大家了解 Socket 是什么以及它的原理和内核实现。 一、Socket 的概念 Socket 就如同我们日常生活中的插头与插座的连接关系。在网络编程中&#xff0c;Socket 是一种实现网络通信的接口或机制。 想象一下&#xff0c;插头插入…...

Python使用爬虫IP抓取数据过程

用户之前询问了不同语言的爬虫示例&#xff0c;特别是Python、Node.js和Ruby。现在他们希望详细扩展Python版本中使用代理IP的过程。 用户可能已经掌握了基本的爬虫编写&#xff0c;但遇到了IP被封的问题&#xff0c;或者想防止被封。他们需要知道如何集成代理IP到现有的代码中…...

通过MCP+数据库实现AI检索和分析

通过 MCP&#xff08;Multi-Agent Collaboration Platform&#xff0c;多智能体协作平台&#xff09; 数据库&#xff0c;实现一个AI检索和分析系统。 一、系统目标 实现通过 AI 多智能体对结构化&#xff08;数据库&#xff09;和非结构化&#xff08;文档、文本&#xff09…...

51单片机烧录程序演示教程

51单片机烧录程序演示教程 51单片机是一种经典的8位单片机&#xff0c;广泛应用于嵌入式系统开发中。烧录程序是指将编译好的代码下载到单片机的存储器中&#xff0c;以便单片机能够按照程序运行。以下是详细的烧录流程和步骤。 所需工具和材料 硬件&#xff1a; 51单片机开发…...

06软件测试需求分析案例-添加用户

给职业顾问部的老师添加用户密码后&#xff0c;他们才能登录使用该软件。只有admin账户具有添加用户、修改用户信息、删除用户的权利。admin是经理或团队的第一个人的账号&#xff0c;后面招一个教师就添加一个账号。 通读需求是提取信息&#xff0c;提出问题&#xff0c;输出…...

Asp.NET Core WebApi IOptions<T>详解

IOptions<T> 是 ASP.NET Core 中用于访问配置数据的一个接口&#xff0c;它属于 Microsoft.Extensions.Options 命名空间。通过 IOptions<T>&#xff0c;你可以将配置绑定到强类型的类中&#xff0c;并在应用程序的不同部分中注入和使用这些配置。这种方式不仅使得…...

Gartner发布软件供应链安全市场指南:软件供应链安全工具的8个强制功能、9个通用功能及全球29家供应商

攻击者的目标是由开源和商业软件依赖项、第三方 API 和 DevOps 工具链组成的软件供应链。软件工程领导者可以使用软件供应链安全工具来保护他们的软件免受这些攻击的连锁影响。 主要发现 越来越多的软件工程团队现在负责解决软件供应链安全 (SSCS) 需求。 软件工件、开发人员身…...