React 第十七章 Hook useRef

最新推荐文章于 2024-07-12 17:07:46 发布

静水流深，沧海一粟

最新推荐文章于 2024-07-12 17:07:46 发布

阅读量404

点赞数 3

CC 4.0 BY-SA版权

分类专栏： react 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/aXin_li/article/details/138166374

React中的useRef是一个Hook函数，它可以用来在函数组件中创建一个可变的引用。它类似于类组件中的ref属性，但有一些不同之处。

useRef可以用来保存任意可变值，而不仅仅是DOM元素的引用。它可以在函数组件的多次渲染之间保持不变。

使用useRef的基本语法如下：

import React, { useRef } from 'react';

function MyComponent() {
  const ref = useRef(initialValue);
  // ...
}

在函数组件中创建一个ref，只需要调用useRef并传入一个初始值即可。初始值可以是任意类型的值。

useRef返回一个包含一个current属性的对象。这个current属性可以存储任意值，并且在函数组件的多次渲染之间保持不变。

下面是一些使用useRef的常见用途：

获取DOM元素的引用：可以使用ref属性将一个DOM元素绑定到ref.current上。

import React, { useRef, useEffect } from 'react';

function MyComponent() {
  const inputRef = useRef();

  useEffect(() => {
    inputRef.current.focus();
  }, []);

  return (
    <input ref={inputRef} />
  );
}

存储任意值：可以使用useRef来存储组件内部的任意可变值。

import React, { useRef } from 'react';

fu

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

静水流深，沧海一粟

关注关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

17、React Hooks 性能优化与自定义 Hook 全解析

rain6的博客

08-06

本文深入解析了 React Hooks 在性能优化方面的应用以及如何创建和使用自定义 Hook。内容包括 React.memo 对组件的记忆化处理、useMemo 对昂贵计算的记忆化优化、useCallback 对函数的记忆化，以及它们的使用场景和示例。同时介绍了更多内置 Hooks 如 useImperativeHandle、useLayoutEffect 和 useDebugValue。文章还探讨了自定义 Hook 的优势与局限，并提出了开发 React 应用的系统性思考方式，帮助开发者更好地选择和使用

【学习前端第七十九课】React组件进阶用法

weixin_65729202的博客

01-22

1493

当出现在数据量大，DOM节点元素多的场景下，一次的更新可能带来的处理量将会是非常巨大的，而所有的更新任务都是紧急更新的，在这种情况下浏览器会同时执行大量的渲染工作，而这种情况下带来的最直观的用户体验就是卡顿，特别是在硬件配置越低的设备越明显。

参与评论您还未登录，请先登录后发表或查看评论

react-redux使用时利用ref调用子组件方法不可用报错

Chris__wang的博客

07-26

2348

在使用react的时候，我们难免会在父组件中调用子组件的方法，我们常用ref调用子组件的方法如下在父组件中调用子组件的写法父组件 handleShowModalAdd = () => { this.add.handleToggle()//handleToggle为子组件中的方法 } <SystemAdd ref={(el) => this.add = el...

Hook useRef

u013611033的博客

04-20

3457

useRef（和React.creatRef()生成的有点类似） useRef 返回一个可变的ref对象-----书写更加简洁返回的ref对象在组件的整个生命周期内保持不变 ref对象的.current属性设置为相应的DOM节点---------和之前的ref一样的当ref对象内容发生变化时，useRef并不会通知你--------只是一个记录值，不会帮你监听什么变更.curren...

Hook UseRef

qq_60403325的博客

09-24

199

实现非受控组件子组件传递数据到父组件用自定义事件父组件 import React, { useState } from 'react' import Child4 from '../components/Child4' import Child5 from '../components/Child5' export default function UseRef() { const [username, setnum] = useState("") let fn = (m..

hook之useRef

m0_59345890的博客

10-14

872

这个Hook的作用是获取我们的元素节点的，就跟我们以前学习Vue中的ref相似，在元素节点中ref绑定，然后this.$refs对象中就可以获取我们绑定ref的元素。在React中，我们通过useRef()来实现。

React: ref的使用

做个懂管理、懂产品，懂技术的大叔

05-07

473

Refs and the DOM Refs 提供了一种方式，允许我们访问 DOM 节点或在 render 方法中创建的 React 元素。在典型的 React 数据流中，props 是父组件与子组件交互的唯一方式。要修改一个子组件，你需要使用新的 props 来重新渲染它。但是，在某些情况下，你需要在典型数据流之外强制修改子组件。被修改的子组件可能是一个 React 组件的实例，也可能是一个 D...

react

Jasmin博客

05-27

1465

面试

React 18 中StrictMode多次调用函数式组件体及其hook

老司机的后备箱

06-09

1280

如上文所述，直接脚手架搭建项目，其中场景会用到异步请求一些数据，然后通过函数式组件响应到页面，在试图找到问题所在的前提下，进行简化，先用同步代码测试，已经发现会重复调用函数体。但是在以及之前的版本就不会出现这种情况，所以我以为是bug，找了好久，因为是两天前才更新的18.1.0，网上也没讲这个的帖子，就去提了issue。地址：https://github.com/facebook/react/issues/24467 （随后被告知是新特性，已被关闭）再现步骤：再现测试代码 Link to code exa

hook函数——useRef

Bin_niB的博客

02-10

974

useRef的用法主要包括两个方面，例如使用ref引用一个值，使用ref引用一个dom节点，本文将会从==计数器==，==文本框聚焦==的案例来进一步说明这useRef的用法

React 中的useRef

m0_61135864的博客

11-12

2651

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-hooks：useRef

卡卡西：一个擅长拷贝的前端程序员

04-17

521

useRef：一个ReactHook，帮助引用一个不需要渲染的值。

React Hooks之useRef详解

RayShyy的博客

02-18

6265

useRef 返回一个可变的 ref 对象，其内部只有一个 current 属性被初始化为传入的参数（initialValue）useRef 返回的 ref 对象在组件的整个生命周期内持续存在更新 current 值时并不会触发页面的重新渲染（re-render）useRef 会在每次渲染时返回同一个 ref 对象本质上，useRef 就像是可以在其 .current 属性中保存一个可变值的“盒子”。

【React Hooks原理 - useRef】

最新发布

weixin_44273311的博客

07-12

1473

从基本使用、使用场景、原理分析，根据源码一步一步介绍了useRef的原理

【react】useRef的用法

qq_42546652的博客

01-24

2023

useRef 和直接创建一个对象的区别在于什么？ useRef是保持唯一的引用，赋值和取值都是拿到的最终的那个值。修改他的值，不会导致重新渲染组件常用的做法：就是访问一个dom节点。通过ref.current去访问到真实的dom。可以做到监听举个简单栗子： ...

react17笔记1

u010565037的博客

04-26

259

hooks 在react类组件（class）写法中，有setState和生命周期对状态进行管理，但是在函数组件中不存在这些，故引入hooks（版本：>=16.8），使开发者在非class的情况下使用更多react特性。 useEffect相当于componentDidMount和componentDidUpdate两个生命周期，通过return () => {}的方式解绑生命周期，相当于componentWillUnmount周期，以监听页面滚动为例，通过effect实现监听与解绑如下：

React学习笔记——Hooks中useRef的基础介绍和使用，useRef和createRef的区别

MRlaochen的博客

07-27

1682

在 React 的世界中，有容器组件和 UI 组件之分，在 React Hooks 出现之前，UI 组件我们可以使用函数，无状态组件来展示 UI，而对于容器组件，函数组件就显得无能为力，我们依赖于类组件来获取数据，处理数据，并向下传递参数给 UI 组件进行渲染。使用 React Hooks 相比于从前的类组件有以下几点好处：代码可读性更强，原本同一块功能的代码逻辑被拆分在了不同的生命周期函数中，容易使开发者不利于维护和迭代，通过 React Hooks 可以将功能代码聚合，方便阅读维护组件树层级变浅，

Hook 入门

qq_41161604的博客

01-28

691

Hook 简介为什么使用hook类组件和函数组件的区别没有破坏性改动Hook 使用规则useStateuseEffect自定义 HookuseRefuseContext 为什么使用hook Hook 是 React 16.8 的新增特性，是一些可以让你在函数组件里“钩入” React state 及生命周期等特性的函数。类组件和函数组件的区别详细参考 How Are Function Components Different from Classes?, 感兴趣的同学可以直接看原文。区别类组

精读React hooks（四）：useRef的多维用途

BigYe_ChengPu的博客

12-22

2052

在这篇文章中，我们对 React 的 useRef 进行了深入的探讨，透过实际代码，再现了useRef绝大多数应用场景，无论你是 React 新手还是老手，相信本文都能为你提供有价值的知识。

reacthook useRef

03-28

React Hook `useRef` is a function that returns a mutable object with a `current` property that can be used to store and access a value across renders. It is similar to creating an instance property on a class component. The `useRef` hook is used to: 1. Store a value that persists across renders without triggering a re-render. 2. Access the properties of a DOM node or a React component instance. The most common use case of `useRef` is to access the DOM nodes, such as: 1. Focus an input element 2. Scroll a container 3. Measure the size of an element Example: ``` import React, { useRef } from 'react'; function Example() { const inputRef = useRef(null); const handleClick = () => { inputRef.current.focus(); }; return ( <div> <input type="text" ref={inputRef} /> <button onClick={handleClick}>Focus Input</button> </div> ); } ``` In the above example, we are using `useRef` to store a reference to the input element, and in the `handleClick` function, we are accessing that reference to call the `focus` method on the input element.