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

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元素实例&#xff0c;可以通过React.CreateRef或者回调函数的方式去获取。语法&#xff1a;const refContainer useRef(initialValue);使用场景&#xff1a;在 React 中进行 DOM 操作时&#xff0c;用来获取 DOM作用&#xff1a;返回一个带有 …...

GPT对话知识库——将寄存器中的一位数据读到变量中需要什么步骤?C语言中掩码的作用。

目录 1&#xff0c;问&#xff1a; 1&#xff0c;答&#xff1a; 1. 确定目标寄存器地址 2. 定位目标位 位操作的基本步骤&#xff1a; 3. 示例代码 示例步骤&#xff1a; 4. 详细解释步骤 5. 举例 6. 常见用法 总结 注&#xff1a; C语言中掩码的作用&#xff1a…...

【计算机网络】运输层协议解析

前言 运输层直接为应用进程间的逻辑通信提供服务。运输层向高层用户屏蔽了下面网络核心细节&#xff08;如网络拓扑、路由选择协议等&#xff09;它使应用进程看见的就好像是在两个运输层实体之间有一条端到端的逻辑通信信道。 UDP与TCP对比 UDP&#xff1a; 无连接 支持一对…...

Redis存储原理

前言 我们从redis服务谈起&#xff0c;redis是单reactor&#xff0c;命令在redis-server线程处理。还有若干读写IO线程负责IO操作&#xff08;redis6.0之后&#xff0c;Redis之pipeline与事务&#xff09;。此外还有一个内存池线程负责内存管理、一个后台文件线程负责大文件的关…...

PHP、Java等其他语言转Go时选择GoFly快速快速开发框架指南

概要 经过一年多的发展GoFly快速开发框架已被一千多家科技企业或开发者用于项目开发&#xff0c;它的简单易学得到其他语言转Go首选框架。且企业版的发展为GoFly社区提供资金&#xff0c;这使得GoFly快速框架得到良好的发展&#xff0c;GoFly技术团队加大投入反哺科技企业和开…...

【MySQL】获取最近7天和最近14天的订单数量,使用MySQL详细写出,使用不同的方法

1. 获取最近7天和最近14天的订单数量&#xff0c;使用MySQL详细写出&#xff0c;使用不同的方法 要获取最近7天和最近14天的订单数量&#xff0c;我们可以使用不同的方法来优化查询性能。以下是两种方法&#xff1a; 1.1 方法一&#xff1a;使用日期计算 SELECTSUM(CASE WHE…...

WebView2新增、修改、删除、禁用右键菜单相关操作。

参考链接&#xff1a;WebView2操作右键菜单...

使用vue创建项目

一、安装环境 二、创建vue框架&#xff08;创建文件夹&#xff0c;摁shift鼠标右键 打开&#xff09; 1、项目配置 2、新增目录 三、路径别名配置 输入/ ,VSCode会联想出src下的所有子目录和文件&#xff0c;统一文件路径访问时不容易出错 四、ElementPlus配置 1、组件分为…...

Apache CVE-2021-41773 漏洞攻略

漏洞简介 该漏洞是由于Apache HTTP Server 2.4.49版本存在⽬录穿越漏洞,在路径穿越⽬录 <Directory/>Require all granted</Directory>允许被访问的的情况下&#xff08;默认开启&#xff09;&#xff0c;攻击者可利⽤该路径穿越漏洞读取到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 如需转载&#xff0c;请输入&#xff1a;htt…...

亚马逊IP关联揭秘:发生ip关联如何处理

在亚马逊这一全球领先的电商平台上&#xff0c;IP关联是一个不可忽视的问题&#xff0c;尤其是对于多账号运营的卖家而言。本文将深入解析亚马逊IP关联的含义、影响以及应对策略&#xff0c;帮助卖家更好地理解和应对这一问题。 什么是亚马逊IP关联&#xff1f; 亚马逊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&#xff0c;且能在Pycharm中编译Python程序并运行。 但是&#xff0c;在macOS终端&#xff0c;运行Python&#xff0c;报错。 首先要确认你在macOS系统下&#xff0c;是否安装了Python。 如果安…...

NoSql数据库Redis知识点

数据库的分类 关系型数据库 &#xff0c;是建立在关系模型基础上的数据库&#xff0c;其借助于集合代数等数学概念和方法来处理数据库 中的数据主流的 MySQL 、 Oracle 、 MS SQL Server 和 DB2 都属于这类传统数据库。 NoSQL 数据库 &#xff0c;全称为 Not Only SQL &a…...

Redis 使用指南

Redis 使用指南 概述 Redis 是一个开源的、基于内存的数据结构存储系统&#xff0c;可以用作数据库、缓存和消息中间件。它支持多种类型的数据结构&#xff0c;如字符串&#xff08;strings&#xff09;、哈希&#xff08;hashes&#xff09;、列表&#xff08;lists&#xf…...

c++与cmake:完整的C++项目构建注意事项

个人博客:Sekyoro的博客小屋 个人网站:Proanimer的个人网站 最近常常使用cmake构建c项目有感,从创建项目到打包发布总结一下需要注意的事情. 项目组织方式 具体的项目组织方式因人而异,这里推荐一种,在src目录中创建模块目录,再在include目录中常见对应的同名目录包含头文件,…...

Linux自主学习篇

用户及权限管理 sudo 是 "superuser do" 的缩写&#xff0c;是一个在类 Unix 操作系统&#xff08;如 Linux 和 macOS&#xff09;中使用的命令。它允许普通用户以超级用户&#xff08;root 用户&#xff09;的身份执行命令&#xff0c;从而获得更高的权限。 useradd…...

MQ入门(4)

Erlang&#xff1a;面向高并发的 单机的吞吐量就是并发性&#xff1a;Rabbitmq是10w左右&#xff08;现实项目中已经足够用了&#xff09;&#xff0c;RocketMQ是10w到20w&#xff0c;Kafka是100w左右。 公司里的并发&#xff08;QPS&#xff09; 大部分的公司每天的QPS大概…...

linux下共享内存的3种使用方式

进程是资源封装的单位&#xff0c;内存就是进程所封装的资源的一种。一般情况下&#xff0c;进程间的内存是相互隔离的&#xff0c;也就是说一个进程不能访问另一个进程的内存。如果一个进程想要访问另一个进程的内存&#xff0c;那么必须要进过内核这个桥梁&#xff0c;这就是…...

伊丽莎白·赫莉为杂志拍摄一组素颜写真,庆祝自己荣膺全球最性感女人第一名

语录&#xff1a;女性应该做任何她们想做的事&#xff0c;批评她们的人都见鬼去吧。 伊丽莎白赫莉为《Maxim》杂志拍摄一组素颜写真&#xff0c;庆祝自己荣膺全球最性感女人第一名 伊丽莎白赫莉 (Elizabeth Hurley) 实在是太惊艳了&#xff0c;如今&#xff0c;《马克西姆》杂…...

Android应用自启动那些事儿:从系统广播到权限管理的完整避坑指南

Android应用自启动全解析&#xff1a;从广播监听到底层权限管控的实战指南 当你的手机开机时&#xff0c;是否注意到某些应用会自动在后台启动&#xff1f;这种现象背后隐藏着Android系统复杂的广播机制与权限管理体系。本文将带你深入探索应用自启动的技术原理&#xff0c;并揭…...

ChatGLM3-6B效果展示:32k长文本流式响应真实对话作品集

ChatGLM3-6B效果展示&#xff1a;32k长文本流式响应真实对话作品集 本文所有对话案例均基于本地部署的ChatGLM3-6B-32k模型生成&#xff0c;展示了真实场景下的智能对话效果 1. 项目核心能力概览 ChatGLM3-6B-32k是一个专门为本地部署优化的智能对话模型&#xff0c;具备三大核…...

Pixel Dimension Fissioner 商业设计案例:为品牌生成动态视觉识别系统素材

Pixel Dimension Fissioner 商业设计案例&#xff1a;为品牌生成动态视觉识别系统素材 1. 动态视觉识别的数字革命 当品牌视觉从静态纸张跃入数字屏幕&#xff0c;传统VI手册里的规范条款突然显得力不从心。去年某国际饮料品牌做过一项调研&#xff1a;在Instagram上&#xf…...

软件测试在AI项目中的实践:PyTorch 2.8模型单元测试指南

软件测试在AI项目中的实践&#xff1a;PyTorch 2.8模型单元测试指南 1. 为什么AI项目也需要软件测试&#xff1f; 在传统软件开发中&#xff0c;单元测试早已成为标配。但当项目转向AI领域时&#xff0c;很多开发者却忽略了测试的重要性。这就像造一辆车只关注发动机功率&…...

从边缘网关到上位机:CODESYS OPC UA通信的5个关键配置项与一个避坑指南

从边缘网关到上位机&#xff1a;CODESYS OPC UA通信的5个关键配置项与一个避坑指南 在工业自动化领域&#xff0c;OPC UA已经成为设备间通信的事实标准协议。不同于传统的OPC DA&#xff0c;OPC UA提供了跨平台、安全可靠的数据传输能力。然而在实际部署中&#xff0c;特别是使…...

FireRed-OCR Studio详细步骤:PDF截图→OCR→Markdown→Git版本管理全流程

FireRed-OCR Studio详细步骤&#xff1a;PDF截图→OCR→Markdown→Git版本管理全流程 1. 工具介绍与核心价值 FireRed-OCR Studio是一款基于Qwen3-VL多模态大模型开发的工业级文档解析工具。它能够将纸质文档、PDF截图等图像内容精准转换为结构化的Markdown格式&#xff0c;特…...

杰理之中控耳机支持通话中进行BLE广播的修改【篇】

修改ESCO和BLE广播的调度策略...

LY68L6400 SRAM的QSPI驱动优化:RT-Thread在STM32H743上的性能调优指南

LY68L6400 SRAM的QSPI驱动优化&#xff1a;RT-Thread在STM32H743上的性能调优指南 在嵌入式系统开发中&#xff0c;外部SRAM常被用作高速缓存或扩展内存&#xff0c;而QSPI接口因其高带宽特性成为连接SRAM的理想选择。LY68L6400作为一款64Mb的QSPI SRAM&#xff0c;在STM32H743…...

Flutter中使用Drift实现跨平台数据库管理的实战指南

1. 为什么选择Drift作为Flutter数据库解决方案 第一次接触Flutter数据库选型时&#xff0c;我像大多数开发者一样纠结于sqflite和hive之间。直到项目需要同时支持Android、iOS和Web三端时&#xff0c;才发现Drift&#xff08;原Moor&#xff09;才是真正的跨平台利器。这个基于…...

Windows下用Frida玩转API Hook:从修改MessageBox到主动调用(附完整代码)

Windows平台Frida实战&#xff1a;从API Hook到主动调用的逆向工程指南 逆向工程的世界里&#xff0c;Windows平台始终占据着特殊地位。作为最广泛使用的桌面操作系统&#xff0c;Windows API的Hook技术一直是安全研究人员和逆向工程师的必备技能。而Frida作为动态插桩框架的瑞…...