react中useRef是什么?有啥用?怎么用?

useRef是什么?

在 React 中,useRef 是一个 Hook,它可以用来存储一个可变的值,这个值在组件的整个生命周期内保持不变。useRef 返回一个可变的 ref 对象,其 .current 属性被初始化为传递给 useRef 的参数(initialValue)。返回的对象将在组件的整个生命周期内持续存在

useRef 通常有两个主要的用途:

  1. 访问 DOM 节点:当你需要直接访问一个 DOM 节点时(例如,要管理焦点、文本选择或媒体播放),你可以使用 ref 来获取对该节点的直接引用。

  2. 存储任意可变值:如果你需要跨渲染保持一个可变值,而这个值不应该引起组件的重新渲染时,你可以使用 ref。

访问 DOM 节点
下面是一个使用 useRef 访问 DOM 节点的例子:

import React, { useRef, useEffect } from 'react';function TextInputWithFocusButton() {// 初始化一个 ref,初始值为 nullconst inputEl = useRef(null);// 一个按钮点击事件的处理函数,它会将焦点设置到 input 元素上const onButtonClick = () => {// `current` 指向已经挂载在 DOM 上的文本输入元素inputEl.current.focus();};return (<>{/* 将 ref 关联到 input 元素上 */}<input ref={inputEl} type="text" /><button onClick={onButtonClick}>Focus the input</button></>);
}//在这个例子中,我们创建了一个 ref 对象 inputEl 并将其关联到 <input> 元素上。通过点击按钮,我们可以调用 inputEl.current.focus() 方法来让输入框获得焦点。

存储可变值

//下面是一个使用 useRef 存储可变值的例子:
import React, { useRef } from 'react';function TimerComponent() {const count = useRef(0); // count 的初始值为 0const handleStart = () => {count.current = setInterval(() => {console.log(`Interval triggered ${++count.current}`);}, 1000);};const handleStop = () => {clearInterval(count.current);};return (<div><button onClick={handleStart}>Start</button><button onClick={handleStop}>Stop</button></div>);
}//在这个例子中,我们使用 useRef 来存储一个计时器的 ID 值。count.current 在组件的整个生命周期内保持不变,即使在组件重新渲染时也是如此。这样,我们可以在开始和停止计时器的函数之间共享这个值,而不需要将其作为组件的状态。使用状态的话,每次状态更新都会导致组件重新渲染,这在这种情况下是不必要的。
//例子二 const queryRef = useRef({code1: '',code2: ''});const PrintBtn = () => {console.log('testBtn', queryRef.current); //永远都是获取到最新的值};<div><inputonChange={(e) => {queryRef.current.code1 = e.target.value;}}placeholder="请输入文本1"></input><inputonChange={(e) => {queryRef.current.code2 = e.target.value;}}placeholder="请输入文本2"></input><Button onClick={PrintBtn}>Print</Button></div>

注意事项::::

  1. 修改 useRef 返回的对象的 .current 属性不会触发组件的重新渲染。
  2. useRef 和创建一个 {current: …} 对象的字面量不同,因为 useRef 会在每次渲染时返回同一个 ref 对象。
  3. 如果你将 ref 对象用于跟踪一个值,那么你应该在需要时手动处理这个值的更新和副作用,因为 React 不会为你做这些事情。

useRef 是 React 提供的一个强大的工具,它可以帮助你在函数组件中管理 DOM 引用和存储可变值,而不会引起额外的渲染。

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

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

相关文章

【补充】图神经网络前传——图论

本文作为对图神经网络的补充。主要内容是看书。 仅包含Introduction to Graph Theory前五章以及其他相关书籍的相关内容&#xff08;如果后续在实践中发现前五章不够&#xff0c;会补上剩余内容&#xff09; 引入 什么是图&#xff1f; 如上图所示的路线图和电路图都可以使用…

国家开放大学2024年春《Matlab语言及其应用》实验一熟悉Matlab 操作环境参考答案

实验报告 姓名&#xff1a; 学号&#xff1a; 实验一名称&#xff1a;熟悉 Matlab 操作环境 实验目标&#xff1a;通过简单变量和矩阵的录入、计算和查看相关信息&#xff0c;了解 Matlab 操作界面 及各子窗口使用方法。熟悉一系列便于使用的 Matlab 函数和文件的工具。 实…

复旦 北大 | 从头训练中文大模型:CT-LLM

引言 当前&#xff0c;绝大多数大模型&#xff08;LLMs&#xff09;基本上都是以英文语料库训练得到的&#xff0c;然后经过SFT来匹配不同的语种。然而&#xff0c;今天给大家分享的这篇文章旨在从头开始训练中文大模型&#xff0c;在训练过程中「主要纳入中文文本数据」&…

qt5-入门-2D绘图-Graphics View 架构

参考&#xff1a; Qt Graphics View Framework_w3cschool https://www.w3cschool.cn/learnroadqt/4mvj1j53.html C GUI Programming with Qt 4, Second Edition 本地环境&#xff1a; win10专业版&#xff0c;64位&#xff0c;Qt 5.12 基础知识 QPainter比较适合少量绘图的情…

Linux 文件管理命令dc expr strings xargs

文章目录 2.Linux 文件管理命令2.54 dc&#xff1a;任意精度的计算器案例练习 2.25 expr&#xff1a;求表达式变量的值案例练习 2.56 strings&#xff1a;显示文件中的可打印字符案例练习 2.57 xargs&#xff1a;从标准输入读入参数案例练习 2.Linux 文件管理命令 2.54 dc&…

10个使用NumPy就可以进行的图像处理步骤

图像处理是一种数学计算。数字图像由称为像素的彩色小点组成。每个像素由红、绿、蓝(RGB)三个独立的颜色组成。每个像素中的主色由每个RGB分量的数值决定。 本文将介绍10个使用使用NumPy就可以进行的图像处理步骤&#xff0c;虽然有更强大的图像处理库&#xff0c;但是这些简单…

光伏管理系统:降本增效解决方案。

现在是光伏发展的重要节点&#xff0c;如何在众多同行中脱颖而出并且有效的达到降低成本、提高效率也是很多企业都在考虑的问题&#xff0c;鹧鸪云的团队研发出了光伏管理系统&#xff0c;通过更高效、更智能、更全面的管理方式来帮助企业实现降本增效的转型&#xff0c;小编带…

公考学习平台|基于SprinBoot+vue的公考学习平台(源码+数据库+文档)

公考学习平台目录 目录 基于SprinBootvue的公考学习平台 一、前言 二、系统设计 三、系统功能设计 5.1用户信息管理 5.2 视频信息管理 5.3公告信息管理 5.1论坛信息管理 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取&…

笔记-word导出PDF老是更新域导致图片和表格题注发生变化

问题描述&#xff1a;微软word 导出PDF时&#xff0c;老是更新域&#xff0c;导致图片和表格题注否跟着变化 以下是解决方法的具体描述。 目录 一、准备工作二、操作步骤 一、准备工作 1、工具版本&#xff1a;微软 word 2016&#xff08;其他微软word版本也OK&#xff09; …

【自研网关系列】过滤器链 -- 鉴权过滤器

&#x1f308;Yu-Gateway&#xff1a;&#xff1a;基于 Netty 构建的自研 API 网关&#xff0c;采用 Java 原生实现&#xff0c;整合 Nacos 作为注册配置中心。其设计目标是为微服务架构提供高性能、可扩展的统一入口和基础设施&#xff0c;承载请求路由、安全控制、流量治理等…

智能化未来:Agent AI智能体的崛起与全球挑战

✨✨ 欢迎大家来访Srlua的博文&#xff08;づ&#xffe3;3&#xffe3;&#xff09;づ╭❤&#xff5e;✨✨ &#x1f31f;&#x1f31f; 欢迎各位亲爱的读者&#xff0c;感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢&#xff0c;在这里我会分享我的知识和经验。&am…

Redis源码学习记录:列表 (ziplist)

ziplist redis 源码版本&#xff1a;6.0.9。ziplist 的代码均在 ziplist.c / ziplist.h 文件中。 定义 ziplist总体布局如下&#xff1a; <zlbytes> <zltail> <zllen> <entry> <entry> ... <entry> <zlend> zlbytes&#xff1a;uin…

DevEco安装后卡死解决方案【鸿蒙开发Bug已解决】

文章目录 项目场景:问题描述原因分析:解决方案:其他解决方案此Bug解决方案总结Bug解决方案寄语项目场景: 最近也是遇到了这个问题,看到网上也有人在询问这个问题,本文总结了自己和其他人的解决经验,解决了【DevEco安装后卡死解决方案】的问题。 问题描述 安装完成最新…

numpy学习

import numpy as np## 创建一个一维数组 np.array([1,2,3])array([1, 2, 3])np.array([1,2,3])array([1, 2, 3])np.array([[1,2,3]])array([[1, 2, 3]])np.array([[1,2,3]]).Tarray([[1],[2],[3]])np.ones(4)array([1., 1., 1., 1.])np.zeros(4)array([0., 0., 0., 0.])np.rand…

高德优评项目,一单29.9,拷贝+评价,日入500

项目概述&#xff1a; 下载 地 址 &#xff1a; laoa1.cn/1836.html 本项目的核心非常简单&#xff0c;即在高德地图上撰写评论。每条评论完成后&#xff0c;参与者将获得8元的奖励。 此外&#xff0c;高德地图还会提供视频会员作为奖励。我们可以将这些视频会员进行变现…

LLM 构建Data Multi-Agents 赋能数据分析平台的实践之③:数据分析之二(大小模型协同)

一、概述 随着新一代信息技术在产业数字化中的应用&#xff0c;产生了大量多源多模态信息以及响应的信息处理模式&#xff0c;数据孤岛、模型林立的问题也随之产生&#xff0c;使得业务系统臃肿、信息处理和决策效率低下&#xff0c;面对复杂任务及应用场景问题求解效率低。针…

做外贸如何主动开发外贸客户

在外贸业务中&#xff0c;主动开发客户是至关重要的一步&#xff0c;它能够帮助你扩大市场覆盖范围&#xff0c;建立稳定的客户基础。以下是一些有效的策略和方法&#xff0c;可以帮助你更有效地主动开发外贸客户&#xff1a; 明确目标市场&#xff1a;首先&#xff0c;你需要确…

【快速入门】数据库的增删改查与结构讲解

文章的操作都是基于小皮php study的MySQL5.7.26进行演示 what 数据库是能长期存储在计算机内&#xff0c;有组织的&#xff0c;可共享的大量数据的集合。数据库中的数据按照一定的数据模型存储&#xff0c;具有较小的冗余性&#xff0c;较高的独立性和易扩展性&#xff0c;并为…

【docker】Docker开启远程访问

将构建的镜像自动上传到服务器。 需要开放 Docker 的端口&#xff0c;让我们在本地能连接上服务器的 Docker&#xff0c;这样&#xff0c;才能上传构建的镜像给 Docker。 开启远程访问 首先在服务器打开 Docker 的服务文件 vim /usr/lib/systemd/system/docker.service修改…

LiveGBS user/save 逻辑缺陷漏洞复现(CNVD-2023-72138)

0x01 产品简介 LiveGBS是安徽青柿信息科技有限公司研发的一款国标(GB28181)流媒体服务软件,可提供提供用户管理及Web可视化页面管理,开源的前端页面源码;提供设备状态管理,可实时查看设备是否掉线等信息等。 0x02 漏洞概述 LiveGBS user/save 接口处存在逻辑缺陷漏洞,未…