React 的受控组件和非受控组件有什么不同

news/2024/3/28 21:39:33/文章来源:https://blog.csdn.net/fe_watermelon/article/details/128961663

大家好,我是前端西瓜哥,今天我们来看看 React 的受控组件和非受控组件有什么不同。

受控组件

受控组件,指的是将表单元素的值交给组件的 state 来保存。

例子:

import './styles.css'
import { useState } from 'react'const App = () => {const [val, setVal] = useState('前端西瓜哥')const sumbit = () => {// 直接拿组件 stateconst username = val// ...}return (<div>用户名:<inputvalue={val}onInput={(e) => {setVal(e.target.value)}}/>...</div>)
}

我们用 value prop 控制着 input 元素的值,当发生输入事件时,我们将新值赋值给 val,然后 val 再通过 value 强制更新到 input。

这种写法,可以让 state 一直保持和 input 的内容相同,我们可以直接读取 state,将其传递给其他地方,比如通过 redux 去传递。

缺点是会进行组件的重渲染,一般来说表单元素并不复杂,重渲染成本不高,可以忽略不计。

非受控组件

非受控,就是指状态不由组件的 state 把持,而是让表单元素的内部控制着状态,在我们需要的时候再通过 element.value 的方式取出。

表单元素的初始值通过 defaultValue prop 来设置。

例子:

const App = () => {const ref = useRef(null)const sumbit = () => {// 通过元素的引用取值const username = ref.current?.value// ...}return (<div>用户名:<input ref={ref} defaultValue="前端西瓜哥" />...</div>)
}

优点是不会更新组件。缺点是不方便实时将值传给其他组件。

另外,它适合一种延迟更新状态的场景。比如输入一些内容,回车后失焦,发现格式不合法,就恢复为上一次的值。

结尾

受控组件和非受控组件,区别在于前者的表单状态由组件 state 控制,后者则是表单元素自己控制,要用时再读元素的值。

我是前端西瓜哥,欢迎关注我,学习更多前端知识。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_255725.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

云仓仓储的运行模式是什么?

仓库能够简单地定义为一个规划空间&#xff0c;通常是一个用于处置和贮存货物的大型商业建筑。因而&#xff0c;仓储是指在这样一个规划空间中存储和处置货物所触及的一切过程。仓库中常见的货物包括&#xff1a;;机械零配件、建筑资料、废品农产品、家具和电子产品。仓库中的一…

Fluid-数据缓存亲和性调度原理解析

前言在Fluid中&#xff0c;Dataset资源对象中所定义的远程文件是可被调度的&#xff0c;这意味着你能够像管理你的Pod一样管理远程文件缓存在Kubernetes集群上的存放位置。另外&#xff0c;Fluid同样支持对于应用的数据缓存亲和性调度&#xff0c;这种调度方式将应用(e.g. 数据…

二进制部署K8S集群

目录 一、架构图 二、部署步骤 1、实验环境 2、操作系统初始化配置 3、部署 docker引擎 4、部署 etcd 集群 5、部署 Master 组件 一、架构图 二、部署步骤 1、实验环境 服务器类型IP地址master192.168.80.5node01192.168.80.8node02192.168.80.9 2、操作系统初始化配置…

SpringBoot整合Mybatis的核心原理

0. 前言&#xff1a;1. 自动配置类MybatisAutoConfiguration&#xff1a;1.1. SqlSessionFactory的生成&#xff1a;1.2. Mapper的扫描和代理生成&#xff1a;1.2.1. MapperScannerConfigurer1.2.2. MapperFactoryBean1.2.3. getMapper生成代理对象2. 小结&#xff1a;0. 前言&…

3D模型深度生成网络【ShapeAssembly】

推荐&#xff1a;使用 NSDT场景设计器 快速搭建 3D场景。 我们提出了一个深度生成模型&#xff0c;该模型学习在ShapeAssembly中编写新颖的程序&#xff0c;ShapeAssembly是一种用于建模3D形状结构的特定领域语言。 执行 ShapeAssembly 程序会生成一个由部件代理长方体的分层连…

2023,考个软考中级证书稳妥深圳入户,5月考试8月办入户

最新消息&#xff01;最新消息&#xff01;最新消息&#xff01; 2023年2月8日&#xff0c;深圳市发展和改革委员会深圳市公安局深圳市人力资源和社会保障局关于印发《深圳市积分入户办法》的最新通知↓ 来源《深圳市发展和改革委员会》 该积分入户将于2023年2月15日正式实施&…

Prometheus监控Java-JMX

一、什么是 JMX Exporter ? JMX Exporter 利用 Java 的 JMX 机制来读取 JVM 运行时的一些监控数据&#xff0c;然后将其转换为 Prometheus 所认知的 metrics 格式&#xff0c;以便让 Prometheus 对其进行监控采集。 那么&#xff0c;JMX 又是什么呢&#xff1f;它的全称是&a…

ChatGPT 支持的搜索引擎 Bing 究竟什么样?

微软于2月8日北京时间凌晨在 Redmond 线下举办一场媒体活动&#xff0c;围绕微软的产品以及 AI&#xff0c;公布最新消息。这里我们先回顾一下微软在 AI 上的布局。 2019年&#xff0c;微软向 OpenAI 投资10亿美元&#xff0c;成为了 OpenAI 紧密的合作伙伴&#xff0c;而微软…

Java中动态调用setter以及getter

0x00 前言 对于非专业程序员的安全人员来说&#xff0c;因为没有代码项目的积累&#xff0c;很多知识体系都不完善&#xff0c;所以有必要在一些常用的内容进行学习的总结。 在很多的调用链中都会用到**“动态调用setter以及getter”**这个知识点&#xff0c;比如经典的CB链&a…

Python语言零基础入门教程(九)

Python pass 语句 Python pass 是空语句&#xff0c;是为了保持程序结构的完整性。 pass 不做任何事情&#xff0c;一般用做占位语句。 Python 语言 pass 语句语法格式如下&#xff1a; pass测试实例&#xff1a; #!/usr/bin/python # -*- coding: UTF-8 -*- # 输出 Pytho…

线程池小结

什么是线程池 线程池其实就是一种多线程处理形式&#xff0c;处理过程中可以将任务添加到队列中&#xff0c;然后在创建线程后自动启动这些任务。这里的线程就是我们前面学过的线程,这里的任务就是我们前面学过的实现了Runnable或Callable接口的实例对象; 为什么使用线程池 …

leetcode刷题之背包问题(01背包)

01 背包 概念&#xff1a;有n件物品和一个最多能背重量为w 的背包。第i件物品的重量是weight[i]weight[i]weight[i]&#xff0c;得到的价值是value[i]value[i]value[i]。每件物品只能用一次&#xff0c;求解将哪些物品装入背包里物品价值总和最大。 方法1&#xff1a;暴力回溯…

FPGA时序约束与分析 --- 实例教程(1)

注意&#xff1a; 时序约束辅助工具或者相关的TCL命令&#xff0c;都必须在 open synthesis design / open implemention design 后才能有效运行。 1、时序约束辅助工具 2、查看相关时序信息 3、一般的时序约束顺序 1、 时序约束辅助工具&#xff08;1&#xff09;时序约束编辑…

微服务负载均衡器Ribbon

目录 什么是Ribbon 客户端的负载均衡 服务端的负载均衡 常见负载均衡算法 Nacos使用Ribbon 添加LoadBalanced注解 修改controller Ribbon负载均衡策略 IRule AbstractLoadBalancerRule 修改默认负载均衡策略 自定义负载均衡策略 配置自定义的策略 饥饿加载 Ribbo…

【golang】1797. 设计一个验证系统

你需要设计一个包含验证码的验证系统。每一次验证中&#xff0c;用户会收到一个新的验证码&#xff0c;这个验证码在 currentTime 时刻之后 timeToLive 秒过期。如果验证码被更新了&#xff0c;那么它会在 currentTime &#xff08;可能与之前的 currentTime 不同&#xff09;时…

C语言经典编程题100例(1-20)

1、练习2-1 Programming in C is fun!本题要求编写程序&#xff0c;输出一个短句“Programming in C is fun!”。输入格式:本题目没有输入。输出格式:在一行中输出短句“Programming in C is fun!”。代码&#xff1a;#include<stdio.h> int main() {printf("Progra…

Java中类是什么

类(class)是构造对象的模板或蓝图。 我们可以将类想象成制作小甜饼的模具&#xff0c;将对象想象为小甜饼。由类构造(construct)对象的过程称为创建类的实例(instance)。 正如前面所看到的&#xff0c;用Java 编写的所有代码都位于某个类里面。 标准 Java 库提供了几千个类&a…

bcript 算法

一、简介 今天要给大家介绍的一种“加密”算法叫做 bcrypt&#xff0c;bcrypt 是由 Niels Provos 和 David Mazires 设计的密码哈希函数&#xff0c;他是基于 Blowfish 密码而来的&#xff0c;并于 1999 年在 USENIX 上提出。 除了加盐来抵御 rainbow table 攻击之外&#xf…

尚硅谷电商数仓5.0(华为云服务器)主机初期基本配置

文章目录服务器配置信息&#xff1a;注意事项&#xff1a;1.购买注意事项&#xff1a;2.后期使用注意事项&#xff1a;三台主机的基本配置服务器配置信息&#xff1a; 使用了两个账号&#xff0c;账号1买了两个服务器&#xff0c;一台4核8G&#xff0c;一台2核4G&#xff0c;账…

hgame2023 WebMisc

文章目录Webweek1Classic Childhood GameBecome A MemberGuess Who I AmShow Me Your BeautyWeek2Git Leakagev2boardSearch CommodityDesignerweek3Login To Get My GiftPing To The HostGopher Shopweek4Shared DiaryTell MeMiscweek1Where am I神秘的海报week2Tetris Master…