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

react中hooks之useRef 用法总结

1. 基本概念

useRef 是 React 的一个 Hook,返回一个可变的 ref 对象,其 .current 属性被初始化为传入的参数。这个对象在组件的整个生命周期内保持不变。

2. 主要用途和特性

2.1 获取 DOM 元素实例

function TextInputWithFocusButton() {const inputEl = useRef(null);const onButtonClick = () => {// 直接访问 DOM 元素inputEl.current.focus();};return (<><input ref={inputEl} type="text" /><button onClick={onButtonClick}>聚焦输入框</button></>);
}

2.2 存储组件渲染周期之间的共享数据

  • useRef 只会在组件初始化时执行一次
  • state 改变引起的重新渲染不会导致 useRef 重新执行
  • 适合存储不需要触发视图更新的数据
function Counter() {const [count, setCount] = useState(0);const renderCount = useRef(0);  // 用于记录渲染次数useEffect(() => {renderCount.current += 1;console.log(`组件已渲染 ${renderCount.current} 次`);});return (<div><p>当前计数: {count}</p><button onClick={() => setCount(count + 1)}>增加</button></div>);
}

2.3 useRef 的重要特性

  1. current 值的修改不会触发重新渲染
function Example() {const countRef = useRef(0);const handleClick = () => {// 修改 ref 不会导致组件重新渲染countRef.current += 1;console.log('当前值:', countRef.current);};return <button onClick={handleClick}>点击</button>;
}
  1. 不应作为其他 Hooks 的依赖项
function BadExample() {const valueRef = useRef(0);// ❌ 错误示例useEffect(() => {console.log(valueRef.current);}, [valueRef.current]); // 不要这样做
}function GoodExample() {const valueRef = useRef(0);// ✅ 正确示例useEffect(() => {console.log(valueRef.current);}); // 不将 ref 作为依赖项
}

3. forwardRef 和 useImperativeHandle

3.1 基本用法示例

// CustomInput.jsx
import React, { forwardRef, useImperativeHandle, useRef } from 'react';const CustomInput = forwardRef((props, ref) => {const inputRef = useRef();useImperativeHandle(ref, () => ({// 只暴露需要的方法focus: () => {inputRef.current.focus();},getValue: () => {return inputRef.current.value;}}));return <input ref={inputRef} {...props} />;
});// Parent.jsx
function Parent() {const inputRef = useRef();const handleClick = () => {inputRef.current.focus();console.log(inputRef.current.getValue());};return (<div><CustomInput ref={inputRef} /><button onClick={handleClick}>操作输入框</button></div>);
}

3.2 复杂组件示例(不同粒度的暴露)

const ComplexComponent = forwardRef((props, ref) => {const inputRef = useRef();const checkboxRef = useRef();const formRef = useRef();useImperativeHandle(ref, () => ({// 粒度级别 1:表单级操作form: {reset: () => {inputRef.current.value = '';checkboxRef.current.checked = false;},validate: () => {return inputRef.current.value.length > 0;}},// 粒度级别 2:具体输入框操作input: {focus: () => inputRef.current.focus(),getValue: () => inputRef.current.value,setValue: (value) => {inputRef.current.value = value;}},// 粒度级别 3:简单方法clear: () => {inputRef.current.value = '';}}));return (<form ref={formRef}><input ref={inputRef} type="text" /><input ref={checkboxRef} type="checkbox" /></form>);
});// 使用示例
function ComplexParent() {const componentRef = useRef();const handleOperations = () => {// 使用不同粒度的操作componentRef.current.form.reset();componentRef.current.input.focus();componentRef.current.input.setValue('新值');componentRef.current.clear();if (componentRef.current.form.validate()) {console.log('表单验证通过');}};return (<div><ComplexComponent ref={componentRef} /><button onClick={handleOperations}>执行操作</button></div>);
}

4. 注意事项

  1. useRef 不能直接引用函数式组件,必须配合 forwardRef 使用
  2. useRef 的值改变不会触发重新渲染,如果需要在值改变时重新渲染,应使用 useState
  3. 使用 useImperativeHandle 时,应该只暴露必要的方法,保持良好的封装性
  4. 避免在 render 过程中读取或写入 ref.current

5. 最佳实践

  1. 使用 TypeScript 定义暴露的接口类型
  2. 合理划分暴露方法的粒度
  3. 文档化暴露的方法
  4. 遵循最小暴露原则
  5. 在清理阶段(cleanup)正确处理 ref,特别是涉及定时器等资源时

6. 使用场景建议

  1. 访问 DOM 元素或组件实例
  2. 存储定时器 ID
  3. 存储上一次的值
  4. 存储不需要触发重新渲染的数据
  5. 跨组件方法调用(通过 forwardRef)

通过合理使用 useRef,可以优化组件性能,实现更复杂的组件交互,同时保持代码的可维护性和可读性。

相关文章:

react中hooks之useRef 用法总结

1. 基本概念 useRef 是 React 的一个 Hook&#xff0c;返回一个可变的 ref 对象&#xff0c;其 .current 属性被初始化为传入的参数。这个对象在组件的整个生命周期内保持不变。 2. 主要用途和特性 2.1 获取 DOM 元素实例 function TextInputWithFocusButton() {const inpu…...

使用 Docker 部署 Java 项目(通俗易懂)

目录 1、下载与配置 Docker 1.1 docker下载&#xff08;这里使用的是Ubuntu&#xff0c;Centos命令可能有不同&#xff09; 1.2 配置 Docker 代理对象 2、打包当前 Java 项目 3、进行编写 DockerFile&#xff0c;并将对应文件传输到 Linux 中 3.1 编写 dockerfile 文件 …...

如何在Ubuntu上安装和配置Git

版本控制系统&#xff08;VCS&#xff09;是软件开发过程中不可或缺的工具之一&#xff0c;它帮助开发者跟踪代码变更、协作开发以及管理不同版本的项目。Git作为当前最流行的分布式版本控制系统&#xff0c;因其高效性和灵活性而广受青睐。本文将指导你如何在Ubuntu操作系统上…...

FPGA 21 ,深入理解 Verilog 中的基数,以及二进制数与十进制数之间的关系( Verilog中的基数 )

目录 前言 一. 基数基础 1.1 基数介绍 2.1 基数符号 3.1 二进制数 二. 二进制与十进制数 三. 二进制数 3.1 定义寄存器类型变量 3.2 定义线网类型变量 3.3 赋值操作 3.4 解析二进制数为十进制数 四. 代码示例 五. 注意事项 六. 更多操作 前言 在Verilog中&#…...

【redis】redis-cli命令行工具的使用

redis-cli命令行工具是一个功能强大的Redis客户端&#xff0c;它允许用户与Redis数据库进行交互和管理。 以下是一些常用参数的使用说明&#xff1a; 基本连接参数 -h, --host <hostname>&#xff1a;指定要连接的Redis服务器的主机名或IP地址。如果未指定&#xff0c;…...

使用Matplotlib显示中文的方法

1 问题提出 使用图1所示的代码进行matplotlib绘图时&#xff0c;因为其默认不支持中文&#xff0c;此时无法显示正确内容&#xff0c;如图2所示。 图1 matplotlib绘图绘图代码 图2 matplotlib无法显示中文 2 问题解决 2.1 设置全局字体 在图1所示的代码中&#xff0c;第13…...

SQL Server2022详细安装教程

1. 打开SQL Server官网&#xff1a;SQL Server 下载 | Microsoft 2. 选择Developer版 3. 下载好安装包&#xff0c;打开&#xff0c;选择自定义 4. 选择下载位置&#xff0c;最好不要在C盘即主磁盘即可。等待下载 5. 下载成功之后会弹出这个框 6. 点击“安装”&#…...

家里温度随心控,假期出行更舒适~

春节假期马上到来啦&#xff01;这是放松身心、陪伴家人的最佳时机~      但旅途结束的温差变化、空气质量问题是否让你有些担忧呢&#xff1f;      别担心&#xff01;有了约克VRF中央空调&#xff0c;让你的假期更加舒心无忧~      清新空气&#xff0c;自在出游…...

压力测试详解

压力测试 压力测试是一种软件测试&#xff0c;用于验证软件应用程序的稳定性和可靠性。压力测试的目标是在极其沉重的负载条件下测量软件的健壮性和错误处理能力&#xff0c;并确保软件在危急情况下不会崩溃。它甚至可以测试超出正常工作点的测试&#xff0c;并评估软件在极端…...

从epoll事件的视角探讨TCP:三次握手、四次挥手、应用层与传输层之间的联系

目录 一、应用层与TCP之间的联系 二、 当通信双方中的一方如客户端主动断开连接时&#xff0c;仅是在客户端的视角下连接已经断开&#xff0c;在服务端的眼中&#xff0c;连接依然存在&#xff0c;为什么&#xff1f;——触发EPOLLRDHUP事件&#xff1a;对端关闭连接或停止写…...

Redis复制(replica)

Redis主从复制 [Redis主从复制]&#xff08;replica&#xff09;是一个多Redis实例进行数据同步的过程&#xff0c;其中一个实例是主实例&#xff08;Master&#xff09;&#xff0c;其他实例是从实例&#xff08;Slave&#xff09;。主实例负责处理命令请求&#xff0c;而从实…...

[云讷科技] 用于软件验证的仿真环境

我们使用Pursuit自动驾驶仪为各种场景设计仿真环境&#xff0c;以便用户可以在模拟环境中直接验证他们的软件&#xff0c;无需现场测试。该环境基于Gazebo引擎。 1. 工作区目录 模拟环境的工作区位于提供的U盘中的~/pursuit_space/sitl_space_pursuit中。用户可以按照用户手册…...

使用 Vite 和 Vue 框架创建组件库

在前端开发中&#xff0c;组件化开发已成为一种高效、可维护的方式。通过创建组件库&#xff0c;不仅可以提高代码复用率&#xff0c;还能方便地在不同项目之间共享组件。本文将详细介绍如何使用 Vite 和 Vue 框架创建一个组件库&#xff0c;并将其导出供其他项目使用。为保持一…...

【数据结构学习笔记】19:跳表(Skip List)

介绍 跳表是一个能在 O ( n l o g n ) O(nlogn) O(nlogn)时间完成查找、插入、删除的数据结构&#xff0c;相比于树形结构优点就是很好写&#xff08;所以也用于实现Redis ZSet&#xff09;。其核心思想就是维护一个元素有序的&#xff0c;能随机提升索引层数的链表。最下面一…...

【8】深入理解 Go 语言中的协程-从基础到高级应用

文章目录 一、引言 &#x1f31f;二、协程基础概念 &#x1f9d0;&#xff08;一&#xff09;什么是协程&#xff08;二&#xff09;协程与线程、进程的区别三、协程的创建与启动 &#x1f680;&#xff08;一&#xff09;使用 go 关键字创建协程&#xff08;二&#xff09;简单…...

深入理解 ECMAScript 2024 新特性:字符串 isWellFormed 方法

ECMAScript 2024 引入了一个新的字符串实例方法&#xff1a;String.prototype.isWellFormed。这一新增功能是为了帮助开发者更容易地验证字符串是否为有效的 Unicode 文本。本文将详细介绍这一方法的使用场景、实现原理及其在实际应用中的价值。 String.prototype.isWellFormed…...

算法分析与设计之贪心算法

文章目录 前言一、Greedy Algorithms1.1 贪心选择性质1.2 最优子结构性质1.3 正确性证明 二、典型例题2.1 Interval Scheduling间隔调度2.2 Interval Partitioning最少间教室排课2.3 Selecting Breakpoints选择加油站停靠点2.4 硬币找零2.5 Scheduling to Minimizing Lateness2…...

Centos 宝塔安装

yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh 安装成功界面 宝塔说明文档 https://www.bt.cn/admin/servers#wcu 或者可以注册宝塔账号 1 快速部署 安装docker 之后 2 需要在usr/bin下下载do…...

蓝桥与力扣刷题(709 转换成小写字母)

题目&#xff1a;给你一个字符串 s &#xff0c;将该字符串中的大写字母转换成相同的小写字母&#xff0c;返回新的字符串。 示例 1&#xff1a; 输入&#xff1a;s "Hello" 输出&#xff1a;"hello"示例 2&#xff1a; 输入&#xff1a;s "here…...

Redis的过期策略、内存淘汰机制

Redis只能存5G数据&#xff0c;可是你写了10G&#xff0c;那会删5G的数据。怎么删的&#xff1f;还有&#xff0c;你的数据已经设置了过期时间&#xff0c;但是时间到了&#xff0c;为什么内存占用率还是比较高? 一、Redis的过期策略 Redis采用的是定期删除惰性删除策略。 1…...

【JVM】- 内存结构

引言 JVM&#xff1a;Java Virtual Machine 定义&#xff1a;Java虚拟机&#xff0c;Java二进制字节码的运行环境好处&#xff1a; 一次编写&#xff0c;到处运行自动内存管理&#xff0c;垃圾回收的功能数组下标越界检查&#xff08;会抛异常&#xff0c;不会覆盖到其他代码…...

Java多线程实现之Callable接口深度解析

Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...

Mac下Android Studio扫描根目录卡死问题记录

环境信息 操作系统: macOS 15.5 (Apple M2芯片)Android Studio版本: Meerkat Feature Drop | 2024.3.2 Patch 1 (Build #AI-243.26053.27.2432.13536105, 2025年5月22日构建) 问题现象 在项目开发过程中&#xff0c;提示一个依赖外部头文件的cpp源文件需要同步&#xff0c;点…...

视频行为标注工具BehaviLabel(源码+使用介绍+Windows.Exe版本)

前言&#xff1a; 最近在做行为检测相关的模型&#xff0c;用的是时空图卷积网络&#xff08;STGCN&#xff09;&#xff0c;但原有kinetic-400数据集数据质量较低&#xff0c;需要进行细粒度的标注&#xff0c;同时粗略搜了下已有开源工具基本都集中于图像分割这块&#xff0c…...

uniapp手机号一键登录保姆级教程(包含前端和后端)

目录 前置条件创建uniapp项目并关联uniClound云空间开启一键登录模块并开通一键登录服务编写云函数并上传部署获取手机号流程(第一种) 前端直接调用云函数获取手机号&#xff08;第三种&#xff09;后台调用云函数获取手机号 错误码常见问题 前置条件 手机安装有sim卡手机开启…...

多模态图像修复系统:基于深度学习的图片修复实现

多模态图像修复系统:基于深度学习的图片修复实现 1. 系统概述 本系统使用多模态大模型(Stable Diffusion Inpainting)实现图像修复功能,结合文本描述和图片输入,对指定区域进行内容修复。系统包含完整的数据处理、模型训练、推理部署流程。 import torch import numpy …...

解读《网络安全法》最新修订,把握网络安全新趋势

《网络安全法》自2017年施行以来&#xff0c;在维护网络空间安全方面发挥了重要作用。但随着网络环境的日益复杂&#xff0c;网络攻击、数据泄露等事件频发&#xff0c;现行法律已难以完全适应新的风险挑战。 2025年3月28日&#xff0c;国家网信办会同相关部门起草了《网络安全…...

Python Einops库:深度学习中的张量操作革命

Einops&#xff08;爱因斯坦操作库&#xff09;就像给张量操作戴上了一副"语义眼镜"——让你用人类能理解的方式告诉计算机如何操作多维数组。这个基于爱因斯坦求和约定的库&#xff0c;用类似自然语言的表达式替代了晦涩的API调用&#xff0c;彻底改变了深度学习工程…...

MinIO Docker 部署:仅开放一个端口

MinIO Docker 部署:仅开放一个端口 在实际的服务器部署中,出于安全和管理的考虑,我们可能只能开放一个端口。MinIO 是一个高性能的对象存储服务,支持 Docker 部署,但默认情况下它需要两个端口:一个是 API 端口(用于存储和访问数据),另一个是控制台端口(用于管理界面…...

数学建模-滑翔伞伞翼面积的设计,运动状态计算和优化 !

我们考虑滑翔伞的伞翼面积设计问题以及运动状态描述。滑翔伞的性能主要取决于伞翼面积、气动特性以及飞行员的重量。我们的目标是建立数学模型来描述滑翔伞的运动状态,并优化伞翼面积的设计。 一、问题分析 滑翔伞在飞行过程中受到重力、升力和阻力的作用。升力和阻力与伞翼面…...