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

devtools/2025/1/15 23:58:07/

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.ppmy.cn/devtools/26527.html

相关文章

深入解密Spring Boot日志:最佳实践与策略解析

在当今的软件开发领域中&#xff0c;Spring Boot已经成为了许多企业和开发者首选的框架之一。而对于一个优秀的Spring Boot开发者来说&#xff0c;对日志系统的深入了解和合理运用是必不可少的技能之一。 本文将带领正在准备面试的程序员深入解密Spring Boot日志&#xff0c;探…

C# 中 IOC (Inversion of Control,控制反转)

在 C# 中&#xff0c;IOC (Inversion of Control&#xff0c;控制反转) 是一种设计模式和软件开发原则&#xff0c;用于解耦组件之间的依赖关系&#xff0c;提高代码的可维护性和可测试性。IOC 容器是实现 IOC 的关键组件&#xff0c;它负责管理对象的创建、生命周期和依赖注入…

【GitHub】github学生认证,在vscode中使用copilot的教程

github学生认证并使用copilot教程 写在最前面一.注册github账号1.1、注册1.2、完善你的profile 二、Github 学生认证注意事项&#xff1a;不完善的说明 三、Copilot四、在 Visual Studio Code 中安装 GitHub Copilot 扩展4.1 安装 Copilot 插件4.2 配置 Copilot 插件&#xff0…

3.9设计模式——Strategy 策略模式(行为型)

意图 定义一系列的算法&#xff0c;把它们一个个封装起来&#xff0c;并且使他们可以相互替换此模式使得算法可以独立于使用它们的客户而变化 结构 Strategy&#xff08;策略&#xff09;定义所有支持的算法的公共入口。Context使用这个接口来调用某ConcreteStrategy定义的方…

vim与tmux配置文件及常用命令总结

一. 配置文件 1. .tmux.conf # 使用CtrlA作为前缀组合键 set -g prefix C-a unbind C-b bind C-a send-prefix# 支持鼠标操作 setw -g mouse on# 为了能够重新加载配置文件而无需重启tmux&#xff0c;可以绑定一个快捷键 bind r source-file ~/.tmux.conf \; display-message…

【算法小白周赛1A】分析 - 题解与代码

题目链接&#xff1a;https://www.starrycoding.com/problem/155 题目描述 小可可最近在学数学运算&#xff01;他希望考考你&#xff0c;给你两个整数 A , B A,B A,B&#xff0c;询问 A B A\times B AB 是否是偶数。 注意&#xff0c;可能存在前导 0 0 0&#xff0c;比如…

vim的IDE进阶之路

一 ctags 1 安装 安装ctags比较简单&#xff0c;我用的是vim-plug&#xff0c;网络上随便一搜应该就有很多教程&#xff0c;而且没有什么坑 2 使用 vim之函数跳转功能_nvim函数跳转-CSDN博客https://blog.csdn.net/ballack_linux/article/details/71036072不过针对cuda程序…

Java(一)——初识Java

文章目录 Java初识Java基本知识注释标识符关键字字面常量基本数据类型变量类型转换类型提升初识字符串类型运算符语句顺序结构分支结构ifswitch 循环语句while循环for循环do-while循环 输入输出 Java 初识Java 基本知识 Java的源文件后缀名.java&#xff0c;经过Java编译器j…