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

受控组件和非受控组件的区别

在 React 中,​受控组件(Controlled Components)​ 和 ​非受控组件(Uncontrolled Components)​ 是处理表单元素的两种不同方式,它们的核心区别在于 ​数据管理的方式 和 ​与 React 的交互模式。

受控组件(Controlled Components)

定义

表单元素(如 <input><textarea><select>)的值由 ​Reactstate 完全控制。用户输入会触发 React 的状态更新,表单的当前值始终与 Reactstate 同步。

关键特征

  • 数据流:单向绑定(从 React state 到 DOM)。
  • 更新方式:通过 onChange 事件手动更新 state。
  • 值的来源:组件的 value 或 checked 属性直接绑定到 state。

代码示例

import { useState } from 'react';function ControlledForm() {const [inputValue, setInputValue] = useState('');const handleChange = (e) => {setInputValue(e.target.value); // 手动同步到 state};return (<inputtype="text"value={inputValue} // 值由 React state 控制onChange={handleChange}/>);
}

适用场景

  • 需要实时验证输入(如密码强度检查)。
  • 动态表单(如根据输入内容显示其他字段)。
  • 强制输入格式(如只能输入数字)。

优点

  • 完全控制表单数据,确保 React state 是唯一数据源。
  • 支持复杂的交互逻辑(如输入时实时反馈)。

缺点

  • 代码量较多(需要为每个表单元素编写事件处理函数)。
  • 频繁的 state 更新可能导致性能问题(大型表单需优化)。

非受控组件(Uncontrolled Components)

定义

表单元素的值由 ​DOM 自身管理,React 通过 ref 在需要时(如表单提交时)直接读取 DOM 的值。用户输入不会触发 React 的状态更新。

关键特征

  • 数据流:直接操作 DOM。
  • 更新方式:通过 ref 手动获取值。
  • 值的来源:DOM 节点的当前值。

代码示例

import { useRef } from 'react';function UncontrolledForm() {const inputRef = useRef(null);const handleSubmit = (e) => {e.preventDefault();console.log(inputRef.current.value); // 通过 ref 获取 DOM 值};return (<form onSubmit={handleSubmit}><inputtype="text"ref={inputRef} // 使用 ref 关联 DOM 节点defaultValue="初始值" // 仅初始化时设置默认值/><button type="submit">提交</button></form>);
}

适用场景

  • 简单表单(不需要实时验证或动态交互)。
  • 文件上传(<input type="file"> 必须用非受控组件)。
  • 性能敏感场景(避免频繁 state 更新)。

优点

  • 代码简洁,无需管理状态。
  • 性能更好(减少渲染次数)。

缺点

  • 无法实时控制数据(如强制输入格式)。
  • 不符合 React 的“单一数据源”原则。

核心区别对比

特性受控组件非受控组件
数据管理React state 控制DOM 自身管理
值同步实时同步(onChange 事件)手动获取(通过 ref)
初始值设置通过 value 属性通过 defaultValue 属性
表单验证时机输入时实时验证提交时验证
代码复杂度较高(需处理事件和状态)较低(直接操作 DOM)
性能可能较低(频繁渲染)较高
React 哲学匹配度高(符合单向数据流)低(依赖 DOM 操作)

如何选择

  1. 优先受控组件:

大多数场景推荐使用受控组件,尤其是需要实时交互、验证或动态表单时。

  1. 非受控组件的合理场景:
  • 文件上传(<input type="file">)。
  • 性能敏感且无需实时反馈的表单。
  • 与非 React 的第三方库集成(如富文本编辑器)。

注意点

  1. 文件输入

<input type="file"> 必须用非受控组件,因为其值只能由用户设置(安全限制)。

  1. 默认值:

非受控组件用 defaultValuedefaultChecked 设置初始值(类似原生 HTML)。

  1. 受控组件的性能优化:

大型表单中避免频繁渲染,可通过防抖(debounce)或 useCallback 优化事件处理函数。

总结

  • ​受控组件:数据由 React 完全控制,适合复杂交互。
  • 非受控组件:数据由 DOM 管理,适合简单场景或性能敏感需求。

根据实际需求选择,优先遵循 React 的单向数据流原则,仅在必要时使用非受控组件。

相关文章:

受控组件和非受控组件的区别

在 React 中&#xff0c;​受控组件&#xff08;Controlled Components&#xff09;​ 和 ​非受控组件&#xff08;Uncontrolled Components&#xff09;​ 是处理表单元素的两种不同方式&#xff0c;它们的核心区别在于 ​数据管理的方式 和 ​与 React 的交互模式。 受控组件…...

Mhand Pro 多节点动作捕捉手套:一副手套多场景应用

随着动作捕捉技术的发展&#xff0c;动捕手套的出现为虚拟现实交互、VR游戏开发、机器臂/灵巧手遥操作等方面带来了更加便捷可行的方案。 广州虚拟动力作为一家在动作捕捉领域深耕多年的公司&#xff0c;基于传感器技术而研发的多节点惯性动作捕捉手套&#xff0c;兼具VR交互与…...

Kafka消息丢失全解析!原因、预防与解决方案

作为一名高并发系统开发工程师&#xff0c;在使用消息中间件的过程中&#xff0c;无法避免遇到系统中消息丢失的问题&#xff0c;而Kafka作为主流的消息队列系统&#xff0c;消息丢失问题尤为常见。 在这篇文章中&#xff0c;将深入浅出地分析Kafka消息丢失的各种情况&#xf…...

BERT与Transformer到底选哪个-上部

一、先理清「技术家谱」&#xff1a;BERT和Transformer是啥关系&#xff1f; 就像「包子」和「面食」的关系——BERT是「Transformer家族」的「明星成员」&#xff0c;而GPT、Qwen、DeepSeek这些大模型则是「Transformer家族」的「超级后辈」。 1.1 BERT&#xff1a;Transfor…...

【Unity】记录TMPro使用过程踩的一些坑

1、打包到webgl无法输入中文&#xff0c;编辑器模式可以&#xff0c;但是webgl不行&#xff0c;试过网上的脚本&#xff0c;还是不行 解决方法&#xff1a;暂时没找到 2、针对字体asset是中文时&#xff0c;overflow的效果模式处理奇怪&#xff0c;它会出现除了overflow模式以…...

数据处理的两种范式:深入解析OLTP与OLAP系统

目录 前言1. OLTP&#xff1a;业务运作的基石1.1 OLTP的核心定义与价值1.2 OLTP的技术架构特点1.3 OLTP的典型应用场景 2. OLAP&#xff1a;决策支持的大脑2.1 OLAP的基本概念与作用2.2 OLAP的技术实现方式2.3 OLAP的应用实践 3. OLTP与OLAP的对比与融合3.1 核心差异的深度解析…...

本地飞牛NAS快速部署WordPress个人网站并一键上线公网远程访问

文章目录 前言1. Docker下载源设置2. Docker下载WordPress3. Docker部署Mysql数据库4. WordPress 参数设置5. 飞牛云安装Cpolar工具6. 固定Cpolar公网地址7. 修改WordPress配置文件8. 公网域名访问WordPress ​ 推荐 ​ 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗…...

windows环境下的cmake使用

创建一个目录testcmake 进入目录 创建一个文件main.cpp : #include <iostream> using namespace std; int main(){cout<<"what is going on?"<<endl;return 0; }再创建一个cmakelists.txt set(CMAKE_CXX_STANDARD 20) add_executable(test2 mai…...

多线程(多线程案例)(续~)

目录 一、单例模式 1. 饿汉模式 2. 懒汉模式 二、阻塞队列 1. 阻塞队列是什么 2. 生产者消费者模型 3. 标准库中的阻塞队列 4. 自实现阻塞队列 三、定时器 1. 定时器是什么 2. 标准库中的定时器 欢迎观看我滴上一篇关于 多线程的博客呀&#xff0c;直达地址&#xf…...

同步SVPWM调制策略的初步学习记录

最近项目需要用到一些同步调制SVPWM相关的内容&#xff08;现在的我基本都是项目驱动了&#xff09;&#xff0c;因此对该内容进行一定的学习。 1 同步SVPWM调制的背景 我们熟知的一些知识是&#xff1a;SVPWM&#xff08;空间矢量脉宽调制&#xff09;是一种用于逆变器的调制…...

权重参数矩阵

目录 1. 权重参数矩阵的定义与作用 2. 权重矩阵的初始化与训练 3. 权重矩阵的解读与分析 (1) 可视化权重分布 (2) 统计指标分析 4. 权重矩阵的常见问题与优化 (1) 过拟合与欠拟合 (2) 梯度问题 (3) 权重对称性问题 5. 实际应用示例 案例1&#xff1a;全连接网络中的…...

堆叠虚拟化

各厂商叫法不同&#xff1a;思科 VSS 锐捷 VSU 华为 Stack 华三 IRF 虚拟化为一台设备进行管理&#xff0c;从而实现高可靠性。当任意交换机故障时&#xff0c;都能实现设备、链路切换&#xff0c;保护客户业务稳定运行 传统的园区网高可靠性技术出现故障时切换时间很难做到毫…...

3.31-4 性能面试题

面试题 1、性能问题的六个特征&#xff1a; &#xff08;1&#xff09;、持续缓慢&#xff1a; &#xff08;2&#xff09;、随着时间推进越来越慢、 &#xff08;3&#xff09;、随着负载增加越来越慢、 &#xff08;4&#xff09;、零星挂起或异常错误、 &#xff08;5…...

2025年最新自动化/控制保研夏令营预推免面试真题分享(东南/浙大/华科清华)

笔者来2021级本科自动化专业&#xff0c;以下部分将介绍我在夏令营以及预推免期间发生经历和问题 东南大学自动化学院 东南大学&#xff1a; 东南大学面试有一个十分明显的特点&#xff0c;就是极其注重专业课&#xff0c;基本上就是在面试的时候电脑上会有几个文件夹&#x…...

freecad手动装插件 add on

python工作台输入 FreeCAD.ConfigGet("UserAppData") 在返回的地址上新建文件夹&#xff1a;Mod #like /home/chen/snap/freecad/common 进入Mod #like /home/chen/snap/freecad/common/Mod git clone 你要的项目 #like git clone https://github.com/looooo/f…...

mysql 主从搭建步骤

主库&#xff1a; 开启log-bin参数&#xff0c;log-bin 参数修改需要重启服务器 --You can change the server_id value dynamically by issuing a statement like this:SET GLOBAL server_id 2;--to enable binary logging using a log file name prefix of mysql-bin, and c…...

从AI大模型到MCP中台:构建下一代智能服务的核心架构

从AI大模型到MCP中台&#xff1a;构建下一代智能服务的核心架构 引言&#xff1a;AI大模型带来的服务重构革命 在ChatGPT掀起全球AI热潮的今天&#xff0c;大模型展现出的惊人能力正在重塑整个软件服务架构。但鲜为人知的是&#xff0c;真正决定AI服务成败的不仅是模型本身&a…...

31天Python入门——第18天:面向对象三大特性·封装继承多态

你好&#xff0c;我是安然无虞。 文章目录 面向对象三大特性1. 封装2. 继承3. 多态4. 抽象基类5. 补充练习 面向对象三大特性 面向对象编程&#xff08;Object-Oriented Programming, 简称OOP&#xff09;有三大特性, 分别是封装、继承和多态.这些特性是面向对象编程的基础, …...

css_z-index属性

z-index 工作原理及层叠上下文&#xff08;Stacking Context&#xff09; 在 CSS 中&#xff0c;z-index 主要用于控制元素的堆叠顺序&#xff0c;决定哪些元素显示在上层&#xff0c;哪些元素在下层。它的工作原理涉及 层叠上下文&#xff08;Stacking Context&#xff09;&a…...

ros2--xacro

什么是xacro 在ROS 2中&#xff0c;Xacro&#xff08;XML Macros&#xff09;是一种基于XML的宏语言&#xff0c;专门用于简化URDF&#xff08;Unified Robot Description Format&#xff09;文件的编写。它通过宏定义、变量替换和代码复用等功能&#xff0c;让机器人模型的描…...

Nordic 新一代无线 SoC nRF54L系列介绍

目录 概述 1 nRF54L系列特点 1.1 内存 1.2 芯片封装 2 增强的多协议支持 3 其他特性 4 nRF54L系列MCU特性 4.1 多协议无线电 4.2 安全性 4.3 存储空间 4.4 工作参数 4.5 调试接口 4.6 外设 概述 全新 nRF54L 系列的所有三款器件均将 2.4 GHz 无线电和 MCU 功能 (包括…...

力扣HOT100之矩阵:240. 搜索二维矩阵 II

这道题直接暴力AC的&#xff0c;虽然也能过&#xff0c;但是耗时太长了。 class Solution { public:bool searchMatrix(vector<vector<int>>& matrix, int target) {int edge min(matrix.size(), matrix[0].size()) - 1; //先在edge * edge的矩阵中搜索for…...

一个判断A股交易状态的python脚本

最近在做股票数据相关的项目&#xff0c;需要用到判断某一天某个时刻A股的状态&#xff0c;比如休市&#xff0c;收盘&#xff0c;交易中等&#xff0c;发动脑筋想了一下&#xff0c;这个其实还是比较简单的&#xff0c;这里我把实现方法分享给大家。 思路 当天是否休市 对于某…...

为什么package.json里的npm和npm -v版本不一致?

这个情况出现是因为package.json里的 npm 版本和系统实际使用的 npm 版本是两个不同的概念。让我来解释一下&#xff1a; 原因解释 全局 npm vs 项目依赖&#xff1a; npm -v显示的是系统全局安装的 npm 版本&#xff08;位于/usr/bin/npm或类似路径&#xff09;package.jso…...

Rust 有问有答之 use 关键字

use 是什么# use 是 Rust 编程语言的关键字。using 是 编程语言 C# 的关键字。 关键字是预定义的保留标识符&#xff0c;对编译器有特殊意义。 using 关键字有三个主要用途&#xff1a; using 语句定义一个范围&#xff0c;在此范围的末尾将释放对象。 using 指令为命名空间创…...

[skip]CBAM

论文题目:CBAM: Convolutional Block Attention Module 中文题目:CBAM: 注意力卷积模块 0摘要 我们提出了卷积块注意力模块(CBAM),一个简单而有效的前馈卷积神经网络注意力模块。给定一个中间特征图,我们的模块沿着两个独立的维度(通道和空间)顺序推断注意力图,然后…...

突破反爬困境:SDK开发,浏览器模块(七)

声明 本文所讨论的内容及技术均纯属学术交流与技术研究目的&#xff0c;旨在探讨和总结互联网数据流动、前后端技术架构及安全防御中的技术演进。文中提及的各类技术手段和策略均仅供技术人员在合法与合规的前提下进行研究、学习与防御测试之用。 作者不支持亦不鼓励任何未经授…...

在MFC中使用Qt(四):使用属性表(Property Sheet)实现自动化Qt编译流程

前言 首先回顾下前面文章介绍的&#xff1a; 在MFC中使用Qt&#xff08;一&#xff09;&#xff1a;玩腻了MFC&#xff0c;试试在MFC中使用Qt&#xff01;&#xff08;手动配置编译Qt&#xff09; 在MFC中使用Qt&#xff08;二&#xff09;&#xff1a;实现Qt文件的自动编译流…...

相机镜头景深

文章目录 定义影响因素实际应用特殊情况 参考&#xff1a;B站优致谱视觉 定义 景深是指在摄影机镜头或其他成像器前沿着能够取得清晰图像的成像器轴线所测定的物体距离范围。简单来说&#xff0c;就是在一张照片中&#xff0c;从前景到背景&#xff0c;能够保持清晰锐利的区域…...

HTML实现图片上添加水印的工具

HTML实现图片上添加水印的工具 本文介绍两种实现方式&#xff1a;图片上添加文字水印和图片上添加图片水印。部分源码参照自网络。 一、图片上添加文字水印 先看效果图&#xff1a; 源码如下&#xff1a; <!DOCTYPE html> <html lang"zh"> <head&…...

mysql JSON_ARRAYAGG联合JSON_OBJECT使用

父表数据&#xff08;表名&#xff1a;class&#xff09; idname1一年级2二年级3三年级 子表数据&#xff08;表名&#xff1a;students&#xff09; idnameclassId11张三112李四113小明3 sql查询&#xff08;推荐使用方法一&#xff09; 方法一 (使用IFNull判断子表数据是否…...

VMware虚拟机 ubuntu22.04无法与共享粘贴板和拖拽文件的解决方案

VMware虚拟机 ubuntu22.04无法与共享粘贴板和拖拉文件的解决方案 卸载VMware tools安装open-vm-tools还无法拖拽文件 卸载VMware tools 确保卸载完vmware-tools # 进入vmware-tools安装目录/bin sudo vmware-uninstall-tools.pl sudo rm -rf /usr/lib/vmware-tools sudo apt-…...

C++STL---<functional>

C标准库中的 <functional> 库是一个强大的工具集&#xff0c;它提供了用于处理函数对象、函数绑定、函数包装等功能的设施&#xff0c;极大地增强了代码的灵活性和可复用性。 1. 函数对象&#xff08;Functors&#xff09; 函数对象&#xff0c;也被称作仿函数&#xf…...

【Android】BluetoothSocket.connect () 的实现与协议栈交互源码解析

本文以 Android 蓝牙框架中的BluetoothSocket.connect()方法为切入点,深入剖析 Android 设备与远程蓝牙设备建立连接的全流程。从 Java 层的 API 调用出发,逐步追踪至 JNI 层的接口转发,最终进入 Buedroid 协议栈(RFCOMM/L2CAP 层),揭示蓝牙连接的核心机制。重点解析了权…...

算法导论(动态规划)——简单多状态

算法思路&#xff08;17.16&#xff09; 状态表示&#xff1a; 在处理线性动态规划问题时&#xff0c;我们可以通过“经验 题目要求”来定义状态表示。通常有两种选择&#xff1a; 以某个位置为结尾的情况&#xff1b;以某个位置为起点的情况。 本题中&#xff0c;我们选择更常…...

主成分分析(PCA)学习介绍及其高阶应用,金融风险分析

前言 主成分分析&#xff08;Principal Component Analysis, PCA&#xff09;是统计学中一种重要的降维技术。它通过寻找数据中各特征之间的线性关系&#xff0c;来降低数据的维度&#xff0c;同时保留数据中的主要信息。PCA在机器学习、信号处理、图像处理等领域广泛应用&…...

利用 SSRF 和 Redis 未授权访问进行内网渗透

目录 环境搭建 ​编辑 发现内网存活主机 ​编辑 扫描内网端口 ​编辑 利用 Redis 未授权访问进行 Webshell 写入 步骤1&#xff1a;生成 payload 方式1&#xff1a;使用python生成 payload 方式二&#xff1a;使用 Gopher 工具 步骤 2&#xff1a;写入 Webshell&#xf…...

计算机网络和因特网

目录 1、什么是Internet&#xff1f; 1.1定义 1.2具体构成描述 2、什么是协议&#xff1f; 2.1 服务描述 2.2 网络协议 3、网络边缘 3.1 定义与组成 3.2 模式 3.3服务 4、接入网、物理媒介 4.1、宽带有线接入网技术 4.2、宽带无线接入网技术 5、网络核心&#xf…...

1.oracle修改配置文件

1.找到oracle的安装路径 D:\app\baozi\product\11.2.0\dbhome_1\NETWORK\ADMIN &#xff0c;修改下面的两个文件。如果提示没有权限&#xff0c;可以先把这两个文件复制到桌面&#xff0c;修改完后&#xff0c;在复制回来。 2.查看自己电脑的主机名&#xff0c; 右击 - 此电脑 …...

算法篇-------------双指针法

温馨提示&#xff1a;由于c语言在编程上更有优势&#xff0c;更加简洁&#xff0c;本文代码均为c代码&#xff0c;其他语言也可以 做&#xff0c;思想是不变的&#xff01; 1.应用场景 涉及到对数组的操作的题目&#xff0c;可以考虑双指针方法解决 2.基…...

Java关于包和final

什么是包&#xff1f; 包就是文件夹。用来管理等各种不同功能的java类&#xff0c;方便后期代码维护 包名的规则&#xff1a;公司域名反写包的作用&#xff0c;需要全部英文小写&#xff0c;见名知意。例如&#xff1a;com.pdsu.domain package com.pdsu.demain;public class…...

2025年华为HCIP题库分享

1101、 【拖拽题】OPSF邻接关系建立的过程中需要使用不同的报文&#xff0c;那么请分别将以下各个状态和该状态使用的报文联系起来。 答题格式为&#xff1a;11 22 33 43 正确答案&#xff1a;【12】【21】【24】【33】 解析&#xff1a; 建立邻居关系 RouterA的一个连接到广…...

49. 字母异位词分组

leetcode Hot 100系列 文章目录 一、核心操作二、外层配合操作三、核心模式代码总结 一、核心操作 先把每一个词都排序&#xff0c;拍完之后相同的就是字母异位词使用map&#xff0c;排序完的作为key&#xff0c;一个string数组作为value对于每一个词&#xff0c;排完序之后将…...

python 语法篇(一)

目录 1 正则匹配注意点11.1 正则匹配字符串写法1.2 创建re函数&#xff08;1&#xff09;re.search()--搜索第一个匹配项&#xff08;2&#xff09;re.match() - 从字符串开头匹配&#xff08;3&#xff09;re.findall() - 返回所有匹配项的列表&#xff08;4&#xff09;re.fi…...

机器学习ML极简指南

机器学习是现代AI的核心&#xff0c;从推荐系统到自动驾驶&#xff0c;无处不在。但每个智能应用背后&#xff0c;都离不开那些奠基性的模型。本文用最简练的方式拆解核心机器学习模型&#xff0c;助你面试时对答如流&#xff0c;稳如老G。 线性回归 线性回归试图通过"最…...

爬虫:网络请求(通信)步骤,http和https协议

电脑(浏览器)&#xff1a;www.baidu.com——url DNS服务器&#xff1a;IP地址标注服务器——1.1.38 DNS服务器返回IP地址给浏览器 浏览器拿到IP地址去访问服务器&#xff0c;返回响应 服务器返回给响应数据&#xff1a;html/css/js/jpg... html&#xff1a;文本 cs…...

【杂谈】-大型语言模型对具身人工智能发展的推动与挑战

大型语言模型对具身人工智能发展的推动与挑战 文章目录 大型语言模型对具身人工智能发展的推动与挑战1. 具身人工智能&#xff08;Embodied AI&#xff09;的内涵解析2. 大型语言模型的功能与作用3. 最新发展趋势4. 面临的挑战与考量因素5. 总结与展望 多年来&#xff0c;研发能…...

解决Beats Solo Buds 无法自动切换音频到耳机的问题

一、核心问题定位 现象矛盾点&#xff1a; Beats 耳机能连接但需手动切换音频 AirPods 可自动切换 → 排除 iOS 系统级故障 问题可能源于 Beats 固件兼容性 或 音频路由逻辑冲突 关键差异&#xff1a; 设备 芯片类型 自动切换协议支持 固件更新方式 AirPods 二代 H1芯片 原…...

MySQL基本查询

一.create 1.1 单行数据 全列插入 1.2 多行数据 指定列插入 1.3插入否则更新 1.4替换 二.Retrieve 2.1.SELECT列 2.1.1全列查询 2.1.2指定列查询 2.1.3查询字段为表达式 2.1.4 为查询结果指定别名 2.1.5结果去重 2.2WHERE 条件 2.2.1比较运算符 2.2.3逻辑运算符…...

面基:为什么不推荐用UUID作为主键

推荐回答结构&#xff1a; 技术理论层面分析 实际项目中的教训 优化改进过程 总结提炼认知 阐述回答 在阐述回答时&#xff0c;你可以从 UUID 本身特性带来的问题&#xff0c;以及在实际工作中遇到的具体场景和优化过程等方面展开&#xff0c;下面从这一思路&#xff0c;给…...