react中useRef是什么?有啥用?怎么用?

useRef是什么?

在 React 中,useRef 是一个 Hook ,它可以用来存储一个可变的值 ,这个值在组件的整个生命周期内保持不变 。useRef 返回一个可变的 ref 对象 ,其 .current 属性被初始 化为传递给 useRef 的参数(initialValue)。返回的对象将在组件的整个生命周期内持续存在

useRef 通常有两个主要的用途:

  1. 访问 DOM 节点:当你需要直接访问一个 DOM 节点时(例如,要管理焦点、文本选择或媒体播放),你可以使用 ref 来获取对该节点的直接引用。

  2. 存储任意可变值:如果你需要跨渲染保持一个可变值,而这个值不应该引起组件的重新渲染时,你可以使用 ref。

访问 DOM 节点

下面是一个使用 useRef 访问 DOM 节点的例子:

js 复制代码
import React, { useRef, useEffect } from 'react';

function TextInputWithFocusButton() {
  // 初始化一个 ref,初始值为 null
  const inputEl = useRef(null);

  // 一个按钮点击事件的处理函数,它会将焦点设置到 input 元素上
  const onButtonClick = () => {
    // `current` 指向已经挂载在 DOM 上的文本输入元素
    inputEl.current.focus();
  };

  return (
    <>
      {/* 将 ref 关联到 input 元素上 */}
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}


//在这个例子中,我们创建了一个 ref 对象 inputEl 并将其关联到 <input> 元素上。通过点击按钮,我们可以调用 inputEl.current.focus() 方法来让输入框获得焦点。

存储可变值

js 复制代码
//下面是一个使用 useRef 存储可变值的例子:
import React, { useRef } from 'react';

function TimerComponent() {
  const count = useRef(0); // count 的初始值为 0

  const handleStart = () => {
    count.current = setInterval(() => {
      console.log(`Interval triggered ${++count.current}`);
    }, 1000);
  };

  const handleStop = () => {
    clearInterval(count.current);
  };

  return (
    <div>
      <button onClick={handleStart}>Start</button>
      <button onClick={handleStop}>Stop</button>
    </div>
  );
}

//在这个例子中,我们使用 useRef 来存储一个计时器的 ID 值。count.current 在组件的整个生命周期内保持不变,即使在组件重新渲染时也是如此。这样,我们可以在开始和停止计时器的函数之间共享这个值,而不需要将其作为组件的状态。使用状态的话,每次状态更新都会导致组件重新渲染,这在这种情况下是不必要的。
js 复制代码
//例子二 



   const queryRef = useRef({
        code1: '',
        code2: ''
    });

    const PrintBtn = () => {
        console.log('testBtn', queryRef.current); //永远都是获取到最新的值
    };



 <div>
                    <input
                        onChange={(e) => {
                            queryRef.current.code1 = e.target.value;
                        }}
                        placeholder="请输入文本1"
                    ></input>
                    <input
                        onChange={(e) => {
                            queryRef.current.code2 = e.target.value;
                        }}
                        placeholder="请输入文本2"
                    ></input>
                    <Button onClick={PrintBtn}>Print</Button>
                </div>

注意事项::::

  1. 修改 useRef 返回的对象的 .current 属性不会触发组件的重新渲染。
  2. useRef 和创建一个 {current: ...} 对象的字面量不同,因为 useRef 会在每次渲染时返回同一个 ref 对象。
  3. 如果你将 ref 对象用于跟踪一个值,那么你应该在需要时手动处理这个值的更新和副作用,因为 React 不会为你做这些事情。

useRef 是 React 提供的一个强大的工具,它可以帮助你在函数组件中管理 DOM 引用和存储可变值,而不会引起额外的渲染。

相关推荐
王哈哈^_^44 分钟前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie1 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic2 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿2 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具2 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
清灵xmf3 小时前
TypeScript 类型进阶指南
javascript·typescript·泛型·t·infer
小白学大数据3 小时前
JavaScript重定向对网络爬虫的影响及处理
开发语言·javascript·数据库·爬虫
qq_390161773 小时前
防抖函数--应用场景及示例
前端·javascript
334554324 小时前
element动态表头合并表格
开发语言·javascript·ecmascript
John.liu_Test4 小时前
js下载excel示例demo
前端·javascript·excel