hook函数——useRef

useRef

useRef 是一个 React Hook,它能帮助引用一个不需要渲染的值。也就是说useRef可以存储一个值,但是不被组件渲染,仅仅只是引用,主要包括两个方面,例如使用ref引用一个值,使用ref引用一个dom节点,本文将会从计数器文本框聚焦的案例来进一步说明这useRef的用法

const ref = useRef(initialValue)

  • initialValue:ref 对象的 current 属性的初始值。可以是任意类型的值。
  • current:初始值为传递的 initialValue。之后可以将其设置为其他值。如果将 ref 对象作为一个 JSX 节点的 ref 属性传递给 React,React 将为它设置 current 属性。

1.使用ref引用一个值

在这个计数器案例中,我们使用了useRef来引用一个变量ref,初始值为0,ref.current代表引用当前ref的值,在点击后获取到当前的值再加1,按道理来说组件应该渲染{ref.current},但是因为useRef的特点,他只在组件初始渲染的时候显示一次,后续便不会参与渲染,仅仅只是作为当前值的引用,通过current属性获取到值,可以从结果图中看到,渲染的值没有变,组件中的ref也没有变

import { useRef } from 'react';
import './App.css';
function App() {const ref = useRef(0);function handleClick() {ref.current = ref.current + 1;alert('You clicked ' + ref.current + ' times!');}return (<div className="App"><button onClick={handleClick}>点击!</button><p>{ref.current}</p></div>);
}export default App;

在这里插入图片描述
在这里插入图片描述

2.使用ref引用dom节点

在这里使用useRef来引用输入框dom节点,初始设置为空,给输入框绑定一个ref属性,点击按钮之后将引用当前的dom进行聚焦,可以看见组件的ref上有输入框的dom,并且点击之后输入框聚焦

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

在这里插入图片描述

3.注意事项

不要在渲染期间写入或者读取 ref.current。

React 期望组件主体 表现得像一个纯函数:

如果输入的(props、state 与 上下文)都是一样的,那么就应该返回一样的 JSX。
以不同的顺序或用不同的参数调用它,不应该影响其他调用的结果。
在 渲染期间 读取或写入 ref 会破坏这些预期行为。

function MyComponent() {// ...// 不要在渲染期间写入 refmyRef.current = 123;// ...// 不要在渲染期间读取 refreturn <h1>{myOtherRef.current}</h1>;
}

可以在 事件处理程序或者 Effect 中读取和写入 ref。

function MyComponent() {// ...useEffect(() => {// 可以在 Effect 中读取和写入 refmyRef.current = 123;});// ...function handleClick() {// 可以在事件处理程序中读取和写入 refdoSomething(myOtherRef.current);}// ...
}

如果不得不在渲染期间读取 或者写入,那么应该 使用 state 代替。

总结

这是关于useRef的基础讲解,详细请参考官方文档官方文档

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

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

相关文章

软件价值12-射箭游戏

射箭游戏&#xff0c;按空格键发射&#xff0c;打击移动靶&#xff0c;左上角显示成绩状态。 代码&#xff1a; import pygame import sys import random# 初始化Pygame pygame.init()# 设置窗口大小 SCREEN_WIDTH 800 SCREEN_HEIGHT 600 screen pygame.display.set_mode((…

【Linux】信号概念与信号产生

信号概念与信号产生 一、初识信号1. 信号概念2. 前台进程和后台进程3. 认识信号4. 技术应用角度的信号 二、信号的产生1. 键盘组合键2. kill 命令3. 系统调用4. 异常&#xff08;1&#xff09;观察现象&#xff08;2&#xff09;理解本质 5. 软件条件闹钟 一、初识信号 1. 信号…

任务管理软件的实用价值及优选推荐:提升工作效率的利器

任务管理软件是一种用于组织任务、将任务分配给个人并监控其进展的软件。该软件可以帮助确保任务在预算内按时完成。它在协同工作环境中特别有用&#xff0c;在这种环境中多人在处理需要跟踪和监视的任务。无论是初创公司、中小型企业还是大型组织&#xff0c;都可以从任务管理…

【Linux】make和Makefile

目录 make和Makefile make和Makefile 我们使用vim编辑器的时候&#xff0c;在一个文件里写完代码要进行编译&#xff0c;要自己输入编译的指令。有没有一种可以进行自动化编译的方法——makefile文件&#xff0c;它可以指定具体的编译操作&#xff0c;写好makefile文件&#x…

电磁兼容故障整改-辐射发射超标

设备的辐射于扰发射超标有两种可能:一种是设备外壳的屏蔽性能不完善;另一种是射频干扰经由电源线和其他线缆逸出。判断方法是拔掉不必要的电线和电源插头&#xff0c;或者将电缆长度减小至最短&#xff0c;继续做试验&#xff0c;如果没有任何改善迹象&#xff0c;则应怀疑是设…

Peter算法小课堂—单调队列

祝大家新年快乐&#xff01; 今天这一次有点简单。 单调队列有两个要点&#xff0c;一个是单调&#xff0c;另一个就是我们的队列。 听到队列&#xff0c;我相信大家一定会想到它的好朋友BFS吧。但是……今天……可……没……那么……简单哦。 西佳佳偶像天团1 题目描述 …

滑动窗口的最大值

题目 239. 滑动窗口最大值 - 力扣&#xff08;LeetCode&#xff09; 思路 使用一个队列充当不断滑动的窗口&#xff0c;每次滑动记录其中的最大值&#xff1a; 如何在 O(1) 时间计算最大值&#xff0c;只需要一个特殊的数据结构「单调队列」&#xff0c;push 方法依然在队尾添…

分布式搜索引擎 elasticsearch

分布式搜索引擎 elasticsearch 第一部分 1.初识elasticsearch 1.1.了解ES 1.1.1.elasticsearch的作用 elasticsearch是一款非常强大的开源搜索引擎&#xff0c;具备非常多强大功能&#xff0c;可以帮助我们从海量数据中快速找到需要的内容 例如&#xff1a; 在GitHub搜索…

【EAI 016】VIMA: General Robot Manipulation with Multimodal Prompts

论文标题&#xff1a;VIMA: General Robot Manipulation with Multimodal Prompts 论文作者&#xff1a;Yunfan Jiang, Agrim Gupta, Zichen Zhang, Guanzhi Wang, Yongqiang Dou, Yanjun Chen, Li Fei-Fei, Anima Anandkumar, Yuke Zhu, Linxi Fan 作者单位&#xff1a;Stanfo…

【Spring源码分析】Spring的启动流程源码解析

阅读此需阅读下面这些博客先【Spring源码分析】Bean的元数据和一些Spring的工具【Spring源码分析】BeanFactory系列接口解读【Spring源码分析】执行流程之非懒加载单例Bean的实例化逻辑【Spring源码分析】从源码角度去熟悉依赖注入&#xff08;一&#xff09;【Spring源码分析】…

2 月 7 日算法练习- 数据结构-并查集

并查集 并查集是一种图形数据结构&#xff0c;用于存储图中结点的连通关系。 每个结点有一个父亲&#xff0c;可以理解为“一只伸出去的手”&#xff0c;会指向另外一个点&#xff0c;初始时指向自己。 一个点的根节点是该点的父亲的父亲的的父亲&#xff0c;直到某个点的父亲…

【NodeJS】006- API模块与会话控制介绍d

1.简介 1.1 接口是什么 接口是 前后端通信的桥梁 简单理解&#xff1a;一个接口就是 服务中的一个路由规则 &#xff0c;根据请求响应结果 接口的英文单词是 API (Application Program Interface)&#xff0c;所以有时也称之为 API 接口 这里的接口指的是『数据接口』&#…

游戏服务器租用价格表_TOP3费用对比

游戏服务器租用多少钱一年&#xff1f;1个月游戏服务器费用多少&#xff1f;阿里云游戏服务器26元1个月、腾讯云游戏服务器32元&#xff0c;华为云26元&#xff0c;游戏服务器配置从4核16G、4核32G、8核32G、16核64G等配置可选&#xff0c;游戏专业服务器公网带宽10M、12M、15M…

大模型训练所需的硬件配置

1. 引入 训练一个大模型&#xff0c;到底需要投入多少块GPU&#xff0c;需要多少数据&#xff0c;训练多长时间能达到一个不错的效果&#xff1f; 本文引用靠谱的数据&#xff0c;来回答这些问题。 2. 全流程训练 大模型的训练&#xff0c;简单来说&#xff0c;分为Pretrain…

C#,普洛尼克数(Pronic Number)的算法与源代码

1 普洛尼克数(pronic number) 普洛尼克数(pronic number)&#xff0c;也叫矩形数、欧波朗数(oblong number)&#xff0c;是两个连续非负整数的积&#xff0c;即mn*(n1)。第n个普洛尼克数侪是n个三角形数个两倍。 2 计算结果 3 源程序 using System; namespace Legalsoft.Tru…

02 数据库管理 数据表管理

文章目录 数据库管理数据表管理基础数据类型表的基本操作 数据库管理 查看已有库 show databases; 创建库 create database 库名 [character set utf8]; e.g. 创建stu数据库&#xff0c;编码为utf8 create database stu character set utf8; create database stu charsetutf8;…

禁止文件外发,文件禁止外发的方法

在当今的企业环境中&#xff0c;数据安全至关重要。 什么是企业文件外发&#xff1f; 企业文件外发指的是将企业内部的电子文件发送给组织外部的人员使用。 这种行为可能带来数据安全风险&#xff0c;因为电子文件自身具有易拷贝、易扩散、易传播的特性。 如果带有核心资产或…

LLMs之Llama2 70B:《Self-Rewarding Language Models自我奖励语言模型》翻译与解读

LLMs之Llama2 70B&#xff1a;《Self-Rewarding Language Models自我奖励语言模型》翻译与解读 目录 《Self-Rewarding Language Models》翻译与解读 Abstract 5 Conclusion结论 6 Limitations限制 《Self-Rewarding Language Models》翻译与解读 地址 文章地址&#xff1…

疑似针对安全研究人员的窃密与勒索

前言 笔者在某国外开源样本沙箱平台闲逛的时候&#xff0c;发现了一个有趣的样本&#xff0c;该样本伪装成安全研究人员经常使用的某个渗透测试工具的破解版压缩包&#xff0c;对安全研究人员进行窃密与勒索双重攻击&#xff0c;这种双重攻击的方式也是勒索病毒黑客组织常用的…

Scrum敏捷开发管理全流程-敏捷管理工具

Leangoo领歌是款永久免费的专业的敏捷开发管理工具&#xff0c;提供端到端敏捷研发管理解决方案&#xff0c;涵盖敏捷需求管理、任务协同、进展跟踪、统计度量等。 Leangoo领歌上手快、实施成本低&#xff0c;可帮助企业快速落地敏捷&#xff0c;提质增效、缩短周期、加速创新。…