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 引用和存储可变值,而不会引起额外的渲染。

相关推荐
Huazzi.20 分钟前
免费好用的静态网页托管平台全面对比介绍
前端·网络·github·web
吃土少女古拉拉28 分钟前
前端和后端
前端·学习笔记
夫琅禾费米线34 分钟前
leetcode2650. 设计可取消函数 generator和Promise
开发语言·javascript·leetcode·ecmascript
寒雒1 小时前
【Python】实战:实现GUI登录界面
开发语言·前端·python
独上归州1 小时前
Vue与React的Suspense组件对比
前端·vue.js·react.js·suspense
战族狼魂2 小时前
html+js实现图片的放大缩小等比缩放翻转,自动播放切换,顺逆时针旋转
javascript·css·html
Komorebi⁼2 小时前
Vue核心特性解析(内含实践项目:设置购物车)
前端·javascript·vue.js·html·html5
明月清风徐徐2 小时前
Vue实训---0-完成Vue开发环境的搭建
前端·javascript·vue.js
SameX2 小时前
HarmonyOS Next 企业数据备份与恢复策略
前端·harmonyos
SameX2 小时前
HarmonyOS Next 企业数据传输安全策略
前端·harmonyos