当前位置: 首页 > 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;那…...

全文单词统计

目标&#xff1a;统计词频 import scala.io.Source //知识点 //1.字符串.split("分隔符")&#xff1a;把字符串用指定的分隔符。拆分成多份&#xff0c;保存在数组中 object test1 {def main(args: Array[String]): Unit { //从文件1.txt中读入内容val contentSourc…...

Angular v19 (二):响应式当红实现signal的详细介绍:它擅长做什么、不能做什么?以及与vue、svelte、react等框架的响应式实现对比

本文紧接着Angular v19 新版本来啦&#xff0c;一起瞧瞧新特性吧&#xff01;&#xff0c;主要针对它在v18引入了一项全新的响应式技术——Signal&#xff0c;这引起了开发者社区的广泛关注&#xff0c;最新的v19版本推出了更多的signal工具。Signal的加入旨在优化Angular的响应…...

【数据结构】二叉搜索树(二叉排序树)

&#x1f31f;&#x1f31f;作者主页&#xff1a;ephemerals__ &#x1f31f;&#x1f31f;所属专栏&#xff1a;数据结构 目录 前言 一、什么是二叉搜索树 二、二叉搜索树的实现 节点 属性和接口的声明 插入 查找 删除 拷贝构造 析构 中序遍历 三、二叉搜索树的…...

文件的摘要算法(md5、sm3、sha256、crc)

为了校验文件在传输中保证完整性和准确性&#xff0c;因此需要发送方先对源文件产生一个校验码&#xff0c;并将该值传输给接收方&#xff0c;将附件通过ftph或http方式传输后&#xff0c;由接收方使用相同的算法对接收文件再获取一个新的校验码&#xff0c;将该值和发送方传的…...

Python实现人生重开模拟器

目录 人生重开模拟器介绍 代码实现 打印初始界面 设置初始属性 设置角色性别 设置角色出生点 针对每一岁&#xff0c;生成人生经历 完整代码 人生重开模拟器介绍 人生重开模拟器 是之前比较火的一个小游戏&#xff0c;我们这里使用 Python 实现一个简化版的 人生重开模…...

机器学习(二十五):决策树算法以及决策树和神经网络的对比

一、决策树集合 单一决策树会对训练数据的变化很敏感。例子&#xff1a;输入十个数据&#xff0c;判断是否是猫。只替换其中一个数据&#xff0c;信息增益最高的分裂特征就发生了改变&#xff0c;决策树就发生了变化。 使用决策树集合可以使算法更加健壮。例子&#xff1a;使用…...

k8s运行运行pod报错超出文件描述符表限制

1.问题描述 运行pod超过文件描述符表 unable to allocate file descriptor table - out of memory/opt/COMMAND.sh: line 9: 2.查看设备的文件描述符限制 操作前一定要先查询这个值&#xff0c;2097152这个值即为我们可设置的最大值&#xff0c;超过这个值后将无法登录&am…...

非常简单实用的前后端分离项目-仓库管理系统(Springboot+Vue)part 2

七、创建前端项目 你下载了nodejs吗&#xff1f;从cn官网下载&#xff1a;http://nodejs.cn/download/&#xff0c;或者从一个国外org网站下载&#xff0c;选择自己想要的版本https://nodejs.org/download/release/&#xff0c;双击下载好的安装文件&#xff0c;选择安装路径安…...

开源 AI 智能名片 2 + 1 链动模式 S2B2C 商城小程序源码助力品牌共建:价值、策略与实践

摘要&#xff1a;在当今数字化商业环境下&#xff0c;品牌构建已演变为企业与消费者深度共建的过程。本文聚焦于“开源 AI 智能名片 2 1 链动模式 S2B2C 商城小程序源码”&#xff0c;探讨其如何融入品牌建设&#xff0c;通过剖析品牌价值构成&#xff0c;阐述该技术工具在助力…...

微信小程序中的WXSS与CSS的关系及使用技巧

微信小程序中的WXSS与CSS的关系及使用技巧 引言 在微信小程序的开发中,样式的设计与实现是构建用户友好界面的关键。微信小程序使用WXSS(WeiXin Style Sheets)作为其样式表语言,WXSS在语法上与CSS非常相似,但也有一些独特的特性。本文将深入探讨WXSS与CSS的关系,介绍WX…...

STM32的CAN波特率计算

公式&#xff1a; CAN波特率 APB总线频率 / &#xff08;BRP分频器 1&#xff09;/ (SWJ BS1 BS2) SWJ一般为1。 例如STM32F407的&#xff0c;CAN1和CAN2都在在APB1下&#xff0c;频率是42000000 如果想配置成1M波特率&#xff0c;则计算公式为&#xff1a;...

【LeetCode面试150】——57插入区间

博客昵称&#xff1a;沈小农学编程 作者简介&#xff1a;一名在读硕士&#xff0c;定期更新相关算法面试题&#xff0c;欢迎关注小弟&#xff01; PS&#xff1a;哈喽&#xff01;各位CSDN的uu们&#xff0c;我是你的小弟沈小农&#xff0c;希望我的文章能帮助到你。欢迎大家在…...

活着就好20241128

早晨问候&#xff1a; 亲爱的朋友们&#xff0c;大家早上好&#xff01;今天是2024年11月28日&#xff0c;第48周的第四天&#xff0c;也是十一月的第二十八天&#xff0c;农历甲辰[龙]年十月廿四。在这个即将步入月末、阳光依旧明媚的清晨&#xff0c;愿第一缕阳光轻轻洒落在…...

【kafka03】消息队列与微服务之Kafka 读写数据

Kafka 读写数据 参考文档 Apache Kafka 常见命令 kafka-topics.sh #消息的管理命令 kafka-console-producer.sh #生产者的模拟命令 kafka-console-consumer.sh #消费者的模拟命令 创建 Topic 创建topic名为 chen&#xff0c;partitions(分区)为3&#xff0…...

【Agorversev1.1数据转换】Agorverse高清地图转OpenStreetMap及SUMO路网

文章目录 Agorverse高清地图转OpenStreetMap及SUMO路网1. Agorverse osm转换说明2. 转换源码3. 处理效果4. SUMO-Carla联合仿真 Agorverse高清地图转OpenStreetMap及SUMO路网 1. Agorverse osm转换说明 根据作者的描述&#xff0c;其高清地图的osm文件与标准osm的区别在于以下…...

Vue 3 实现高性能拖拽指令的最佳实践

前言 在现代前端开发中&#xff0c;拖拽功能是增强用户体验的重要手段之一。本文将详细介绍如何在 Vue 3 中封装一个拖拽指令&#xff08;v-draggable&#xff09;&#xff0c;并通过实战例子演示其实现过程。通过这篇教程&#xff0c;您将不仅掌握基础的拖拽功能&#xff0c;…...

AIGC--------AIGC在医疗健康领域的潜力

AIGC在医疗健康领域的潜力 引言 AIGC&#xff08;Artificial Intelligence Generated Content&#xff0c;人工智能生成内容&#xff09;是一种通过深度学习和自然语言处理&#xff08;NLP&#xff09;等技术生成内容的方式。近年来&#xff0c;AIGC在医疗健康领域展现出了极…...

Apache Calcite - calcite jdbc驱动使用场景

前言 在使用Calcite查询数据时通常会用到这些代码获取schema Connection connection DriverManager.getConnection("jdbc:calcite:", info); CalciteConnection calciteConnection connection.unwrap(CalciteConnection.class); SchemaPlus rootSchema calciteC…...

IEC61850实现方案和测试-4-MMS协议

IEC61850实现方案和测试-4作为介绍实现方案和测试的第四篇文章&#xff0c;后续会继续更新&#xff0c;欢迎关注。前三篇如下 第一篇是&#xff1a;IEC61850实现方案和测试-1-CSDN博客 第二篇是&#xff1a;IEC61850实现方案和测试-2-UCA-CSDN博客 第三篇是&#xff1a;IEC6…...

【ubuntu24.04】GTX4700 配置安装cuda

筛选显卡驱动显卡驱动 NVIDIA-Linux-x86_64-550.135.run 而后重启:最新的是12.6 用于ubuntu24.04 ,但是我的4700的显卡驱动要求12.4 cuda...

时间的礼物:如何珍视每一刻

《时间的礼物&#xff1a;如何珍视每一刻》 夫时间者&#xff0c;宇宙之精髓&#xff0c;生命之经纬&#xff0c;悄无声息而流转不息&#xff0c;如织锦之细线&#xff0c;串联古今&#xff0c;贯穿万物。 人生短暂&#xff0c;犹如白驹过隙&#xff0c;倏忽而逝&#xff0c;…...

componentReceivePropsreact class生命周期

componentReceiveProps并不是有props的变化触发&#xff0c;而是由父组件的更新触发的 父组件导致组件重新渲染&#xff0c;即使props没有更改&#xff0c;也会调用componentReceiveProps这个方法&#xff1b;如果只想处理更改&#xff0c;确保当前值与变更值比较--官方 …...

快速理解微服务中Sentinel怎么实现限流

Sentinel是通过动态管理限流规则&#xff0c;根据定义的规则对请求进行限流控制。 一.实现步骤 1.定义资源&#xff1a;在Sentinel中&#xff0c;资源可以是URL、方法等&#xff0c;用于标识需要进行限流的请求&#xff1b;(在Sentinel中&#xff0c;需要我们去告诉Sentinel哪些…...

25.100ASK_T113-PRO 测试摄像头(型号)

1.摄像头 USB2.0 摄像头,支持 UVC协议, 就是V4L2 USB2.0 大概可这样理解吧.这个是2K分辨率. 2.8mm焦距. 开发板还是 100ASK_T113-PRO V1.2版 2.查看摄像头驱动挂载情况 这样接好. 看看设备有没有挂载上 # ls /dev/video* /dev/video0 /dev/video1 这两个就是USB摄像头.说…...

20241127 给typecho文章编辑附件 添加视频 图片预览

Typecho在写文章时&#xff0c;如果一次性上传太多张图片可能分不清哪张&#xff0c;因为附件没有略缩图&#xff0c;无法实时阅览图片&#xff0c;给文章插入图片时很不方便。 编辑admin/file-upload.php 大约十八行的位置 一个while 循环里面,这是在进行html元素更新操作,在合…...

StarRocks-join优化

1、背景 有两个大表&#xff0c;都是6kw级别上下的&#xff0c;通过SR然后包装了一个接口对外提供查询&#xff0c;当前的问题是&#xff0c;这样大的join查询会导致BE直接宕机。并且这个sql很有代表性&#xff0c;我截图如下&#xff1a; 这个表是个单分区&#xff0c;所以直接…...

如何通过ChatGPT提高自己的编程水平

在编程学习的过程中&#xff0c;开发者往往会遇到各种各样的技术难题和学习瓶颈。传统的学习方法依赖书籍、教程、视频等&#xff0c;但随着技术的不断发展&#xff0c;AI助手的崛起为编程学习带来了全新的机遇。ChatGPT&#xff0c;作为一种强大的自然语言处理工具&#xff0c…...

实时数据开发 | checkpoints监控和调优

监控Checkpoints 监控 checkpoint 行为最简单的方法是通过 UI 的 checkpoint 部分。 监控这两个指标: 算子收到第一个 checkpoint barrier 的时间。当触发 checkpoint 的耗费时间一直很高时&#xff0c;这意味着 checkpoint barrier 需要很长时间才能从 source 到达 operator…...

面试手撕题积累

1、实现滑动窗口限流&#xff0c;允许每分钟最多有100个请求 阿里一面题。 核心&#xff1a; 时间窗口管理&#xff1a;滑动窗口会根据时间流逝不断更新&#xff0c;需要记录请求的时间戳&#xff0c;并根据当前时间计算窗口内的请求数量。 限流判断&#xff1a;每次请求到来…...

开发中使用UML的流程_05 PIM-1:分析系统流程

目录 1、概述 2、PIM生成的过程 3、用例叙述格式 4、用例关系 5、执行流程&#xff1a; 6、惯用的编号方式 1、概述 在进入到PIM阶段之后&#xff0c;系统分析员将所有系统用例依相关性分成若干组&#xff0c;以组别方式生成该组系统用例涉及的PIM-1---PIM-4产生结果&am…...

【Go】-go中的锁机制

目录 一、锁的基础知识 1. 互斥量/互斥锁 2. CAS&#xff08;compare and swap&#xff09; 3. 自旋锁 4. 读写锁 5. 乐观锁 & 悲观锁 6. 死锁 二、go中锁机制 1. Mutex-互斥锁 2. RWMutex-读写锁 2.1 RWMutex流程概览 2.2 写锁饥饿问题 2.3. golang的读写锁源…...

Scala学习记录,全文单词统计

package test32 import java.io.PrintWriter import scala.io.Source //知识点 // 字符串.split("分隔符"&#xff1a;把字符串用指定的分隔符&#xff0c;拆分成多个部分&#xff0c;保存在数组中) object test {def main(args: Array[String]): Unit {//从文件1.t…...

重构项目架构

前言 我们上篇文章对整个项目进行一个整体的规划&#xff0c;其中对于APP类规划了类&#xff0c;本篇文章我们就来实现这个规划&#xff1b; class App {//加载页面constructor() {}//获取位置_getPosition() {}//接受位置_loadMap() {}//在地图上点击展现表单_showForm() {}/…...

一个开源轻量级的服务器资源监控平台,支持告警推送

大家好&#xff0c;今天给大家分享一款开源的轻量级服务器资源监控工具Beszel&#xff0c;提供历史数据记录、Docker容器统计信息监控以及多种警报功能&#xff0c;用于监控服务器资源。 项目介绍 Beszel由hub&#xff08;中心服务器端应用&#xff0c;基于PocketBase构建&…...

介绍一下atof(arr);(c基础)

hi , I am 36 适合对象c语言初学者 atof(arr)&#xff1b;是返回浮点数(double型)&#xff0c;浮点数数是arr数组中字符中数字 格式 #include<stdio.h> atof(arr); 返回值arr数组中的数 未改变arr数组 #include<stdio.h> //atof(arr) 返 <stdlib> int…...

基于微信小程序的平价药房管理系统+LW参考示例

1.项目介绍 系统角色&#xff1a;管理员、医生、普通用户功能模块&#xff1a;用户管理、医生管理、药品分类管理、药品信息管理、在线问诊管理、生活常识管理、日常提醒管理、过期处理、订单管理等技术选型&#xff1a;SpringBoot&#xff0c;Vue&#xff0c;uniapp等测试环境…...

什么是 C++ 中的函数对象?它有什么特点?如何定义和使用函数对象?数对象与普通函数有什么区别?

在 C 中&#xff0c;函数对象&#xff08;Function Object&#xff09;也被称为仿函数&#xff08;Functor&#xff09;&#xff0c;是一种可以像函数一样被调用的对象&#xff0c;是一个类的对象&#xff0c;该类重载了函数调用运算符operator()。 函数对象的特点: 与普通函数…...

JAVA篇05 —— 内部类(Local、Anonymous、Member、Static)

欢迎来到我的主页&#xff1a;【一只认真写代码的程序猿】 本篇文章收录于专栏【小小爪哇】 如果这篇文章对你有帮助&#xff0c;希望点赞收藏加关注啦~ 目录 1 内部类Inner Class 1.1 局部内部类 1.2 匿名内部类&#xff08;※※&#xff09; 1.3 匿名类最佳实践&#xf…...

vmware安装ubuntu22.04 复制黏贴 上网

1、ubuntu下载 [Download - 清华镜像站]&#xff1a; 点击 清华大学开源软件镜像站 - Ubuntu 22.04.4 下载 页面中的 ubuntu-22.04.4-desktop-amd64.iso清华大学开源软件镜像站 - Ubuntu 22.04.4 下载 2、安装向导 3、网络设置 sudo netplan try sudo netplan apply4、复制…...

Spring Bean初始化流程

首先&#xff1a; 加载Bean定义(Configuration) 然后对于每个Bean&#xff1a; 1、实例化Bean&#xff08;应该是从Bean方法中获取&#xff0c;Bean方法里面包含new这个类型的代码&#xff09;2、依赖注入&#xff08;所依赖的Bean要经历相同的流程&#xff09;、调用Setter…...

C 语言函数递归探秘:从基础概念到复杂问题求解的进阶之路

我的个人主页 我的专栏&#xff1a;C语言&#xff0c;希望能帮助到大家&#xff01;&#xff01;&#xff01;点赞❤ 收藏❤ 目录 什么是函数递归递归的基本组成递归的工作原理递归的优缺点递归的经典案例 5.1 阶乘计算5.2 斐波那契数列5.3 汉诺塔问题5.4 二分查找 递归的高级…...

【Zookeeper】三,Zookeeper的安装与基本操作

文章目录 安装Zookeeper下载解压解压后的目录结构运行Zookeeper 基本操作 安装Zookeeper 下载 官网下载Zookeeper&#xff0c;会得到一个tar包&#xff0c;如&#xff1a;apache-zookeeper-3.8.4-bin.tar.gz 解压 tar -xvf apache-zookeeper-3.8.4-bin.tar.gz -C /usr/loca…...

STL算法之数值算法<stl_numeric.h>

这一节介绍的算法&#xff0c;统称为数值(numeric)算法。STL规定&#xff0c;欲使用它们&#xff0c;客户端必须包含头文件<numeric>.SGI将它们实现与<stl_numeric.h>文件中。 目录 运用实例 accumulate adjacent_difference inner_product partial_sum pow…...

Git 入门超简单指南

1. 什么是 Git&#xff1f; Git 是一个分布式版本控制系统&#xff0c;由 Linus Torvalds 于 2005 年创建。它的主要目的是帮助开发者有效地管理和跟踪项目的历史版本。通过使用 Git&#xff0c;你可以轻松地记录每一次代码的修改&#xff0c;回滚到以前的版本&#xff0c;以及…...

UE5 和 UE4 中常用的控制台命令总结

调用控制台 按下键盘上的 ~ 键可以调用控制台命令。 技巧 使用键盘的 ↑ 键可以查看之前输入过的指令。控制台指令并不需要打全名&#xff0c;输入空格后跟随指令的部分字符可以进行模糊搜索。按下 Ctrl Shift , 打开 GPUProfile 面板。 命令如下&#xff1a; 调试类 s…...

[护网杯 2018]easy_tornado

这里有一个hint点进去看看&#xff0c;他说md5(cookie_secretmd5(filename))&#xff0c;所以我们需要获得cookie_secret的value 根据题目tornado,它可能是tornado的SSTI 这里吧filehash改为NULL. 是tornado的SSTI 输入{{handler.settings}} (settings 属性是一个字典&am…...

论 ONLYOFFICE:开源办公套件的深度探索

公主请阅 引言第一部分&#xff1a;ONLYOFFICE 的历史背景1.1 开源软件的崛起1.2 ONLYOFFICE 的发展历程 第二部分&#xff1a;ONLYOFFICE 的核心功能2.1 文档处理2.2 电子表格2.3 演示文稿 第三部分&#xff1a;技术架构与兼容性3.1 技术架构3.2 兼容性 第四部分&#xff1a;部…...

华为OD机试真题---幼儿园篮球游戏

华为OD机试真题中的“幼儿园篮球游戏”是一道有趣的逻辑模拟题。以下是该题目的详细描述及解题思路&#xff1a; 题目描述 幼儿园里有一个放倒的圆桶&#xff0c;它是一个线性结构。允许在桶的右边将篮球放入&#xff0c;可以在桶的左边和右边将篮球取出。每个篮球有单独的编…...

C#基础控制台程序

11.有一个54的矩阵&#xff0c;要求编程序求出其中值最大的那个元素的值&#xff0c;以及其所在的行号和列号。 12.从键盘输入一行字符&#xff0c;统计其中有多少个单词&#xff0c;单词之间用空格分隔开。 13.输入一个数&#xff0c;判断它是奇数还是偶数&#xff0c;如果…...