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

说说对React refs 的理解？应用场景？

news 2026/5/15 20:53:20

先了解，是什么？

React 中的 Refs提供了一种方式，允许我们访问 DOM节点或在 render方法中创建的 React元素。
本质为ReactDOM.render()返回的组件实例，如果是渲染组件则返回的是组件实例，如果渲染dom则返回的是具体的dom节点。

如何去使用？

传入字符串，使用时通过 this.refs.传入的字符串的格式获取对应的元素
传入对象，对象是通过 React.createRef() 方式创建出来，使用时获取到创建的对象中存在 current 属性就是对应的元素
传入函数，该函数会在 DOM 被挂载时进行回调，这个函数会传入一个 元素对象，可以自己保存，使用时，直接拿到之前保存的元素对象即可
传入hook，hook是通过 useRef() 方式创建，使用时通过生成hook对象的 current 属性就是对应的元素

使用场景

在某些情况下，我们会通过使用refs来更新组件，但这种方式并不推荐，过多使用refs，会使组件的实例或者是DOM结构暴露，违反组件封装的原则；

但下面的场景使用refs非常有用：

对Dom元素的焦点控制、内容选择、控制
对Dom元素的内容设置及媒体播放
对Dom元素的操作和对组件实例的操作
集成第三方 DOM 库
 

相关文章：

说说对React refs 的理解？应用场景？

先了解，是什么？ React 中的 Refs提供了一种方式，允许我们访问 DOM节点或在 render方法中创建的 React元素。 本质为ReactDOM.render()返回的组件实例，如果是渲染组件则返回的是组件实例，如果渲染dom则返回的是具体的do…...

编程日记 2023/12/25 0:52:55

Pytorch 读取t7文件

Pytorch 1.0以上可以使用： import torchfileth_path r"./path/xx.t7" data torchfile.load(th_path)print(data.shape)若data的尺寸为0，则将torch版本降为0.4.1，并使用以下函数： from torch.utils.serialization im…...

编程日记 2023/12/25 0:48:52

【YOLOV8预测篇】使用Ultralytics YOLO进行检测、分割、姿态估计和分类实践

目录 一 安装Ultralytics 二 使用预训练的YOLOv8n检测模型 三 使用预训练的YOLOv8n-seg分割模型 四 使用预训练的YOLOv8n-pose姿态模型 五 使用预训练的YOLOv8n-cls分类模型 <...

编程日记 2023/12/25 0:45:50

[Linux] MySQL数据库之索引

一、索引的相关知识 1.1 索引的简介 索引是一个排序列表&#xff0c;包含索引值和包含该值的数据行的物理地址&#xff08;类似于 c 语言链表&#xff0c;通过指针指向数据记录的内存地址&#xff09;。 使用索引后可以不用扫描全表来定位某行的数据&#xff0c;而是先通过索…...

编程日记 2023/12/25 0:41:47

【期末考试】计算机网络、网络及其计算 考试重点

个人简介&#xff1a;Java领域新星创作者&#xff1b;阿里云技术博主、星级博主、专家博主&#xff1b;正在Java学习的路上摸爬滚打&#xff0c;记录学习的过程~ 个人主页&#xff1a;.29.的博客 学习社区&#xff1a;进去逛一逛~ 计算机网络及其计算 期末考点 &#x1f680;数…...

编程日记 2023/12/25 0:36:43

力扣labuladong——一刷day79

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、力扣785. 判断二分图二、力扣886. 可能的二分法 前言 给你一幅「图」&#xff0c;请你用两种颜色将图中的所有顶点着色&#xff0c;且使得任意一条边的两个…...

编程日记 2023/12/25 0:35:42

【数据结构入门精讲 | 第十篇】考研408排序算法专项练习（二）

在上文中我们进行了排序算法的判断题、选择题的专项练习&#xff0c;在这一篇中我们将进行排序算法中编程题的练习。 目录 编程题R7-1 字符串的冒泡排序R7-1 抢红包R7-1 PAT排名汇总R7-2 统计工龄R7-1 插入排序还是堆排序R7-2 龙龙送外卖R7-3 家谱处理 编程题 R7-1 字符串的冒…...

编程日记 2023/12/25 0:34:41

【ES实战】Elasticsearch6开始的CCR

【ES实战】学习使用Elasticsearch6开始的CCR 本文涉及官网文章地址 OverviewRequirements for leader indicesAutomatically following indicesGetting started with cross-cluster replicationUpgrading clusters CCR > Cross-cluster replication 文章目录 【ES实战】学…...

编程日记 2023/12/25 0:32:39

Deployment Pay

axure watermark...

编程日记 2023/12/25 0:30:38

MySQL创建member表失败

最近在做一个项目&#xff0c;在台式机上可以跑通&#xff0c;也测试了各个已完成的接口&#xff0c;提交到了GitHub后想着用宿舍的电脑跑一下&#xff0c;在测试member表相关接口时就出错了。报了SQL语法错误&#xff0c;但SQL语句很简单&#xff0c;就根据手机号查询不至于出…...

编程日记 2023/12/25 0:27:36

使用minio实现大文件断点续传

部署 minio 拉取镜像 docker pull minio/minio docker images新建映射目录 新建下面图片里的俩个目录 data(存放对象-实际的数据) config 存放配置开放对应端口 我使用的是腾讯服务器所以 在腾讯的安全页面开启 9000&#xff0c;9090 两个端口就可以了&#xff08;根据大家实际…...

编程日记 2023/12/25 0:26:35

插入排序之C++实现

描述 插入排序是一种简单直观的排序算法。它的基本思想是将一个待排序的数据序列分为已排序和未排序两部分&#xff0c;每次从未排序序列中取出一个元素&#xff0c;然后将它插入到已排序序列的适当位置&#xff0c;直到所有元素都插入完毕&#xff0c;即完成排序。 实现思路…...

编程日记 2023/12/25 0:24:33

Tomcat日志乱码了怎么处理？

【前言】 tomacat日志有三个地方&#xff0c;分别是Output(控制台)、Tomcat Localhost Log(tomcat本地日志)、Tomcat Catalina Log。 启动日志和大部分报错日志、普通日志都在output打印;有些错误日志&#xff0c;在Tomcat Localhost Log。 三个日志显示区&#xff0c;都可能…...

编程日记 2023/12/25 0:19:29

[node] Node.js的路由

[node] Node.js的路由 路由 & 路由解析路由信息的整合URL信息路由处理逻辑路由逻辑与URL信息的整合路由的使用 路由 & 路由解析 路由需要提供请求的 URL 和其他需要的 GET/POST 参数&#xff0c;随后路由需要根据这些数据来执行相应的代码。 因此&#xff0c;根据 HT…...

编程日记 2023/12/25 0:16:26

网络编程第三天作业

...

编程日记 2023/12/25 0:14:24

AIGC：大语言模型LLM的幻觉问题

引言 在使用ChatGPT或者其他大模型时&#xff0c;我们经常会遇到模型答非所问、知识错误、甚至自相矛盾的问题。 虽然大语言模型&#xff08;LLMs&#xff09;在各种下游任务中展示出了卓越的能力&#xff0c;在多个领域有广泛应用&#xff0c;但存在着幻觉的问题&#xff1a…...

编程日记 2023/12/25 0:10:19

【C语言刷题每日一题#牛客网BC68】——X形图案

问题描述 思路分析 首先根据输入的描述&#xff0c;多组输入需要将scanf放在循环中来实现 #include<stdio.h> int main() {int a 0;while (scanf("%d", &a) ! EOF){} } 完成了输入之后&#xff0c;再来分析输出——输出的是一个由“*”组成的对称的X形…...

编程日记 2023/12/25 0:06:14

阻断血缘关系以及checkpoint文件清理

spark-sql读写同一张表&#xff0c;报错Cannot overwrite a path that is also being read from 1. 增加checkpoint&#xff0c;设置检查点阻断血缘关系 sparkSession.sparkContext.setCheckpointDir("/tmp/spark/job/OrderOnlineSparkJob")val oldOneIdTagSql s&…...

编程日记 2023/12/25 0:04:11

PHP代码审计之反序列化攻击链CVE-2019-6340漏洞研究

关键词 php 反序列化 cms Drupal CVE-2019-6340 DrupalKernel 前言 简简单单介绍下php的反序列化漏洞 php反序列化漏洞简单示例 来看一段简单的php反序列化示例 <?phpclass pingTest {public $ipAddress "127.0.0.1";public $isValid False;public $output…...

编程日记 2023/12/25 0:01:09

PyTorch之线性回归

1.定义&#xff1a; 回归分析是确定两种或两种以上变量间相互依赖的定量关系的一种统计分析方法。线性回归是利用称为线性回归方程的最小二乘函数&#xff0c;对一个或多个自变量和因变量之间关系&#xff0c;进行建模的一种回归分析。这种函数是一个或多个称为回归系数的模型参…...

编程日记 2023/12/25 0:00:07

电子取证实战：利用FTK Imager与VMware实现DD/E01镜像的动态仿真与启动

1. 电子取证中的镜像仿真入门 第一次接触电子取证时&#xff0c;我被各种专业术语搞得晕头转向。直到有一次需要分析一个嫌疑人的硬盘镜像&#xff0c;才真正体会到动态仿真的重要性。简单来说&#xff0c;动态仿真就是让存储在DD或E01镜像中的操作系统"活"起来&…...

编程新知 2026/5/15 19:56:49

为Claude Code配置Taotoken解决API密钥不稳定与Token不足问题

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 为Claude Code配置Taotoken解决API密钥不稳定与Token不足问题 应用场景类&#xff0c;许多开发者使用Claude Code作为编程助手但常…...

编程新知 2026/5/15 19:56:41

BilibiliDown：一键下载B站音频的跨平台神器

BilibiliDown&#xff1a;一键下载B站音频的跨平台神器 【免费下载链接】BilibiliDown (GUI-多平台支持) B站 哔哩哔哩 视频下载器。支持稍后再看、收藏夹、UP主视频批量下载|Bilibili Video Downloader &#x1f633; 项目地址: https://gitcode.com/gh_mirrors/bi/Bilibili…...

编程新知 2026/5/15 18:13:00

Spring Boot项目里application.properties突然不提示了？别慌，试试这3个排查步骤（附Idea 2023.3+版本截图）

Spring Boot项目里application.properties突然不提示了&#xff1f;别慌&#xff0c;试试这3个排查步骤 作为一名长期使用IntelliJ IDEA进行Spring Boot开发的程序员&#xff0c;配置文件提示功能突然消失的情况确实令人头疼。想象一下&#xff0c;当你正在快速编写配置时&…...

编程新知 2026/5/15 17:43:07

不止于测温：用MAX31855和K型热电偶搭建一个低成本高精度温度监控系统（附STM32源码）

从热电偶到云端&#xff1a;基于MAX31855的高精度温度监测系统全栈开发指南 在工业自动化、实验室监测甚至家庭酿造等场景中&#xff0c;温度数据的精确采集与实时监控往往成为项目成败的关键。传统温度传感器虽然简单易用&#xff0c;但在高温、腐蚀性环境或需要极高精度的场合…...

编程新知 2026/5/15 17:18:30

BaklavaJS执行引擎详解：实现节点图的拓扑排序与数据流计算 [特殊字符]

BaklavaJS执行引擎详解&#xff1a;实现节点图的拓扑排序与数据流计算 &#x1f680; 【免费下载链接】baklavajs Graph / node editor in the browser using VueJS 项目地址: https://gitcode.com/gh_mirrors/ba/baklavajs BaklavaJS是一个基于VueJS的强大浏览器图形节…...

编程新知 2026/5/15 16:58:08

别再猜了！手把手教你识别并解码家里那些“身份不明”的红外遥控器（NEC/RC5/RC6初步判断）

红外遥控器协议侦探指南&#xff1a;快速识别NEC/RC5/RC6编码 家里积攒的旧遥控器越来越多&#xff0c;每个按键背后究竟藏着什么秘密&#xff1f;当你试图用智能家居系统整合这些设备时&#xff0c;第一步往往不是学习信号&#xff0c;而是破解这些"黑盒子"的通信语…...

编程新知 2026/5/15 16:35:27

5G随机接入第一步：用Matlab手把手仿真ZC序列的preamble检测（附完整代码）

5G随机接入第一步&#xff1a;用Matlab手把手仿真ZC序列的preamble检测&#xff08;附完整代码&#xff09; 在5G NR系统中&#xff0c;随机接入过程是终端设备与基站建立连接的关键第一步。而其中ZC序列作为preamble的核心组成部分&#xff0c;其特性直接决定了随机接入的性能…...

编程新知 2026/5/15 15:37:58

突破Java静态调用图分析瓶颈：Java-Callgraph2深度解析与应用实践

突破Java静态调用图分析瓶颈&#xff1a;Java-Callgraph2深度解析与应用实践 【免费下载链接】java-callgraph2 Programs for producing static call graphs for Java programs. 项目地址: https://gitcode.com/gh_mirrors/ja/java-callgraph2 在复杂的Java企业级应用架…...

编程新知 2026/5/15 14:55:30

技术解析：基于UMDF的DualShock 3虚拟HID驱动架构与跨协议兼容方案

技术解析&#xff1a;基于UMDF的DualShock 3虚拟HID驱动架构与跨协议兼容方案 【免费下载链接】DsHidMini Virtual HID Mini-user-mode-driver for Sony DualShock 3 Controllers 项目地址: https://gitcode.com/gh_mirrors/ds/DsHidMini 技术问题背景与挑战 在Windows…...

编程新知 2026/5/15 14:55:28