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

React第七节 组件三大属性之 refs 的用法注意事项

1、定义

React 中refs 是允许我们操作DOM 访问组件实例的一种方案。开发人员可以直接使用 refs 访问操作DOM,而不用自身的数据状态,这种方案在实际开发过程中是有必要的,但是不建议通篇使用refs操作DOM,如果是这样,那么我们应该考虑一下,自己设计的组件是否合理,React设计的原理是利用状态和数据驱动UI视图;

2、用途

a、我们想要保存一些数据,但是不想随时更新在视图中;
b、输入框自动聚焦、滚动到某个节点、视频自动播放、图表库(ecahrts)等

3、用法

创建 refs 的方法:
3.1、类式组件中:使用 React.createRefs()
3.2、函数式组件中的 使用 useRefs() Hook
3.3、回调函数形式 在函数式组件、类式组件中均可使用
3.4、字符串形式

a、类式组件通过createRef() 创建 【推荐】

通过createRef() 创建 ref实例,得到的ref实例中会有一个 current 属性,通过current 获取对应的数据;这种方式只适用于类式组件

export default class MyRefs extends Component{// 创建 refmyTextRef = React.createRef()getText = () => {console.log('===myTextRef==', this.myTextRef)// 获取 input 中的值console.log(this.myTextRef.current.value)// 获取焦点// this.myTextRef.current.focus()}render() {return(<><div><input type="text" ref={this.myTextRef}></input><button onClick={this.getText}>按钮</button></div></>)}
}

b、函数式组件通过 useRef() 创建 【推荐】

这种方式只适合在函数式组件中使用
通过 .current 获取相应的值

import { useRef } from 'react'export default function MyRefs() {// 使用 useRef  Hook 创建refconst myTextRef = useRef()const getText = () => {console.log('===myTextRef==', myTextRef)console.log(myTextRef.current.value)// 获取焦点// myTextRef.current.focus()// // 截取文本// console.log(myTextRef.current.value.substr(0, 5))}return (<div><input type="text" ref={myTextRef} /><button onClick={getText}>测试</button></div>)
}

c、回调函数的形式 创建 ref 【推荐】

这种创建的方式,在类式组件以及函数式组件中都可以使用
回调形式 通过 .value 获取相应的值

import { useRef, useEffect } from 'react'
export default function MyRefs() {let myRef2 = ''const setRef = (e) => {myRef2 = e}const getText2 = () => {console.log('===myRef2==', myRef2)console.log(myRef2.value)}return (<div><hr />{/* 第一种直接将回调写在 jsx 中 */}{/* <input type="text" ref={e => myRef2 = e} /> */}{/* 第二种 传入一个回调函数 setRef */}<input type="text" ref={setRef} /><button onClick={getText2}>测试myRef2</button></div>)
}

d、字符串形式 ref 【废弃不推荐

通过 this.refs.value 获取相应的值

export default class MyRefs extends Component{constructor() {super()this.state = {refSt: 'zifc'}}getText = () => {console.log('====', this.refs.zifc.value)}render() {return (<><div><input type="text" ref={this.state.refSt}></input><button onClick={this.getText}>按钮</button></div></>)}
}

4、注意事项:推荐使用函数式组件useRef() 创建 ref

4.1、ref 变化时候,不会自动更新视图;
4.2、不能在渲染期间 对 ref 进行读写 current 的值,否则报错;如果需要在渲染期间 进行读写,需要修改为 state 属性,使用 其 set 方法进行更新;
4.3、可以在渲染 过程之外 对 ref 的值进行修改;

相关文章:

React第七节 组件三大属性之 refs 的用法注意事项

1、定义 React 中refs 是允许我们操作DOM 访问组件实例的一种方案。开发人员可以直接使用 refs 访问操作DOM&#xff0c;而不用自身的数据状态&#xff0c;这种方案在实际开发过程中是有必要的&#xff0c;但是不建议通篇使用refs操作DOM&#xff0c;如果是这样&#xff0c;那…...

工程企业需要什么样的物资管理系统?为什么需要物资管理系统?

一、背景与意义 在工程项目的建设中&#xff0c;无论是高楼大厦的拔地而起&#xff0c;还是高速公路的绵延铺展&#xff0c;物资都是最基础的要素之一。从钢筋水泥到施工机械&#xff0c;任何一种物资的管理不善都可能导致项目延误、成本超支&#xff0c;甚至质量问题。然而&a…...

基于网页的大语言模型聊天机器人

代码功能 用户交互界面&#xff1a; 包括聊天历史显示区域和输入框&#xff0c;用户可以输入消息并发送。 消息发送和显示&#xff1a; 用户输入消息后点击“Send”按钮或按下回车键即可发送。 消息发送后显示在聊天记录中&#xff0c;并通过异步请求与后端 AI 模型通信&am…...

深入理解索引(一)

1.引言 在数据库和数据结构中&#xff0c;索引&#xff08;Index&#xff09;是一种用于提高数据检索速度的重要机制。本文将详细深入介绍索引。 2. 索引的分类 2.1 B - 树索引&#xff08;B - Tree Index&#xff09; 2.1.1 结构细节 树状结构&#xff1a;B - 树索引是一…...

动态规划子数组系列一>最长湍流子数组

1.题目&#xff1a; 解析&#xff1a; 代码&#xff1a; public int maxTurbulenceSize(int[] arr) {int n arr.length;int[] f new int[n];int[] g new int[n];for(int i 0; i < n; i)f[i] g[i] 1;int ret 1;for(int i 1; i < n-1; i,m. l.kmddsfsdafsd){int…...

MATLAB矩阵元素的修改及删除

利用等号赋值来进行修改 A ( m , n ) c A(m,n)c A(m,n)c将将矩阵第 m m m行第 n n n列的元素改为 c c c&#xff0c;如果 m m m或 n n n超出原来的行或列&#xff0c;则会自动补充行或列&#xff0c;目标元素改为要求的&#xff0c;其余为 0 0 0 A ( m ) c A(m)c A(m)c将索引…...

对 TypeScript 中函数如何更好的理解及使用?与 JavaScript 函数有哪些区别?

TypeScript 中函数的理解 在 TypeScript 中&#xff0c;函数本质上与 JavaScript 中的函数类似&#xff0c;但是它增强了类型系统的支持&#xff0c;使得我们可以对函数的参数和返回值进行更严格的类型检查。这样可以有效减少类型错误&#xff0c;提高代码的可维护性和可读性。…...

ubuntu搭建k8s环境详细教程

在Ubuntu上搭建Kubernetes&#xff08;K8s&#xff09;环境可以通过多种方式实现&#xff0c;下面是一个详细的教程&#xff0c;使用kubeadm工具来搭建Kubernetes集群。这个教程将涵盖从准备工作到安装和配置Kubernetes的所有步骤。 环境准备 操作系统&#xff1a;确保你使用的…...

ubuntu安装Eclipse

版本 ubuntu16.04 64bitEclipse 2019-12 &#xff08;太高容易崩溃&#xff09;下载&#xff1a;wget https://archive.eclipse.org/technology/epp/downloads/release/2019-12/R/eclipse-java-2019-12-R-linux-gtk-x86_64.tar.gzjdk安装 将jdk1.8.0_211-linux-x64.tar.gz解压到…...

C#里怎么样使用线程暂停?

C#里怎么样使用线程暂停? 如果一个线程没有任务在处理,并且又不进行暂停, 这时候,这个线程就会把当前这个CPU占满,即是所谓的死循环。 因此我们设计线程时,一定要知道线程在什么时候没有工作处理时, 就需要进入等待状态,不能再进行下去,否则会导致死循环, 只是耗费…...

畅听FM 3.0.0 | 很有果味的电台软件,超多FM电台,支持播放本地音乐

畅听FM是一款简洁且富有设计感的电台软件&#xff0c;支持收听超多FM电台&#xff0c;还支持播放本地音乐&#xff0c;甚至可以用网址创建音乐源。3.0新版本主要改进了对Android 4.x系统的支持&#xff0c;使得老旧电视和车机也能安装使用&#xff0c;并且新增了横屏显示功能&a…...

力扣面试经典 150(上)

文章目录 数组/字符串1. 合并两个有序数组2. 移除元素3. 删除有序数组中的重复项4. 删除有序数组的重复项II5. 多数元素6. 轮转数组7. 买卖股票的最佳时机8. 买卖股票的最佳时机II9. 跳跃游戏10. 跳跃游戏II11. H 指数12. O(1)时间插入、删除和获取随机元素13. 除自身以外数组的…...

鸿蒙开发-音视频

Media Kit 特点 一般场合的音视频处理&#xff0c;可以直接使用系统集成的Video组件&#xff0c;不过外观和功能自定义程度低Media kit&#xff1a;轻量媒体引擎&#xff0c;系统资源占用低支持音视频播放/录制&#xff0c;pipeline灵活拼装&#xff0c;插件化扩展source/demu…...

第一个autogen与docker项目

前提条件&#xff1a;在windows上安装docker 代码如下&#xff1a; import os import autogen from autogen import AssistantAgent, UserProxyAgentllm_config {"config_list": [{"model": "GLM-4-Plus","api_key": "your api…...

第三十四篇 MobileNetV1、V2、V3模型解析

摘要 这篇文章将 MobileNetV1、V2、V3汇在一起,解析移动端网络的结构。MobileNet系列的模型是非常经典的模型,值得深入研究一番。 MobileNetV1、V2、V3是MobileNet系列的三个重要版本,它们均针对移动和嵌入式设备进行了优化,具有轻量化、高效能的特点。以下是这三个模型的…...

Python学习——字符串操作方法

mystr “hello word goodbye” str “bye” Find函数&#xff1a;检测一个字符串中是否包含另一个字符串,找到了返回索引值&#xff0c;找不到了返回-1 print(mystr.find(str,0,len(mystr))) print(mystr.find(str,0,13)) index函数&#xff1a;检测一个字符串是否包含另一…...

力扣—15.三数之和

15. 三数之和 给你一个整数数组 nums &#xff0c;判断是否存在三元组 [nums[i], nums[j], nums[k]] 满足 i ! j、i ! k 且 j ! k &#xff0c;同时还满足 nums[i] nums[j] nums[k] 0 。请你返回所有和为 0 且不重复的三元组。 注意&#xff1a;答案中不可以包含重复的三元…...

容器安全检测和渗透测试工具

《Java代码审计》http://mp.weixin.qq.com/s?__bizMzkwNjY1Mzc0Nw&mid2247484219&idx1&sn73564e316a4c9794019f15dd6b3ba9f6&chksmc0e47a67f793f371e9f6a4fbc06e7929cb1480b7320fae34c32563307df3a28aca49d1a4addd&scene21#wechat_redirect Docker-bench-…...

sqlite3自动删除数据的两种设置方式记录

文章概要 〇、背景一、基本思路1.1 按时间分多文件,限制文件的个数1.2 按时间分数据表,限制表的个数1.3 按记录的时间删除超过规定时间数据,限制记录数据的时间1.4 按记录的数据条数删除多余的数据,限制记录数据的个数二、实现代码三、测试方式〇、背景 基于嵌入式编程,在…...

Hive分桶超详细!!!

1、分桶的意义 数据分区可能导致有些分区,数据过多&#xff0c;有些分区,数据极少。分桶是将数据集分解为若干部分(数据文件)的另一种技术。 分区和分桶其实都是对数据更细粒度的管理。当单个分区或者表中的数据越来越大&#xff0c;分区不能细粒度的划分数据时&#xff0c;我…...

《从零掌握MIPI CSI-2: 协议精解与FPGA摄像头开发实战》-- CSI-2 协议详细解析 (一)

CSI-2 协议详细解析 (一&#xff09; 1. CSI-2层定义&#xff08;CSI-2 Layer Definitions&#xff09; 分层结构 &#xff1a;CSI-2协议分为6层&#xff1a; 物理层&#xff08;PHY Layer&#xff09; &#xff1a; 定义电气特性、时钟机制和传输介质&#xff08;导线&#…...

新能源汽车智慧充电桩管理方案:新能源充电桩散热问题及消防安全监管方案

随着新能源汽车的快速普及&#xff0c;充电桩作为核心配套设施&#xff0c;其安全性与可靠性备受关注。然而&#xff0c;在高温、高负荷运行环境下&#xff0c;充电桩的散热问题与消防安全隐患日益凸显&#xff0c;成为制约行业发展的关键瓶颈。 如何通过智慧化管理手段优化散…...

css的定位(position)详解:相对定位 绝对定位 固定定位

在 CSS 中&#xff0c;元素的定位通过 position 属性控制&#xff0c;共有 5 种定位模式&#xff1a;static&#xff08;静态定位&#xff09;、relative&#xff08;相对定位&#xff09;、absolute&#xff08;绝对定位&#xff09;、fixed&#xff08;固定定位&#xff09;和…...

Map相关知识

数据结构 二叉树 二叉树&#xff0c;顾名思义&#xff0c;每个节点最多有两个“叉”&#xff0c;也就是两个子节点&#xff0c;分别是左子 节点和右子节点。不过&#xff0c;二叉树并不要求每个节点都有两个子节点&#xff0c;有的节点只 有左子节点&#xff0c;有的节点只有…...

Element Plus 表单(el-form)中关于正整数输入的校验规则

目录 1 单个正整数输入1.1 模板1.2 校验规则 2 两个正整数输入&#xff08;联动&#xff09;2.1 模板2.2 校验规则2.3 CSS 1 单个正整数输入 1.1 模板 <el-formref"formRef":model"formData":rules"formRules"label-width"150px"…...

Linux --进程控制

本文从以下五个方面来初步认识进程控制&#xff1a; 目录 进程创建 进程终止 进程等待 进程替换 模拟实现一个微型shell 进程创建 在Linux系统中我们可以在一个进程使用系统调用fork()来创建子进程&#xff0c;创建出来的进程就是子进程&#xff0c;原来的进程为父进程。…...

大语言模型(LLM)中的KV缓存压缩与动态稀疏注意力机制设计

随着大语言模型&#xff08;LLM&#xff09;参数规模的增长&#xff0c;推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长&#xff0c;而KV缓存的内存消耗可能高达数十GB&#xff08;例如Llama2-7B处理100K token时需50GB内存&a…...

CRMEB 中 PHP 短信扩展开发:涵盖一号通、阿里云、腾讯云、创蓝

目前已有一号通短信、阿里云短信、腾讯云短信扩展 扩展入口文件 文件目录 crmeb\services\sms\Sms.php 默认驱动类型为&#xff1a;一号通 namespace crmeb\services\sms;use crmeb\basic\BaseManager; use crmeb\services\AccessTokenServeService; use crmeb\services\sms\…...

C++ 设计模式 《小明的奶茶加料风波》

&#x1f468;‍&#x1f393; 模式名称&#xff1a;装饰器模式&#xff08;Decorator Pattern&#xff09; &#x1f466; 小明最近上线了校园奶茶配送功能&#xff0c;业务火爆&#xff0c;大家都在加料&#xff1a; 有的同学要加波霸 &#x1f7e4;&#xff0c;有的要加椰果…...

Chrome 浏览器前端与客户端双向通信实战

Chrome 前端&#xff08;即页面 JS / Web UI&#xff09;与客户端&#xff08;C 后端&#xff09;的交互机制&#xff0c;是 Chromium 架构中非常核心的一环。下面我将按常见场景&#xff0c;从通道、流程、技术栈几个角度做一套完整的分析&#xff0c;特别适合你这种在分析和改…...