react hooks--useRef
基本用法
- 在类组件中获取一个dom元素实例,可以通过React.CreateRef或者回调函数的方式去获取。
- 语法:
const refContainer = useRef(initialValue); - 使用场景:在 React 中进行 DOM 操作时,用来获取 DOM
- 作用:返回一个带有 current 属性的可变对象,通过该对象就可以进行 DOM 操作了。
const inputRef = useRef(null)
解释:
- 参数:在获取 DOM 时,一般都设置为 null
- 返回值:包含 current 属性的对象。

- 注意:只要在 React 的函数组件中进行 DOM 操作,都可以通过 useRef Hook 来获取 DOM(比如,获取 DOM 的宽高等)。
- 注意:useRef不仅仅可以用于操作DOM,还可以操作组件
通过useRef获取DOM元素或组件实例:
import React from 'react'
import {useRef} from 'react'export default function UseRef() {let inputRef = useRef()function login() {console.log(inputRef.current.value)}return (<div><input ref={inputRef} placeholder={'请输入账号'} /><button onClick={login}>登录</button></div>)
}
绑定ref后,和React.createRef返回的结构一致,通过.current获取到元素。
useRef保存数据
在文件中定义一个全局变量保存数据
存在 bug
UseRef.jsx
import {useRef, useState} from "react";let count = 0;export default function UseRef() {console.log('ref')let inputRef = useRef()function login() {count += 1;}function printCount() {console.log(count)}return (<div><input ref={inputRef} placeholder={'请输入账号'} /><button onClick={login}>登录</button><button onClick={printCount}>打印count</button></div>)
}
这种全局保存变量的方式,有问题,原因在于在组件中多次使用这个组件会共享数据,可能会导致一些bug存在。
import UseRef from './components/UseRef'export default function App() {return (<div><UseRef /><UseRef /></div>)
}
在函数组件中直接定义变量
存在 bug
import {useRef, useState} from "react";export default function UseRef() {let count = 0;console.log('ref')let inputRef = useRef()let [name, setName] = useState('张三')function login() {count += 1;}function printCount() {console.log(count)}return (<div><input ref={inputRef} placeholder={'请输入账号'} /><button onClick={login}>登录</button><button onClick={printCount}>打印count</button>姓名:{name}<button onClick={() => setName('李四')}>修改name</button></div>)
}
这种方式可以短暂的保存值,但是一旦函数组件更新渲染,那么这个变量的值就会重置
原因是因为函数组件更新渲染时,代码从上往下重新运行。
使用useRef保存值
在整个生命周期里ref里存储的都是同一个,这样就可以----
解决闭包陷阱问题
import {useRef, useState} from "react";export default function UseRef() {// let count = 0;let count = useRef(0);console.log('ref')let inputRef = useRef()let [name, setName] = useState('张三')function login() {// console.log(inputRef.current.value)count.current += 1;}function printCount() {console.log(count.current)}return (<div><input ref={inputRef} placeholder={'请输入账号'} /><button onClick={login}>登录</button><button onClick={printCount}>打印count</button>姓名:{name}<button onClick={() => setName('李四')}>修改name</button></div>)
}
通过useRef保存值,可以长期存贮,不会重置
使用useRef定义变量的好处:
- 修改state后ref保存的数据不会变化
- 多个组件的数据,不会共享,类似于class的实例字段
- 修改ref的保存值,不会引起组件的更新渲染。
总结

相关文章:
react hooks--useRef
基本用法 在类组件中获取一个dom元素实例,可以通过React.CreateRef或者回调函数的方式去获取。语法:const refContainer useRef(initialValue);使用场景:在 React 中进行 DOM 操作时,用来获取 DOM作用:返回一个带有 …...
GPT对话知识库——将寄存器中的一位数据读到变量中需要什么步骤?C语言中掩码的作用。
目录 1,问: 1,答: 1. 确定目标寄存器地址 2. 定位目标位 位操作的基本步骤: 3. 示例代码 示例步骤: 4. 详细解释步骤 5. 举例 6. 常见用法 总结 注: C语言中掩码的作用:…...
【计算机网络】运输层协议解析
前言 运输层直接为应用进程间的逻辑通信提供服务。运输层向高层用户屏蔽了下面网络核心细节(如网络拓扑、路由选择协议等)它使应用进程看见的就好像是在两个运输层实体之间有一条端到端的逻辑通信信道。 UDP与TCP对比 UDP: 无连接 支持一对…...
Redis存储原理
前言 我们从redis服务谈起,redis是单reactor,命令在redis-server线程处理。还有若干读写IO线程负责IO操作(redis6.0之后,Redis之pipeline与事务)。此外还有一个内存池线程负责内存管理、一个后台文件线程负责大文件的关…...
PHP、Java等其他语言转Go时选择GoFly快速快速开发框架指南
概要 经过一年多的发展GoFly快速开发框架已被一千多家科技企业或开发者用于项目开发,它的简单易学得到其他语言转Go首选框架。且企业版的发展为GoFly社区提供资金,这使得GoFly快速框架得到良好的发展,GoFly技术团队加大投入反哺科技企业和开…...
【MySQL】获取最近7天和最近14天的订单数量,使用MySQL详细写出,使用不同的方法
1. 获取最近7天和最近14天的订单数量,使用MySQL详细写出,使用不同的方法 要获取最近7天和最近14天的订单数量,我们可以使用不同的方法来优化查询性能。以下是两种方法: 1.1 方法一:使用日期计算 SELECTSUM(CASE WHE…...
WebView2新增、修改、删除、禁用右键菜单相关操作。
参考链接:WebView2操作右键菜单...
使用vue创建项目
一、安装环境 二、创建vue框架(创建文件夹,摁shift鼠标右键 打开) 1、项目配置 2、新增目录 三、路径别名配置 输入/ ,VSCode会联想出src下的所有子目录和文件,统一文件路径访问时不容易出错 四、ElementPlus配置 1、组件分为…...
Apache CVE-2021-41773 漏洞攻略
漏洞简介 该漏洞是由于Apache HTTP Server 2.4.49版本存在⽬录穿越漏洞,在路径穿越⽬录 <Directory/>Require all granted</Directory>允许被访问的的情况下(默认开启),攻击者可利⽤该路径穿越漏洞读取到Web⽬录之外的其他⽂件在…...
【redis-02】深入理解redis中RBD和AOF的持久化
redis系列整体栏目 内容链接地址【一】redis基本数据类型和使用场景https://zhenghuisheng.blog.csdn.net/article/details/142406325【二】redis的持久化机制和原理https://zhenghuisheng.blog.csdn.net/article/details/142441756 如需转载,请输入:htt…...
亚马逊IP关联揭秘:发生ip关联如何处理
在亚马逊这一全球领先的电商平台上,IP关联是一个不可忽视的问题,尤其是对于多账号运营的卖家而言。本文将深入解析亚马逊IP关联的含义、影响以及应对策略,帮助卖家更好地理解和应对这一问题。 什么是亚马逊IP关联? 亚马逊IP关联…...
jQuery Mobile 弹窗
jQuery Mobile 弹窗 引言 在移动设备上,弹窗是一种常见的用户界面元素,用于显示信息、获取用户输入或提供特定功能。jQuery Mobile 是一个流行的移动框架,它提供了丰富的组件来帮助开发者创建响应式的移动界面。本文将重点介绍如何在 jQuery Mobile 中使用弹窗(Popup)组…...
【macOS】【zsh报错】zsh: command not found: python
【macOS】【zsh Error】zsh: command not found: python 本地已经安装了Python,且能在Pycharm中编译Python程序并运行。 但是,在macOS终端,运行Python,报错。 首先要确认你在macOS系统下,是否安装了Python。 如果安…...
NoSql数据库Redis知识点
数据库的分类 关系型数据库 ,是建立在关系模型基础上的数据库,其借助于集合代数等数学概念和方法来处理数据库 中的数据主流的 MySQL 、 Oracle 、 MS SQL Server 和 DB2 都属于这类传统数据库。 NoSQL 数据库 ,全称为 Not Only SQL &a…...
Redis 使用指南
Redis 使用指南 概述 Redis 是一个开源的、基于内存的数据结构存储系统,可以用作数据库、缓存和消息中间件。它支持多种类型的数据结构,如字符串(strings)、哈希(hashes)、列表(lists…...
c++与cmake:完整的C++项目构建注意事项
个人博客:Sekyoro的博客小屋 个人网站:Proanimer的个人网站 最近常常使用cmake构建c项目有感,从创建项目到打包发布总结一下需要注意的事情. 项目组织方式 具体的项目组织方式因人而异,这里推荐一种,在src目录中创建模块目录,再在include目录中常见对应的同名目录包含头文件,…...
Linux自主学习篇
用户及权限管理 sudo 是 "superuser do" 的缩写,是一个在类 Unix 操作系统(如 Linux 和 macOS)中使用的命令。它允许普通用户以超级用户(root 用户)的身份执行命令,从而获得更高的权限。 useradd…...
MQ入门(4)
Erlang:面向高并发的 单机的吞吐量就是并发性:Rabbitmq是10w左右(现实项目中已经足够用了),RocketMQ是10w到20w,Kafka是100w左右。 公司里的并发(QPS) 大部分的公司每天的QPS大概…...
linux下共享内存的3种使用方式
进程是资源封装的单位,内存就是进程所封装的资源的一种。一般情况下,进程间的内存是相互隔离的,也就是说一个进程不能访问另一个进程的内存。如果一个进程想要访问另一个进程的内存,那么必须要进过内核这个桥梁,这就是…...
伊丽莎白·赫莉为杂志拍摄一组素颜写真,庆祝自己荣膺全球最性感女人第一名
语录:女性应该做任何她们想做的事,批评她们的人都见鬼去吧。 伊丽莎白赫莉为《Maxim》杂志拍摄一组素颜写真,庆祝自己荣膺全球最性感女人第一名 伊丽莎白赫莉 (Elizabeth Hurley) 实在是太惊艳了,如今,《马克西姆》杂…...
Linux链表操作全解析
Linux C语言链表深度解析与实战技巧 一、链表基础概念与内核链表优势1.1 为什么使用链表?1.2 Linux 内核链表与用户态链表的区别 二、内核链表结构与宏解析常用宏/函数 三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...
【JavaEE】-- HTTP
1. HTTP是什么? HTTP(全称为"超文本传输协议")是一种应用非常广泛的应用层协议,HTTP是基于TCP协议的一种应用层协议。 应用层协议:是计算机网络协议栈中最高层的协议,它定义了运行在不同主机上…...
深入理解JavaScript设计模式之单例模式
目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式(Singleton Pattern&#…...
第一篇:Agent2Agent (A2A) 协议——协作式人工智能的黎明
AI 领域的快速发展正在催生一个新时代,智能代理(agents)不再是孤立的个体,而是能够像一个数字团队一样协作。然而,当前 AI 生态系统的碎片化阻碍了这一愿景的实现,导致了“AI 巴别塔问题”——不同代理之间…...
vue3+vite项目中使用.env文件环境变量方法
vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量,这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...
什么是Ansible Jinja2
理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具,可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板,允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板,并通…...
OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波(Mean Shift Filtering)函数meanShiftFiltering()
操作系统:ubuntu22.04 OpenCV版本:OpenCV4.9 IDE:Visual Studio Code 编程语言:C11 算法描述 在 GPU 上对图像执行 均值漂移滤波(Mean Shift Filtering),用于图像分割或平滑处理。 该函数将输入图像中的…...
人机融合智能 | “人智交互”跨学科新领域
本文系统地提出基于“以人为中心AI(HCAI)”理念的人-人工智能交互(人智交互)这一跨学科新领域及框架,定义人智交互领域的理念、基本理论和关键问题、方法、开发流程和参与团队等,阐述提出人智交互新领域的意义。然后,提出人智交互研究的三种新范式取向以及它们的意义。最后,总结…...
在Mathematica中实现Newton-Raphson迭代的收敛时间算法(一般三次多项式)
考察一般的三次多项式,以r为参数: p[z_, r_] : z^3 (r - 1) z - r; roots[r_] : z /. Solve[p[z, r] 0, z]; 此多项式的根为: 尽管看起来这个多项式是特殊的,其实一般的三次多项式都是可以通过线性变换化为这个形式…...
LLaMA-Factory 微调 Qwen2-VL 进行人脸情感识别(二)
在上一篇文章中,我们详细介绍了如何使用LLaMA-Factory框架对Qwen2-VL大模型进行微调,以实现人脸情感识别的功能。本篇文章将聚焦于微调完成后,如何调用这个模型进行人脸情感识别的具体代码实现,包括详细的步骤和注释。 模型调用步骤 环境准备:确保安装了必要的Python库。…...
