浅谈React中的ref和useRef

目录

什么是useRef？

使用 ref 访问 DOM 元素

Ref和useRef之间的区别

Ref和useRef的使用案例

善用工具

结论

在各种 JavaScript 库和框架中，React 因其开发人员友好性和支持性而得到认可。

大多数开发人员发现 React 非常舒适且可扩展，因为它提供了钩子。钩子是 React 附带的内置 API，允许开发人员与 React的状态和生命周期功能进行交互。钩子在类内部不起作用，因此它们只能在功能组件中使用。开发人员还可以决定创建自定义钩子。

React 比大多数 UI 库更能让你重新思考设计标准，允许开发人员自定义UI组件，例如使用 React 和 JSX 的抽象机制而不是典型的 DOM 规范创建视图。

在本文中，我们将讨论 React钩子函数 useRef ，使用 ref 访问 DOM 以及 ref 和 useRef 之间的区别。

什么是useRef？

React 中包含的各种钩子之一是 useRef 钩子;它用于引用功能组件中的对象，并在重新渲染之间保留引用对象的状态。

useRef 有一个名为“current”的属性，用于随时检索引用对象的值，同时还接受初始值作为参数。您可以通过更新 current 值来更改引用对象的值。

以下是创建引用对象的方法：

import { useRef } from ‘react’const myComponent = () => {const refObj = useRef(initialValue)return (//…)
}

在上面的代码片段中，我们有一个要在应用程序中引用的对象 refObj ，要访问值或更新值，我们可以像这样调用 current 该属性：

// inside a function
const handleRefUpdate = () => {// accessing the referenced object’s valueconst value = refObj.current// updating the referenced object’s valuerefObj.current = newValue
}

您应该注意：

  • 引用对象的值在重新渲染之间保持不变。

  • 更新引用对象的值不会触发重新呈现。

使用 ref 访问 DOM 元素

请记住，DOM 元素也是对象，我们可以使用useRef引用它们。但是现在，我们需要利用另一个名为 ref。

ref 是一个 HTML 属性，它将引用的对象分配给 DOM 元素。让我们看看这是如何工作的：

import {useRef} from ‘react’const myComponent = () => {const elementRef = useRef()return (<input ref={elementRef} type=”text” />)
}

在上面的代码片段中，我们创建了一个新的引用对象，elementRef 并使用属性 ref 将其分配给输入标记。我们可以访问输入标签的值并像这样更新值：

const handleInput = () => {//accessing the input element valueconst textValue = elementRef.current.value// update the input element valueelementRef.current.value = “Hello World”
}

在上面的代码片段中，我们创建了一个函数，该函数获取输入元素的当前值并将其分配给 textValue。我们还将输入元素的值更新为“Hello World”。

Ref和useRef之间的区别

既然我们了解了useRef和Ref工作方式及它们的差异，让我们看看如何在实际应用程序中使用它们。例如，我们希望为弹出窗口实现一个点击离开事件侦听器。我们可以利用ref访问弹出窗口的 DOM 元素，并在弹出窗口外单击时进行侦听。

在你的react 应用中，你可以创建一个名为“hooks”的文件夹，这个文件夹将包含自定义钩子。

在文件夹中创建一个新文件 useClickAway ，并在文件中输入以下代码：

import React, { useEffect} from 'react'export default function useClickAway(ref: any, callback: Function) {useEffect(() => {function handleClickAway(event: any) {if (ref.current && !ref.current.contains(event.target)) {callback();}}document.addEventListener("mousedown", handleClickAway);return () => {document.removeEventListener("mousedown", handleClickAway);};}, [ref]);};

在上面的代码片段中，我们创建了一个接受引用对象作为 ref 和回调函数的自定义钩子，然后我们执行了一个事件侦听器来检查何时单击鼠标，如果单击不在当前 ref 上，则我们触发回调函数。

以下是产品页面上自定义挂钩的实现：

import React, { useRef } from "react";
//.. Other importations
export default function Storefront() {const targetElement = useRef(null)const alertClickAway = () => {alert("Clicked outside product 1")}useClickAway(targetElement, alertClickAway)//.. Other functionsreturn ({//.. Other parts of the application}<div className="gallery"><div className="col" ref={targetElement}><img src="https://i.postimg.cc/G207QNV7/image.png" alt="Product 1" /><p>iWatch Series 6</p><div className="btns"><button><img src="https://api.iconify.design/flat-color-icons:like.svg?color=%23888888" alt="like" /></button><button><img src="https://api.iconify.design/icon-park:buy.svg?color=%23888888"alt="add" /></button></div></div>)
}

在上面的代码片段中，我们有一个店面组件，我们在其中导入了自定义钩子，然后我们创建了一个新的引用对象 targetElement 并将其分配给产品库中的 div，然后我们创建了一个回调函数useClickAway，以便在使用ref在产品项外部单击鼠标时发出警报 targetElement 。

现在让我们看看输出：

图片

Ref和useRef的使用案例

你现在对什么是ref以及useRef，以及它们的使用有了一定的了解。ref和useRef两者都很容易被滥用，会造成使用开销比较大。现在你可能需要考虑的是何时使用，以及如何尽可能避免使用。

以下是参考的一些用途：

  • 与输入元素交互：通过使用 refs 可以访问输入元素并执行焦点、更改跟踪或自动完成等功能。

  • 与第三方 UI 库交互：ref 可用于与第三方 UI 库创建的元素进行交互，这些元素使用标准 DOM 方法访问可能很棘手。例如，如果您使用第三方库生成滑块，则可以使用ref访问滑块的 DOM 元素，而无需被告知滑块库源代码的结构。

  • 媒体播放：您还可以使用 refs 访问图像、音频或视频等媒体资产，并与它们的呈现方式进行交互。例如，当元素进入视口时自动播放视频或延迟加载图像。

  • 复杂动画触发：传统上，CSS 关键帧或超时用于确定何时启动动画。在某些情况下（可能更复杂），您可以使用 refs 来观察 DOM 元素并确定何时开始动画。

在某些情况下（如下所示），不应使用引用：

  • 声明性案例：即使在使用 refs 的简单解决方案的情况下，也无需编写更昂贵的代码来执行相同的任务。例如，使用条件渲染来隐藏或显示 DOM 元素而不是 ref。

  • 影响状态的元素：有时，使用refs的概念非常有趣，以至于您忽略了对元素所做的修改对应用程序生命周期的影响。您应该记住，对 ref 的更改不会导致重新渲染，并且ref在渲染中保持其对象的值。因此，建议避免在状态更改需要触发重新渲染的情况下使用 ref。

  • 访问功能组件：不应被误认为功能组件的 DOM 元素可以使用Ref 属性进行引用。因为，与类组件或 DOM 元素不同，功能组件没有实例。例如：

import {useRef} from ‘react’const FunctionalComponent = () => {return (<h1>Hello World<>
)
}const myComponent = () => {const elementRef = useRef()return (<FunctionalComponent ref={elementRef} />)
}

由于组件 FunctionalComponent 没有实例，因此上述代码片段中的 ref 将不起作用。相反，我们可以将其转换为FunctionalComponent类组件或在 FunctionalComponent 组件的 forwardRef 中使用。

善用工具

成功的前端工程师很会善用工具，这些年低代码概念开始流行，像国外的 Mendix，国内的 JNPF，这种新型的开发方式，图形化的拖拉拽配置界面，并兼容了自定义的组件、代码扩展，确实在 B 端后台管理类网站建设中很大程度上的提升了效率。

开源地址：JNPF体验中心

代码量少，系统的稳定性和易调整性都会得到一定的保障。基于代码生成器，可一站式开发多端使用 Web、Android、IOS、微信小程序。代码自动生成后可以下载本地，进行二次开发，有效提高整体开发效率。同时，支持多种云环境部署、本地部署给予最大的安全保障，可以快速搭建适合自身应用场景的产品。

结论

在本文中，我们讨论了如何使用 useRef 钩子创建引用，该钩子采用初始值并修改引用对象的“current”属性的值以更新其值。

我们看到了如何将“current”值与“ref”一起使用来访问 DOM 元素并与其属互。

我们将介绍如何创建一个接受引用 DOM 元素的自定义钩子和一个回调函数，以便在应用程序中使用 “ref” 和 “useRef” 来观察 DOM 元素上的单击事件。

此外，我们还讨论了“ref”和“useRef”的用例，何时使用它们，何时不使用它们。

在了解了ref 以及useRef 如何在不重新渲染父组件的情况下跟踪和更新可变值之后，您可以通过查看Refs 和 useRefs 的 React 的相关官方文档，来探索更多关于它们的信息或了解更多信息，甚至尝试其他 React 钩子。

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

51单片机（普中HC6800-EM3 V3.0）实验例程软件分析 实验三 LED流水灯

51单片机（普中HC6800-EM3 V3.0）实验例程软件分析 实验三 LED流水灯

目录 前言 一、原理图及知识点介绍 二、代码分析 知识点五&#xff1a;#include 中的库函数解析 _crol_&#xff0c;_irol_&#xff0c;_lrol_ _cror_&#xff0c;_iror_&#xff0c;_lror_ _nop_ _testbit_ 前言 第一个实验:51单片机&#xff08;普中HC6800-EM3 V3.0…
阅读更多...
深度学习——注意力机制、自注意力机制

深度学习——注意力机制、自注意力机制

什么是注意力机制&#xff1f; 1.注意力机制的概念&#xff1a; 我们在听到一句话的时候&#xff0c;会不自觉的捕获关键信息&#xff0c;这种能力叫做注意力。 比如&#xff1a;“我吃了100个包子” 有的人会注意“我”&#xff0c;有的人会注意“100个”。 那么对于机器来说…
阅读更多...
Docker Compose构建lnmp

Docker Compose构建lnmp

目录 Compose的优点 编排和部署 Compose原理 Compose应用案例 安装docker-ce 阿里云镜像加速器 安装docker-compose docker-compose用法 Yaml简介 验证LNMP环境 Compose的优点 先来了解一下我们平时是怎么样使用docker的&#xff1f;把它进行拆分一下&#xff1a; 1…
阅读更多...
BS框架说明

BS框架说明

B/S架构 1.B/S框架&#xff0c;意思是前端&#xff08;Browser 浏览器&#xff0c;小程序、app、自己写的&#xff09;和服务器端&#xff08;Server&#xff09;组成的系统的框架结构 2.B/S框架&#xff0c;也可理解为web架构&#xff0c;包含前端、后端、数据库三大组成部分…
阅读更多...
[深度学习] GPU处理能力（TFLOPS/TOPS）

[深度学习] GPU处理能力（TFLOPS/TOPS）

计算能力换算 理论峰值 &#xff1d; GPU芯片数量GPU Boost主频核心数量*单个时钟周期内能处理的浮点计算次数 只不过在GPU里单精度和双精度的浮点计算能力需要分开计算&#xff0c;以最新的Tesla P100为例&#xff1a; 双精度理论峰值 &#xff1d; FP64 Cores &#xff0a;…
阅读更多...
RK3588平台开发系列讲解（文件系统篇）什么是 VFS

RK3588平台开发系列讲解（文件系统篇）什么是 VFS

文章目录 一、什么是 VFS二、VFS 数据结构2.1、超级块结构2.2、目录结构2.3、文件索引结点2.4、打开的文件2.5、四大对象结构的关系沉淀、分享、成长，让自己和他人都能有所收获！😄 📢 今天我们一起来瞧一瞧 Linux 是如何管理文件，也验证一下 Linux 那句口号：一切皆为文…
阅读更多...
【枚举，构造】CF1582 C D

【枚举，构造】CF1582 C D

Problem - C - Codeforces 题意&#xff1a; 思路&#xff1a; 思路很简单&#xff0c;只删除一种&#xff0c;直接枚举删除的是哪一种即可 但是回文子序列的判定我vp的时候写的很答辩&#xff0c;也不知道为什么当时要从中间往两边扫&#xff0c;纯纯自找麻烦 然后就越改越…
阅读更多...
软件架构师高级——3、数据库系统

软件架构师高级——3、数据库系统

• 数据库概述&#xff08;★★★&#xff09; 集中式数据库系统 •数据管理是集中的 •数据库系统的素有功能 &#xff08;从形式的用户接口到DBMS核心&#xff09; 者口集中在DBMS所在的计算机。 B/S结构 •客户端负责数据表示服务 •服务器主要负责数据库服务 •数据 和后端…
阅读更多...
【Linux】【预】配置虚拟机的桥接网卡+nfs

【Linux】【预】配置虚拟机的桥接网卡+nfs

【Linux】【预】配置虚拟机的桥接网卡 1. 配置VM虚拟机的桥接网络2 配置Win10中的设置3.配置Linux中的IP4. 串口连接开发板&#xff0c;配置nfs5 修改网络文件6 验证nfs 是否成功总结 1. 配置VM虚拟机的桥接网络 右击设置&#xff0c;选择添加网络&#xff0c;按照如下顺序操作…
阅读更多...
MySQL语句性能分析与优化

MySQL语句性能分析与优化

目录 SQL性能分析 SQL执行频率 SQL慢查询日志 Profile Explain SQL优化 插入数据的优化 主键优化 Order By优化 Group By优化 Limit 优化 Count 优化 Update 优化 多表连接查询优化 SQL性能分析 通过SQL性能分析来做SQL的优化&#xff0c;主要是优化SQL的查询语…
阅读更多...
Springboot+Easyexcel将数据写入模板文件并导出Excel

Springboot+Easyexcel将数据写入模板文件并导出Excel

SpringbootEasyexcel将数据写入模板文件并导出Excel 一、导入依赖二、根据excel表头创建对应的实体类Pojo三、Controller类接收请求四、Service层获取待写入数据五、效果展示六、总结 一、导入依赖 <!--操作excel工具包--> <dependency><groupId>com.alibab…
阅读更多...
[Flask]SSTI1

[Flask]SSTI1

根据题目提示&#xff0c;这关应该是基于Python flask的模版注入&#xff0c;进入靶场环境后就是一段字符串&#xff0c;而且没有任何提示&#xff0c;有点难受&#xff0c;主要是没有提示注入点 随机尝试一下咯&#xff0c;首先尝试一下guest&#xff0c;GET传参 但是没有反应…
阅读更多...
离散Hopfield神经网络的联想记忆与matlab实现

离散Hopfield神经网络的联想记忆与matlab实现

1案例背景 1.1离散Hopfield神经网络概述 Hopfield网络作为一种全连接型的神经网络,曾经为人工神经网络的发展开辟了新的研究途径。它利用与阶层型神经网络不同的结构特征和学习方法,模拟生物神经网络的记忆机理,获得了令人满意的结果。这一网络及学习算法最初是由美国物理学家…
阅读更多...
react中hooks的理解与使用

react中hooks的理解与使用

一、作用 我们知道react组件有两种写法一种是类组件&#xff0c;另一种是函数组件。而函数组件是无状态组件&#xff0c;如果我们要想改变组件中的状态就无法实现了。为此&#xff0c;在react16.8版本后官方推出hooks&#xff0c;用于函数组件更改状态。 二、常用API 1、use…
阅读更多...
【css】css隐藏元素

【css】css隐藏元素

display:none&#xff1a;可以隐藏元素。该元素将被隐藏&#xff0c;并且页面将显示为好像该元素不在其中。visibility:hidden&#xff1a; 可以隐藏元素。但是&#xff0c;该元素仍将占用与之前相同的空间。元素将被隐藏&#xff0c;但仍会影响布局。 代码&#xff1a; <!…
阅读更多...
go编译文件

go编译文件

1.编译go文件 go build [go文件]2.执行文件编译文件 ./demo [demo为go文件名称]
阅读更多...
当服务器域名出现解析错误的问题该怎么办？

当服务器域名出现解析错误的问题该怎么办？

​　　域名解析是互联网用户接收他们正在寻找的域的地址的过程。更准确地说&#xff0c;域名解析是人们在浏览器中输入时使用的域名与网站IP地址之间的转换过程。您需要站点的 IP 地址才能知道它所在的位置并加载它。但&#xff0c;在这个过程中&#xff0c;可能会出现多种因素…
阅读更多...
web服务

web服务

静态网页与动态网页的区别 在网站设计中&#xff0c;静态网页是网站建设的基础&#xff0c;纯粹 HTML 格式的网页通常被称为“静态网页”&#xff0c;静态网页是标准的 HTML 文件&#xff0c;它的文件扩展名是 .htm、.html&#xff0c;可以包含文本、图像、声音、FLASH 动画、…
阅读更多...
MySQL(1)

MySQL(1)

MySQL创建数据库和创建数据表 创建数据库 1. 连接 MySQL mysql -u root -p 2. 查看当前的数据库 show databases; 3. 创建数据库 create database 数据库名; 创建数据库 4. 创建数据库时设置字符编码 create database 数据库名 character set utf8; 5. 查看和显示…
阅读更多...
【前瞻】视频技术的发展趋势讨论以及应用场景

【前瞻】视频技术的发展趋势讨论以及应用场景

视频技术的发展可以追溯到19世纪初期的早期实验。到20世纪初期&#xff0c;电视技术的发明和普及促进了视频技术的进一步发展。 1&#xff09;数字化&#xff1a;数字化技术的发明和发展使得视频技术更加先进。数字电视信号具有更高的清晰度和更大的带宽&#xff0c;可以更快地…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023