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

react中受控组件与非受控组件

受控组件与非受控组件

受控组件:

其值由 React 控制的组件,通常使用 state 来控制和修改组件的值。

例如受控的 组件:

class NameForm extends React.Component {constructor(props) {super(props);this.state = {value: ''};}handleChange = (event) => {this.setState({value: event.target.value});  }render() {return (<input value={this.state.value} onChange={this.handleChange} />);}
}

输入的值通过状态state来控制,onChange 也会更新状态,所以组件受 React 的控制。

非受控组件:

其值未由 React 管理和控制的组件,通常使用 refs 来访问 DOM 元素获取值。

例如非受控的 :

class NameForm extends React.Component {constructor(props) {super(props);this.input = React.createRef();}handleSubmit = () => {const value = this.input.current.value;}render() {return (<inputtype="text"ref={this.input} />);}
}

输入的值未绑定到 state,需要手动通过 ref 读取,所以不是由 React 控制的。

ref的使用

在React中,ref被用来获取组件或者DOM元素的引用。常见的使用方式有以下几种:

  1. 创建ref

使用React.createRef()创建ref:

const myRef = React.createRef();
  1. 挂载ref到组件/元素

通过ref属性将ref挂载到组件/元素上:

<input ref={myRef} /><MyComponent ref={myRef} />
  1. 访问ref

通过ref的current属性访问到对应的组件或DOM元素:

const element = myRef.current;
element.focus(); // 对应的DOM元素

当ref挂载完成后,ref.current会指向对应的组件或DOM元素。

  1. 在类组件中的使用

在类组件中可以在构造函数中创建ref,并通过this访问:

class MyComponent extends React.Component {constructor(props) {super(props);this.myRef = React.createRef(); }render() {return <div ref={this.myRef} />;}componentDidMount() {const node = this.myRef.current;}  
}
  1. 在函数组件中使用

在函数组件中可以通过useRef钩子创建和访问:

function MyComponent() {const myRef = useRef();useEffect(() => {const node = myRef.current;}) return <div ref={myRef} />;
}

注意
在 React 中使用 ref 需要注意以下几点:

  1. 避免过度使用 ref

不要在组件中大面积使用 ref,组件应该越“无状态”越好。ref 主要适用于必须访问 DOM 元素的特殊场景。

  1. 不要在函数组件中暴露 ref

函数组件没有实例,它的 ref 会在每次渲染时发生变化,可能导致奇怪的 bug。

  1. ref 不会自动绑定

当组件重新渲染时,ref 不会自动变化,需要在组件加载和卸载时手动更新。

  1. 将 ref 传递给 DOM 元素时要注意泄露风险

如果组件被卸载但其 ref 仍在使用,会导致内存泄露。可以在组件卸载时手动将 ref 的 current 属性置为 null。

  1. 避免在渲染期间设置 ref

不要在函数组件主体或 class 组件 render 方法中设置 ref,这可能导致 ref 不一致。应在加载后才设置 ref。

  1. 将 ref 回调与 useEffect 配合使用。可以在 useEffect 中设置或重置 ref,以避免上述问题。

  2. 在严格模式下使用 ref 会抛出警告,需要用 React.forwardRef 处理。

相关文章:

react中受控组件与非受控组件

受控组件与非受控组件 受控组件: 其值由 React 控制的组件,通常使用 state 来控制和修改组件的值。 例如受控的 组件: class NameForm extends React.Component {constructor(props) {super(props);this.state {value: };}handleChange (event) > {this.setState({val…...

【网络教程】如何解决Docker删除镜像和容器后磁盘空间未释放的问题

文章目录 问题分析解决方案删除未使用的容器删除未使用的镜像删除未使用的数据卷调整Docker数据存储路径问题分析 当删除Docker镜像和容器后,磁盘空间并未释放,这可能导致磁盘空间不足。造成此问题的原因包括: Docker镜像和容器的删除策略:默认情况下,Docker不会立即删除…...

Python中的进度条显示方案

迷途小书童 读完需要 3分钟 速读仅需 1 分钟 大家好&#xff0c;我是迷途小书童! tqdm 是一个非常常用的 Python 进度条库&#xff0c;它可以在循环迭代和 IO 操作期间添加一个进度条&#xff0c;直观地显示循环迭代的进程。 tqdm 是在 2013 年发布的&#xff0c;目的是为 Pyth…...

2023-09-05力扣每日一题

链接&#xff1a; 2605. 从两个数字数组里生成最小数字 题意&#xff1a; 两个数组都只包含1-9的数字&#xff0c;求一个最小数&#xff0c;两个数组内都要有它的其中一位 解&#xff1a; 要么是个位数要么是十位数&#xff0c;存一下数量和两边的最小数即可 实际代码&am…...

ODC现已开源:与开发者共创企业级的数据库协同开发工具

OceanBase 开发者中心&#xff08;OceanBase Developer Center&#xff0c;以下简称 ODC&#xff09;是一款开源的数据库开发和数据库管理协同工具&#xff0c;从首个版本上线距今已经发展了三年有余&#xff0c;ODC 逐步由一款专为 OceanBase 打造的开发者工具演进成为支持多数…...

生成克隆钓鱼网站与对win7进行后渗透操作

目录 目录 前言 系列文章列表 思维导图 1&#xff0c;实验涉及复现环境 2&#xff0c;CS的介绍 2.1,CS的简介 2.2,CS的主要功能 3&#xff0c;CS的安装 3.1,将cobalt_strike_4.5文件夹放到kali中 3.1,放入过程中的注意事项 3.2,如图所示 4,配置工具 4.1,进入c…...

Ubuntu18中NVIDIA,cuda,cudnn,pytorch安装

注意&#xff1a;nvidia驱动和cuda,cudnn,pytroch,python的对应关系 linux安装pytorch&#xff08;包括cuda与cudnn&#xff09;_linux清华园按照pytorch1.12_BryceRui的博客-CSDN博客 安装流程&#xff1a;安装cuda&#xff08;包括nvidia驱动&#xff09; cudnn python安装…...

MATLAB中M文件编写

简介 所谓M文件就是将处理问题的各种命令融合到一个文件中&#xff0c;该文件以.m为扩展名。然后&#xff0c;由MATLAB系统编译M文件&#xff0c;得出相应的运行结果。M文件具有相当大的可开发性和扩展性。M文件有脚本文件和函数文件两种。脚本文件不需要输入参数&#xff0c;…...

企业数字化神经网络

随着数字化时代的到来&#xff0c;数据已经成为企业战略性资源和重要的生产要素。企业数字化转型的核心是充分开发和利用数据资源&#xff0c;以数据为驱动&#xff0c;对业务流程进行重构与创新&#xff0c;从而提升企业的核心竞争力。业务系统是企业数据资源的源头&#xff0…...

C++this指针

本文旨在讲解C中this关键字&#xff0c;以及其相关作用&#xff01; 定义 this 是 C 中的一个关键字&#xff0c;也是一个 const 指针&#xff0c;它指向当前对象&#xff0c;通过它可以访问当前对象的所有成员。 this的介绍 下面来看一下关于this这个关键字的实例&#xff0…...

【初阶C语言】操作符1--对二进制的操作

前言&#xff1a;本节内容介绍的操作符&#xff0c;操作的对象是二进制位。所以前面先介绍整数的二进制位 一、二进制位介绍 1.二进制介绍 &#xff08;1&#xff09;整数的二进制表示形式有三种&#xff1a;原码、反码和补码。 &#xff08;2&#xff09;原码、反码和补码的…...

安装pyscipopt

安装pyscipopt Conda会自动安装SCIP&#xff0c;因此所有内容都可以通过单个命令安装&#xff1a; GitHub - scipopt/PySCIPOpt: Python interface for the SCIP Optimization Suite conda create --name myenv python3.8 # 创建新环境 conda activate myenv # 激活新环境 …...

原生js实现的轮盘抽奖案例

来到大学也是有二年了&#xff0c;吃饭最多的地方就是在食堂&#xff0c;经过这么久的时间&#xff0c;已经几乎是把每个窗口的菜都吃腻了&#xff0c;所以我打算做个轮盘抽奖的形式来决定我每天要吃些什么。 目录 实现效果图&#xff1a; 静态搭建 js代码 1.实现此功能的思路…...

最经典的解析LSA数据库(第六课)

初步认识OSPF的大致内容(第三课)_IHOPEDREAM的博客-CSDN博客 1 OSPF 工作过程 建立领居表 同步数据库 今天来 说一说数据库概念 计算路由表 2 什么是数据库&#xff1f; 数据库是一个组织化的数据集合&#xff0c;用于存储、管理和检索数据。它是一个可访问的集合&#x…...

C++基础入门

文章目录 前言一、C历史及发展1.C是什么2.C历史 二、开始C1.基础类型1.第一个简单的C程序2.命名空间1.命名空间的介绍2.命名空间的使用3.命名空间的using声明与using指示 3.初识输入输出操作4.引用1.引用概念2.引用的使用1.引用做参数2.引用做返回值 3.引用和指针的区别4.const…...

【每日随笔】驾驭人性 ② ( 员工立场问题 | 立场转变 | 吴越同舟 | 老板如何与员工结成利益共同体 )

文章目录 一、员工立场问题二、立场转变三、吴越同舟四、老板如何与员工结成利益共同体 一、员工立场问题 人的潜力是很大的 , 肩上抗 100 斤 水泥 和 肩上抗 100 斤黄金 , 能一样吗 , 扛着黄金绝对能扛回家 ; 员工 不愿意 与公司一条心是正常的 , 员工 拿的是 死工资 , 公司赚…...

C++(QT)画图行车

通过鼠标在窗口上点击形成多个点的连线&#xff0c;绘制一辆汽车沿着绘制的连线轨迹前进。要求连线点数大于20.可以通过清除按钮清除已经绘制的连线&#xff0c;并可以重新绘制一条轨迹连线。当车辆行驶到轨迹终点时&#xff0c;自动停止。&#xff08;汽车实在可用方块代替&am…...

Unity中Shader抓取屏幕并实现扭曲效果(优化)

文章目录 前言一、在之前顶点着色器的输入中&#xff0c;放弃了使用结构体传入&#xff0c;而是直接从应用程序阶段传入参数&#xff0c;这样写的话&#xff0c;对于程序来说&#xff0c;不方便扩张&#xff0c;所以需要对其进行修改实现1、定义结构体用于传入顶点坐标系2、因为…...

肖sir__设计测试用例方法之_(白盒测试)

白盒测试技术 一、定义&#xff1a; 白盒测试也叫透明盒测试&#xff0c;检查程序内部结构及路径一是否符合规格说明&#xff0c;二是否符合其代码规范。 因此&#xff0c;也叫结构测试或者逻辑驱动测试。 二、白盒测试常见方法&#xff1a; a、语句覆盖&#xff1b; b、判断覆…...

GoT:用大语言模型解决复杂的问题

GoT&#xff1a;用大语言模型解决复杂的问题 摘要介绍背景和符号表示语言模型和上下文学习Input-Output&#xff08;IO&#xff09;Chain of thought&#xff08;CoT&#xff09;Multiple CoTTree of thoughts&#xff08;ToT&#xff09; GoT框架推理过程思维变换聚合变换&…...

【杂谈】-递归进化:人工智能的自我改进与监管挑战

递归进化&#xff1a;人工智能的自我改进与监管挑战 文章目录 递归进化&#xff1a;人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管&#xff1f;3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...

循环冗余码校验CRC码 算法步骤+详细实例计算

通信过程&#xff1a;&#xff08;白话解释&#xff09; 我们将原始待发送的消息称为 M M M&#xff0c;依据发送接收消息双方约定的生成多项式 G ( x ) G(x) G(x)&#xff08;意思就是 G &#xff08; x ) G&#xff08;x) G&#xff08;x) 是已知的&#xff09;&#xff0…...

安宝特方案丨XRSOP人员作业标准化管理平台:AR智慧点检验收套件

在选煤厂、化工厂、钢铁厂等过程生产型企业&#xff0c;其生产设备的运行效率和非计划停机对工业制造效益有较大影响。 随着企业自动化和智能化建设的推进&#xff0c;需提前预防假检、错检、漏检&#xff0c;推动智慧生产运维系统数据的流动和现场赋能应用。同时&#xff0c;…...

解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八

现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet&#xff0c;点击确认后如下提示 最终上报fail 解决方法 内核升级导致&#xff0c;需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...

江苏艾立泰跨国资源接力:废料变黄金的绿色供应链革命

在华东塑料包装行业面临限塑令深度调整的背景下&#xff0c;江苏艾立泰以一场跨国资源接力的创新实践&#xff0c;重新定义了绿色供应链的边界。 跨国回收网络&#xff1a;废料变黄金的全球棋局 艾立泰在欧洲、东南亚建立再生塑料回收点&#xff0c;将海外废弃包装箱通过标准…...

python爬虫:Newspaper3k 的详细使用(好用的新闻网站文章抓取和解析的Python库)

更多内容请见: 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...

unix/linux,sudo,其发展历程详细时间线、由来、历史背景

sudo 的诞生和演化,本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来,让我们拨开时间的迷雾,一同探寻 sudo 那波澜壮阔(也颇为实用主义)的发展历程。 历史背景:su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前,Unix 系统管理员和需要特权操作的…...

Java入门学习详细版(一)

大家好&#xff0c;Java 学习是一个系统学习的过程&#xff0c;核心原则就是“理论 实践 坚持”&#xff0c;并且需循序渐进&#xff0c;不可过于着急&#xff0c;本篇文章推出的这份详细入门学习资料将带大家从零基础开始&#xff0c;逐步掌握 Java 的核心概念和编程技能。 …...

什么?连接服务器也能可视化显示界面?:基于X11 Forwarding + CentOS + MobaXterm实战指南

文章目录 什么是X11?环境准备实战步骤1️⃣ 服务器端配置(CentOS)2️⃣ 客户端配置(MobaXterm)3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/55aefaea8a9f477e86d065227851fe3d.pn…...

JVM暂停(Stop-The-World,STW)的原因分类及对应排查方案

JVM暂停(Stop-The-World,STW)的完整原因分类及对应排查方案,结合JVM运行机制和常见故障场景整理而成: 一、GC相关暂停​​ 1. ​​安全点(Safepoint)阻塞​​ ​​现象​​:JVM暂停但无GC日志,日志显示No GCs detected。​​原因​​:JVM等待所有线程进入安全点(如…...