【react】useRef的用法

最新推荐文章于 2024-08-26 11:10:33 发布
最新推荐文章于 2024-08-26 11:10:33 发布
阅读量1.9k 收藏 1
点赞数 2
分类专栏： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42546652/article/details/113097353
版权

useRef 和直接创建一个对象的区别在于什么？ useRef是保持唯一的引用，赋值和取值都是拿到的最终的那个值。

修改他的值，不会导致重新渲染组件
常用的做法：就是访问一个dom节点。通过ref.current去访问到真实的dom。可以做到监听

举个简单栗子：

在这里插入图片描述

阿陆陆陆
关注
专栏目录
React 之 useRef
subsistent的博客
08-19 2224
useRef，他的作用是“勾住”某些组件挂载完成或重新渲染完成后才拥有的某些对象，并返回该对象的引用。返回的 ref 对象在组件的整个生命周期内保持不变。如果是自定义的react组件(自定义的组件必须大写字母开头)，那么是无法使用useRef（当然也有一些奇淫技巧后面我们后续课程会讲😈）的。这样，当父组件想调用子组件中的 doSomting() 时，可执行 childFunRef.current.doSomting()1、useRef是针对函数组件的，如果是类组件则使用React.createRef()。
React—useRef
热门推荐
Meskjei的博客
10-16 11万+
相信有过React使用经验的人对ref都会熟悉，它可以用来获取组件实例对象或者是DOM对象。 而useRef这个hooks函数，除了传统的用法之外，它还可以“跨渲染周期”保存数据。 首先来看一下它传统的用法： import React, { useState, useEffect, useMemo, useRef } from 'react'; export default function A...
React——useRef（）
最新发布
weixin_45705239的博客
08-26 457
返回的对象在组件的整个生命周期内保持不变，可以用来保存任何可变值。与实例属性类似，当你想要保存不需触发视图重新渲染的数据时，可以使用。：有时我们需要知道组件是否仍然挂载在 DOM 上，以避免在异步操作（如 API 调用）完成后调用 setState 导致的潜在错误。主要用于访问 DOM 节点、保存可变数据和跟踪组件挂载状态，且对它所保存的数据的修改不会触发组件的重新渲染。属性来直接访问实际的 DOM 节点。是 React 的一个 Hook，用于在组件的整个生命周期内持久化保存数据。
React 中的useRef
m0_61135864的博客
11-12 2570
useRef的作用主要有两种 1.操作DOM或者获取其他组件的引用 操作步骤 import { useRef } from 'react' const xxxx = useRef(null) <input ref={xxxx} /> xxxx.current 2.多次渲染之间共享数据 import React, { useEffect, useState } from 'react' import ReactDom from 'react-dom' expo...
react useRef
MichaelAn的博客
02-13 89
react useRef 相信有过React使用经验的人对ref都会熟悉，它可以用来获取组件实例对象或者是DOM对象。 而useRef这个hooks函数，除了传统的用法之外，它还可以“跨渲染周期”保存数据。 在阿里的项目中 import React from 'react'; import PortalWrapper...
React中useRef的使用方法
qq_54896312的博客
05-05 1913
React中useRef的使用方法
react useRef的用法
08-11
`useRef` 是 React 中的一个 Hook，它用于在函数组件中创建一个可变的引用。它的主要用途是在组件的多次渲染之间保持数据的持久性，并且不会触发组件重新渲染。 使用 `useRef`，你可以创建一个可变的引用，并且可以...
精读React hooks（四）：useRef的多维用途
BigYe_ChengPu的博客
12-22 1761
在这篇文章中，我们对 React 的 useRef 进行了深入的探讨，透过实际代码，再现了useRef绝大多数应用场景，无论你是 React 新手还是老手，相信本文都能为你提供有价值的知识。
React中ref、forwardRef、useRef的简单用法与区别
weixin_44203945的博客
04-21 2071
React--useRef
weixin_45269534的博客
06-27 553
useRef 是 React 中的一个 Hook，用于获取持久化引用。它可以用于在函数组件中存储和访问 DOM 元素或其他需要在多次渲染之间保持一致的值。
React的useRef
weixin_42450794的博客
07-31 1619
关于Ref的发展历程请看： https://juejin.im/post/5b59287af265da0f601317e3 1.创建useRef import React { useRef } from 'react'; const xRef = useRef(); <x ref={xRef} /> 注意，useRef只能在类组件中使用 class x extends ...
react 项目中 useRef的运用
秋来九月八
08-20 9636
大概分享一下两种常见情况下，使用useref。 第一种，同一组件内部，通过useref来获取某一个dom标签以及dom标签的方法。 在以前使用ref的时候，我们经常用ref来保存某个需要的dom标签，这样需要用到的时候，就可以不用去寻找这个dom标签了，在js中，通过方法，parentNode，lastchild，nextElementsibling 这种关系结构来找dom是一件比较麻烦的事情。如果不是动态类名或者id的话，通过document.getElementsByClassName 之类的方法，虽然
React useRef 指南
p1967914901的博客
10-30 2256
在本文中，我们将讨论使用 ref 访问 DOM 的 React `useRef` 钩子，以及 `ref` 和 `useRef` 之间的区别。
React useRef useEffect
ZhaoYulin6的博客
01-05 582
useRef是一个方法，且useRef返回一个可变的ref对象 最传统的用法： 首先通过useRef创建一个对象叫h3Dom,并且赋值给button的ref上，这样在获取节点打印处，我们可以打印出对应的DOM import {useState,useRef} from "react"; export const ShowDiv =()=>{ const [ color,serColor] = useState('red') const h3Dom =useRef() .
React Hooks函数之useRef
码农键盘上的梦
11-24 1995
useRef是 React 中常用的 Hook 之一，它返回一个可变的 ref 对象，可以在函数组件中存储任何可变值，在组件内部创建一个可变的引用，而不需要使用状态（state）。类似于在 class 组件中使用this.myRef保存 DOM 引用的方式。以下是一些使用useRef。
React Hooks大全—useRef
CreatorRay的博客
01-29 1062
本文将重点介绍useRef这个Hook，它可以让你在组件的整个生命周期中访问一个可变的引用对象。
React之useRef的使用
weixin_44530344的博客
09-09 3508
我们在使用React开发中可能会操作DOM对象或者需要保存某个值，这个时候我们可以使用useRef。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值