React中Hooks几个有用的 ref

先看下来自官方的介绍,当你希望组件“记住”某些信息,但又不想让这些信息 触发新的渲染 时,你可以使用 ref

  • 如何向组件添加 ref
  • 如何更新 ref 的值
  • ref 与 state 有何不同
  • 如何安全地使用 ref

1.给你的组件添加 ref 

你可以通过从 React 导入 useRef Hook 来为你的组件添加一个 ref:

import { useRef } from 'react';export default function Counter() {let ref = useRef(0);function handleClick() {ref.current = ref.current + 1;alert('你点击了 ' + ref.current + ' 次!');}return (<button onClick={handleClick}>点击我!{ref.current}</button>);
}

在你的组件内,调用 useRef Hook 并传入你想要引用的初始值作为唯一参数。这里的 ref 引用的值是“0”,点击后也不变。

以下是 state 和 ref 的对比:

refstate
useRef(initialValue)返回 { current: initialValue }useState(initialValue) 返回 state 变量的当前值和一个 state 设置函数 ( [value, setValue])
更改时不会触发重新渲染更改时触发重新渲染。
可变 —— 你可以在渲染过程之外修改和更新 current 的值。“不可变” —— 你必须使用 state 设置函数来修改 state 变量,从而排队重新渲染。
你不应在渲染期间读取(或写入) current 值。你可以随时读取 state。但是,每次渲染都有自己不变的 state 快照。

2.使用 ref 操作 DOM

由于 React 会自动处理更新 DOM 以匹配你的渲染输出,因此你在组件中通常不需要操作 DOM。但是,有时你可能需要访问由 React 管理的 DOM 元素 —— 例如,让一个节点获得焦点、滚动到它或测量它的尺寸和位置。在 React 中没有内置的方法来做这些事情,所以你需要一个指向 DOM 节点的 ref 来实现。

 

示例: 使文本输入框获得焦点 

在本例中,单击按钮将使输入框获得焦点:

import { useRef } from 'react';export default function Form() {const inputRef = useRef(null);function handleClick() {inputRef.current.focus();}return (<><input ref={inputRef} /><button onClick={handleClick}>聚焦输入框</button></>);
}

如何使用 ref 回调管理 ref 列表

  • 这里使用map搭配useRef作存储 
import { useRef } from 'react';export default function CatFriends() {const itemsRef = useRef(null);function scrollToId(itemId) {const map = getMap();const node = map.get(itemId);node.scrollIntoView({behavior: 'smooth',block: 'nearest',inline: 'center'});}function getMap() {if (!itemsRef.current) {// 首次运行时初始化 Map。itemsRef.current = new Map();}return itemsRef.current;}return (<><nav><button onClick={() => scrollToId(0)}>Tom</button><button onClick={() => scrollToId(5)}>Maru</button><button onClick={() => scrollToId(9)}>Jellylorum</button></nav><div><ul>{catList.map(cat => (<likey={cat.id}ref={(node) => {const map = getMap();if (node) {map.set(cat.id, node);} else {map.delete(cat.id);}}}><imgsrc={cat.imageUrl}alt={'Cat #' + cat.id}/></li>))}</ul></div></>);
}const catList = [];
for (let i = 0; i < 10; i++) {catList.push({id: i,imageUrl: 'https://placekitten.com/250/200?image=' + i});
}

itemsRef 保存的不是单个 DOM 节点,而是保存了包含列表项 ID 和 DOM 节点的 Map。(Ref 可以保存任何值!) 每个列表项上的 ref 回调负责更新 Map。

3.访问另一个组件的 DOM 节点 

当你将 ref 放在像 <input /> 这样输出浏览器元素的内置组件上时,React 会将该 ref 的 current 属性设置为相应的 DOM 节点(例如浏览器中实际的 <input /> )。

但是,如果你尝试将 ref 放在 你自己的 组件上,例如 <MyInput />,默认情况下你会得到 null。这个示例演示了这种情况。请注意单击按钮 并不会 聚焦输入框:

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

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

相关文章

Isaac Lab

一、安装isaac sim conda create -n isaaclab python=3.10 conda activate isaaclab pip install torch==2.2.2 --index-url https://download.pytorch.org/whl/cu121 pip install isaacsim-rl isaacsim-replicator isaacsim-extscache-physics isaacsim-extscache-kit-sdk isa…

编织文字的魔法:探索WebKit的CSS文本效果

编织文字的魔法&#xff1a;探索WebKit的CSS文本效果 在现代网页设计中&#xff0c;文本不仅仅是信息的载体&#xff0c;更是视觉表现的重要元素。WebKit&#xff0c;作为众多浏览器的核心引擎&#xff0c;支持一系列CSS文本效果&#xff0c;使开发者能够创造出引人注目的文本…

如何分清楚常见的 Git 分支管理策略Git Flow、GitHub Flow 和 GitLab Flow

Git Flow、GitHub Flow 和 GitLab Flow 是几种常见的 Git 分支管理策略&#xff0c;它们帮助开发团队更高效地管理代码库和协同开发。 Git Flow Git Flow 是一种功能强大的分支管理模型&#xff0c;由 Vincent Driessen 提出&#xff0c;适用于发布周期较长、需要严格管理发布…

【ELK】简述

ELK 堆栈的作用 大规模日志管理与分析 随着系统规模的扩大&#xff0c;应用程序、服务器和网络设备会产生大量的日志数据。ELK 堆栈可以集中收集、存储和索引这些分散在不同服务器和系统中的日志&#xff0c;方便快速检索和分析&#xff0c;帮助您快速定位系统故障、异常事件和…

Python函数基础:构建代码逻辑的基石(补全篇)

在前面我已经编写过一篇&#xff0c;python函数基础的博文&#xff0c;相信有基础的同学应该看得出来&#xff0c;那一篇的基础内容也是不全的&#xff0c;于是就有了这个补全篇。补全篇&#xff0c;补充了变量的作用与&#xff08;global与nonlocal&#xff09;、递归函数、闭…

企业在实施网络安全等级保护时需要采取哪些技术措施?

企业在实施网络安全等级保护时&#xff0c;需要采取一系列技术措施来确保信息系统的安全性。根据最新的网络安全等级保护要求&#xff0c;以下是一些关键的技术措施&#xff1a; 防火墙和入侵检测系统&#xff08;IDS/IPS&#xff09;&#xff1a;部署防火墙和入侵检测系统来监…

AI、AGI、AIGC与AIGC、NLP、LLM,ChatGPT区分

这些术语和技术都是人工智能&#xff08;AI&#xff09;领域的重要组成部分&#xff0c;它们之间有复杂的关系和相互交织的依存。以下是它们之间的关系和各自的定义&#xff1a; AI&#xff08;人工智能&#xff09;&#xff1a; 定义&#xff1a;AI是指能够执行通常需要人类智…

acwing796-子矩阵的和-前缀和

s矩阵是全局变量&#xff0c;维度n*m,从1~n和 1~m存储元素【0】【0】~【0】【m】和【0】【0】~【n】【0】分别存储的都是0.s矩阵刚开始是存储输入的元素&#xff0c;后面用于存储前缀和。 s矩阵的意思是s【i】【j】表示从【0】【0】到【i】【j】为对角线的矩阵里面所有元素的和…

多类别支持向量机(Multi-class SVM)

多类别支持向量机&#xff08;Multi-class SVM&#xff09;是一种扩展二分类支持向量机以处理多类别分类问题的方法。常见的方法有“一对一”&#xff08;one-vs-one&#xff09;和“一对多”&#xff08;one-vs-rest&#xff09;。 一、数学模型理论推导 1.1 一对多&#xf…

新的铸造厂通过 PROFIBUS 技术实现完全自动化

钢铁生产商某钢以其在厚钢板类别中极高的产品质量而闻名。其原材料&#xff08;板坯连铸机&#xff09;在钢铁厂本地生产&#xff0c;该厂最近新建了一座垂直连铸厂。该项目的一个主要目标是从一开始就完全自动化这座新工厂和整个铸造过程&#xff0c;以高成本效率实现最佳产品…

用AI对抗AI:Fortinet解锁家电制造网络安全新密码

Fortinet盛大启幕《构筑垂直行业 网络安全防线》系列研讨会。首场研讨会聚焦于家电制造领域&#xff0c;以《利用AI打造家电制造网络安全的新质力》为主题。 Fortinet中国南区资深安全顾问黄志攀深入洞察家电制造行业的网络安全挑战&#xff0c;全面解析了Fortinet如何通过全栈…

数据库系统概论:数据库系统的锁机制

引言 锁是计算机协调多个进程或线程并发访问某一资源的机制。在数据库中&#xff0c;数据作为一种共享资源&#xff0c;其并发访问的一致性和有效性是数据库必须解决的问题。锁机制通过对数据库中的数据对象&#xff08;如表、行等&#xff09;进行加锁&#xff0c;以确保在同…

基于python的去除图像内部填充

1 代码功能 该代码实现了一个图像处理的功能&#xff0c;具体来说是去除图像内部填充&#xff08;或更准确地说&#xff0c;是提取并显示图像中轮廓的外围区域&#xff0c;而忽略内部填充&#xff09;。以下是该功能的详细步骤&#xff1a; 读取图像&#xff1a;使用cv2.imread…

AWS服务器购买:如何选择合适的AWS云服务器

在当今数字化时代,云计算已成为企业IT基础设施的重要组成部分。作为全球领先的云服务提供商之一,亚马逊网络服务(AWS)提供了丰富多样的云服务器选项。然而,面对众多选择,如何为您的业务需求挑选最合适的AWS云服务器呢?我们结合九河云的分析来给你解答。 1. 明确业务需求 首先…

JVM调优:根据JVM自带工具定位问题(jps、jstat、Visual VM的使用)

JVM调优步骤 发现问题、定位问题、解决问题 发现问题 常见问题如下 GC频繁CPU负载过高内存溢出&#xff08;OOM&#xff09;内存泄露死锁程序响应时间较长 用JDK自带命令调优工具定位问题 jps&#xff08;java process status&#xff09;:查看正在运行的Java进程 基本语…

JUnit 单元测试

JUnit 测试是程序员测试&#xff0c;就是白盒测试&#xff0c;可以让程序员知道被测试的软件如何 &#xff08;How&#xff09;完成功能和完成什么样&#xff08;What&#xff09;的功能。 下载junit-4.12和hamcrest-core-1.3依赖包 相关链接 junit-4.12&#xff1a;Central …

html+canvas 实现签名功能-手机触摸

手机上的效果图 需要注意&#xff0c;手机触摸和鼠标不是一个事件&#xff0c;不能通用&#xff0c;上一篇是关于使用鼠标的样例 相关代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewpo…

什么是AQS(抽象队列同步器)?

AQS是AbstractQueuedSynchronizer的简称&#xff0c;即抽象队列同步器&#xff0c;从字面上可以这样理解: 抽象&#xff1a;抽象类&#xff0c;只实现一些主要逻辑&#xff0c;有些方法由子类实现&#xff1b;队列&#xff1a;使用先进先出&#xff08;FIFO&#xff09;的队列…

独立站外链如何影响搜索引擎排名?

独立站的外链对搜索引擎排名有着非常重要的影响。简单来说&#xff0c;外链就像是别的网站对你的网站投的信任票。每一条外链都告诉搜索引擎&#xff1a;“这个网站的内容是有价值的&#xff0c;值得推荐。”因此&#xff0c;外链的数量和质量直接影响你的网站在搜索引擎中的排…

ThinkPad改安装Windows7系统的操作步骤

ThinkPad&#xff1a;改安装Windows7系统的操作步骤 一、BIOS设置 1、先重新启动计算机&#xff0c;并按下笔记本键盘上“F1”键进入笔记本的BIOS设置界面。 2、进入BIOS设置界面后&#xff0c;按下键盘上“→”键将菜单移动至“Restart“项目&#xff0c;按下键盘上“↓”按键…