首页 > 其他分享 >了解 useRef:初学者指南

了解 useRef:初学者指南

时间:2024-09-21 17:06:17浏览次数:9  
标签:指南 useRef gt const 渲染 useref current 初学者 countref

介绍 什么是 userefuseref 是 react hook,它允许创建对值或 dom 元素的持久引用。与 usestate 用于管理触发重新渲染的状态不同,useref 主要用于副作用或直接访问 dom 元素。 为什么使用 userefuseref 钩子特别有用:直接访问 dom 元素:您可以使用 useref 获取对 dom 元素的引用,允许您直接操作它而无需触发重新渲染。创建持久值:与状态不同,使用 useref 创建的值在渲染之间保留,这使得它们非常适合存储不需要触发重新渲染的数据。 了解 useref 钩子useref 钩子返回一个具有 .current 属性的对象。当您调用 useref 时,它会创建对您作为参数传递的值的持久引用。该引用存储在返回对象的 .current 属性中。 使用 useref 创建引用要创建引用,只需使用初始值调用 useref 即可。import { useref} from 'react'const app = () =&gt; { const countref = useref(0) return (...)}export default app登录后复制在上面的示例中,countref 是对初始值 0 的引用。 访问参考值要访问参考值,只需调用带有 .current 属性的 countref 对象import { useref} from 'react'const app = () =&gt; { const countref = useref(0) const increment = () =&gt; { countref.current++ } return ( <div> <p>count: {countref.current}</p> <button onclick="{increment}">increment</button> </div> )}export default app登录后复制在上面的示例中,如果您单击按钮,它将调用增量函数,这将增加 countref,但计数不会在 count: {countref.current} 处更新,因为更新 useref 不会导致像 usestate 一样重新渲染。将代码更新为下面的示例以获得您期望的结果。import { useref, usestate } from 'react'const app = () =&gt; { const countref = useref(0) const [count, setcount] = usestate(0) const increment = () =&gt; { countref.current++ setcount(countref.current) } return ( <div> <p>count: {count}</p> <button onclick="{increment}">increment</button> </div> )}export default app登录后复制 useref 的常见用例 直接访问和操作 dom 元素可以使用 useref 钩子来访问和更改 html 元素的属性const app = () =&gt; { const inputref = useref(null) const handlefocus = () =&gt; { inputref.current.focus() } return( <input ref="{inputref}"> )}登录后复制 持久的价值观与 usestate 或变量不同,useref 可以在重新渲染之间传递值和数据,例如缓存数据或配置设置。 性能优化在某些情况下,使用 useref 可以通过避免不必要的重新渲染来帮助组件优化。就像如果您有一个渲染大量项目列表的组件,您可以使用 useref 缓存它,并且仅修改重新渲染已更改的项目。 最佳实践和注意事项渲染期间请勿写入?或读取 ref.current?您可以改变 ref.current?属性当您更改 ref.current 属性时,react 不会重新渲染您的组件信息是组件的每个副本的本地(与共享的外部变量不同)。您可以在重新渲染之间存储信息(与常规变量不同,每次渲染时都会重置)。您可以从事件处理程序或效果中读取或写入引用。使用 ref 操作 dom 将引用传递给自定义组件。如果您尝试像这样将引用传递给您自己的组件const inputref = useref(null);return <myinput ref="{inputref}"></myinput>;登录后复制您可能会在控制台中收到错误:警告:不能给函数组件提供引用。尝试访问此引用将失败。您是想使用 react.forwardref() 吗?要解决此问题,请使用forwardref 包装自定义组件,如下所示:const inputref = useref(null);return <myinput value="{value}" ref="{inputref}"></myinput>;登录后复制自定义组件:import { forwardRef } from 'react';const MyInput = forwardRef(({ value, onChange }, ref) =&gt; { return ( <input value="{value}" onchange="{onChange}" ref="{ref}"> );});export default MyInput;登录后复制 结论useref 是一个功能强大的钩子,主要用于副作用使用,例如在重新渲染之间缓存数据或访问 dom 元素。它是 react 应用程序中性能优化和实现特定功能的绝佳工具。 以上就是了解 useRef:初学者指南的详细内容,更多请关注我的其它相关文章!

标签:指南,useRef,gt,const,渲染,useref,current,初学者,countref
From: https://www.cnblogs.com/aow054/p/18424220

相关文章

  • 了解现代 Web 开发中的 chunkjs:代码分割和性能优化指南
    在Web开发中,尤其是使用React、Vue或Angular等现代JavaScript框架时,chunk.js指的是在应用程序的构建过程中创建的JavaScript捆绑文件。当捆绑或编译Web应用程序时,Webpack或Vite等构建工具会将JavaScript代码分割成称为“块”的较小文件。这些块通常是为了性能优......
  • 了解 DSA 中的时间和空间复杂性:开发人员指南
    介绍在软件开发领域,效率是关键。无论您是构建小型应用程序还是大型复杂系统,了解代码在各种条件下的执行情况都至关重要。这就是时间复杂度和空间复杂度概念发挥作用的地方。这些指标可帮助开发人员评估算法的效率,指导他们编写运行速度更快、消耗更少内存的代码。在本文中,我们将深......
  • 书评:Eloquent JavaScript – Web 开发人员的基本指南
    作为最广泛使用的编程语言之一,JavaScript为网络提供了动力。然而,由于其快速发展,跟上JavaScript趋势可能具有挑战性。许多关于这个主题的书籍很快就会过时,但有一本书经受住了时间的考验:EloquentJavaScript。这本书已成为开发人员的最爱,并且正在稳步发展为那些希望加深对语言理......
  • WordPress 迁移插件终极指南
    迁移WordPress网站就像收拾房子搬到新房子一样。确保所有内容(内容、主题、插件、媒体文件甚至数据库)完美移动且没有任何损坏的挑战似乎令人畏惧。但就像搬家公司让搬家变得更容易一样,WordPress迁移插件简化了将网站从一台主机移动到另一台主机的复杂过程。无论您是切换主机、从......
  • Redis:内存数据结构存储终极指南
    redis是不断发展的数据管理和存储领域中广泛使用的技术。redis被公认为内存中数据结构存储,它提供了广泛的功能,使其成为从缓存到实时分析等各种应用程序的标准基础。这个综合教程将介绍redis是什么、它的核心功能、用例以及如何开始。什么是redis?redis代表远程字典服务......
  • 解决QFC810.exe运行时错误:soundplayer.dll文件丢失,恢复音频播放的实用指南
    当遇到QFC810.exe运行时错误,提示soundplayer.dll文件丢失时,这通常意味着你的系统或应用程序目录中缺少了必要的动态链接库文件(DLL),导致音频播放功能无法正常工作。以下是一份恢复音频播放的实用指南:一、确认问题首先,确认错误消息确实是由于soundplayer.dll文件丢失引起的。这......
  • 帝国CMS数据导入数据库的操作指南
    帝国CMS数据导入数据库的操作通常涉及到以下几个步骤:1.准备数据导出数据:如果你要从另一个数据库或系统中导入数据,首先需要将数据导出为SQL脚本或其他格式。使用数据库管理工具(如phpMyAdmin)或MySQL命令行工具来导出数据。2.登录帝国CMS后台登录后台:打开浏览器,访问......
  • 用户验收测试指南7测试设计
    7测试设计第3章介绍了测试开发流程(TDPtestdevelopmentprocess),即创建UAT测试的流程。测试开发流程的三个组成部分,即测试条件、测试用例和测试过程规范(测试脚本),每一个都代表了一个流程或层次结构中的一个步骤,这个流程或层次结构从需求定义开始,到UAT结束。在本章中,我们将......
  • 史上最全Python图像识别:从基础到高级的全方位指南
    一、引言图像识别是计算机视觉的核心任务之一,它涉及图像的预处理、特征提取、分类等多个步骤。Python凭借其丰富的第三方库支持和简洁的语法,成为了图像识别领域的重要工具。本文将详细介绍如何使用Python进行图像识别,从基本概念到实际应用案例。二、基础知识2.1Python......
  • 用户验收测试指南6计划
    6计划我们需要像开始任何重要工作一样开始我们的UAT工作--决定我们要实现的目标是什么。当我们开始进行UAT时,您可能会认为这应该已经很明确了,但请记住,变化是计划的魔咒。很多事情都会偏离最初的计划和要求--有偶然的,也有蓄意的。此时此刻,我们必须最终确定我们认为项目的业务......