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的保存值,不会引起组件的更新渲染。

总结

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

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

构建高可用和高防御力的云服务架构第五部分:PolarDB(5/5)

引言 云计算与数据库服务 云计算作为一种革命性的技术&#xff0c;已经深刻改变了信息技术行业的面貌。它通过提供按需分配的计算资源&#xff0c;使得数据存储、处理和分析变得更加灵活和高效。在云计算的众多服务中&#xff0c;数据库服务扮演着核心角色。数据库服务不仅负…

【C++高阶】深入理解C++ I/O流:标准库中的隐藏宝石

&#x1f4dd;个人主页&#x1f339;&#xff1a;Eternity._ ⏩收录专栏⏪&#xff1a;C “ 登神长阶 ” &#x1f921;往期回顾&#x1f921;&#xff1a;C 特殊类 &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; ❀ C IO流 &#x1f4d2;1. C语言的输入…

Stable Diffusion 优秀博客转载

初版论文地址&#xff1a;https://arxiv.org/pdf/2112.10752 主要流程图&#xff1a; Latent Diffusion Models&#xff08;LDMs&#xff09; DDPM是"Denoising Diffusion Probabilistic Models"的缩写&#xff0c; 去噪扩散概率模型 博客&#xff1a; 【论文阅读…

单发超快光场成像技术研究进展

摘要&#xff1a;单发超快光场成像技术能够在更广泛的条件下表征瞬态事件&#xff0c;为探索不可重复和难以再现的超快现象打开了大门&#xff0c;是探索未知领域必不可少的工具&#xff0c;具有巨大的科学技术应用价值。介绍近年来单发超快光场成像技术的研究进展&#xff0c;…

【Finetune】(三)、transformers之P-Tuning微调

文章目录 0、P-Tuning基本原理1、代码实战1.1、导包1.2、加载数据集1.3、数据集预处理1.4、创建模型1.5、P-tuning*1.5.1、配置文件1.5.2、创建模型 1.6、配置训练参数1.7、创建训练器1.8、模型训练1.9、模型推理 0、P-Tuning基本原理 P-Tuning的基本思想是在prompt-tuning的基…

预付费计量系统实体模型

1. 预付费计量系统实体模型 A generic entity model for electricity payment metering systems is shown in Figure 2. Although it provides a limited perspective, it does serve to convey certain essential concepts. 关于电子式预付费电表系统的实体模型见图 2…

如何选购笔记本电脑?要看哪些参数?

如何选购笔记本电脑&#xff1f;要看哪些参数&#xff1f; 文章目录 如何选购笔记本电脑&#xff1f;要看哪些参数&#xff1f;1、CPU&#xff08;中央处理器&#xff09;2、GPU&#xff08;显卡&#xff09;3、RAM&#xff08;内存&#xff09;4、硬盘5、屏幕6、散热7、接口8、…

前端工程化4:从0到1构建完整的前端监控平台

前言 一套完整的前端监控系统的主要部分&#xff1a; 数据上报方式数据上送时机性能数据采集错误数据采集用户行为采集定制化指标监控sdk 监控的目的&#xff1a; 一、数据上报方式 本文的方案是&#xff0c;优先navigator.sendBeacon&#xff0c;降级使用1x1像素gif图片…

Java | Leetcode Java题解之第417题太平洋大西洋水流问题

题目&#xff1a; 题解&#xff1a; class Solution {static int[][] dirs {{-1, 0}, {1, 0}, {0, -1}, {0, 1}};int[][] heights;int m, n;public List<List<Integer>> pacificAtlantic(int[][] heights) {this.heights heights;this.m heights.length;this.n…

[数据结构与算法·C++] 笔记 2.1 线性表

线性结构 概念 二元组 B ( K , R ) B(K,R) B(K,R) K a 0 , a 1 , . . . , a n − 1 K{a_0,a_1,...,a_{n-1}} Ka0​,a1​,...,an−1​ ( R r R{r} Rr) 有一个唯一的开始结点&#xff0c;它没有前驱&#xff0c;有一个唯一的直接后继一个唯一的终止结点&#xff0c;它有一个…

了解你的GPU:深入探讨AMD SMI

Getting to Know Your GPU: A Deep Dive into AMD SMI — ROCm Blogs 2024年9月17日 作者&#xff1a;Matt Elliott 对于使用AMD硬件的系统管理员和高级用户来说&#xff0c;性能优化和高效的资源监控至关重要。AMD系统管理界面命令行工具amd-smi正是为了解决这些需求而设计的。…

uni-app功能 1. 实现点击置顶,滚动吸顶2.swiper一个轮播显示一个半内容且实现无缝滚动3.穿透修改uni-ui的样式

uni-app项目中遇到的功能 文章目录 uni-app项目中遇到的功能一、实现点击置顶&#xff0c;滚动吸顶、1.1、scroll-view设置不生效的原因和解决办法1.2 功能代码 二、swiper一个轮播显示一个半内容且实现无缝滚动三、穿透修改uni-ui的样式 一、实现点击置顶&#xff0c;滚动吸顶…

基于STM32残疾人辅助行走系统

要么是家人陪伴&#xff0c;要么是类似导盲犬的动物辅助&#xff0c;家人还有事要做&#xff0c;不一定实时在场&#xff0c;而动物辅助也可能会出现新的问题&#xff0c;威胁残疾人身体安全。因此利用现代计算机技术、传感器检测设备和物联网技术设计这一款辅助残疾人行走的智…

【FPGA】FPGA芯片结构

目录 1 可编程输出/输出单元&#xff08;IOB&#xff09;2 可配置逻辑块&#xff08;CLB&#xff09;3 数字时钟管理模块&#xff08;DCM&#xff09;4 嵌入式块存储器&#xff08;BRAM&#xff09;5 布线资源6 内嵌功能模块&#xff08;专用IP单元&#xff09;6.1 PLL&#xf…

MISC - 第一天(stegsolve图片隐写解析器、QR research、binwalk,dd文件分离,十六进制文件编辑器)

前言 各位师傅大家好&#xff0c;我是qmx_07&#xff0c;最近更新Buuctf在线测评中的MISC杂项内容 介绍 BUUCTF:https://buuoj.cn/ &#xff0c;整合了各大 CTF 赛事题目&#xff0c;类型丰富&#xff0c;涵盖了Web 安全、密码学、系统安全、逆向工程、代码审计等多个领域 …

C#/.NET/.NET Core技术前沿周刊 | 第 6 期(2024年9.16-9.22)

前言 C#/.NET/.NET Core技术前沿周刊&#xff0c;你的每周技术指南针&#xff01;记录、追踪C#/.NET/.NET Core领域、生态的每周最新、最实用、最有价值的技术文章、社区动态、优质项目和学习资源等。让你时刻站在技术前沿&#xff0c;助力技术成长与视野拓宽。 欢迎投稿&…

数据库 MySQL 是否需要容器化?

容器的定义&#xff1a;容器是为了解决“在切换运行环境时&#xff0c;如何保证软件能够正常运行”这一问题。 目前&#xff0c;容器和 Docker 依旧是技术领域最热门的词语&#xff0c;无状态的服务容器化已经是大势所趋&#xff0c;同时也带来了一个热点问题被大家所争论不以…

2024PHP彩虹工具网源码一个多功能工具箱程序支持72种常用站长和开发等工具

安装&#xff1a; PHP>7.4 伪静态设置Thinkphp 设置/public为网站运行目录 访问你的域名/install进行安装即可 安装扩展 sg11 &#xff0c;fileinfo &#xff0c; ionCube 常用功能 站长工具&#xff1a;ICP备案查询、IP地址查询、域名Whios查询、腾讯域名拦截查询、Mysql…

基于yolov5的中国交通标志TT100K检测系统python源码+onnx模型+评估指标曲线+精美GUI界面

【算法介绍】 基于YOLOv5的中国交通标志TT100K检测系统是一种利用深度学习技术实现高效、准确交通标志识别的系统。该系统采用YOLOv5作为核心检测算法&#xff0c;凭借其速度快、准确性高的特点&#xff0c;在实时交通标志识别领域展现出显著优势。 TT100K数据集作为该系统的…

调用本地大模型服务出现PermissionDeniedError的解决方案

大家好,我是爱编程的喵喵。双985硕士毕业,现担任全栈工程师一职,热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…