React - Hooks - useRef

useRef 是 React 中的一个 Hook,主要用于在函数组件中访问 DOM 元素或保存可变的值而不触发重新渲染 。与 useState 不同,useRef 创建的对象是可变的,它的**.current 属性** 可以被直接修改,而改变 .current 的值不会导致组件重新渲染。

一、基本语法

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

const MyComponent = () => {

// initialValue:用于初始化 ref 对象的值。可以是任何类型,如 null、数字、字符串等
    const myRef = useRef(initialValue); // 创建一个 ref 对象

    return (
        [...]
    );
};

二、使用示例

1.访问 DOM 元素

使用 useRef 的一个常见场景是直接访问 DOM 元素,例如获取输入框的焦点:

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

const InputShow = () => {
    const inputRef = useRef(null);

    const show = () => {
        alert(inputRef.current.value);
    };

    return (
        <div>
            <input ref={inputRef} type="text" placeholder="点击按钮显示数据" />
            <button onClick={show}>提示数据</button>
        </div>
    );
};

export default InputShow;

2.保存可变的值

**useRef**也可以用于存储任何可变的值,而无需重新渲染组件。例如,可以用来存储定时器 ID:

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

const TimerComponent = () => {
    const timerRef = useRef();

    useEffect(() => {
        timerRef.current = setInterval(() => {
            console.log('定时器触发');
        }, 1000);

        return () => {
            clearInterval(timerRef.current); // 在卸载时清除定时器
        };
    }, []);

    return <div>定时器已设置</div>;
};

export default TimerComponent;

在这个示例中,timerRef 用来保存正在运行的定时器 ID,并在组件卸载时进行清理。

3.其他使用

  • 组件间存储 :**useRef**可以用于在不同的渲染中持有状态值,像缓存一样。例如,可以存储上一个 props 值,便于在某些情况下进行比较。
javascript 复制代码
import React, { useEffect, useRef } from 'react';

const ABC = ({ value }) => {
    const prevValueRef = useRef();

    useEffect(() => {
        prevValueRef.current = value; // 每次 value 更新时保存上一个值
    }, [value]);

    return (
        <div>
            <h1>当前值: {value}</h1>
            <h1>上一个值: {prevValueRef.current}</h1>
        </div>
    );
};

export default ABC;

4.useRef 与 useState 的区别

  • 更新机制 :使用 useState 更新状态会导致组件重新渲染,而更新 useRef 的**.current** 属性不会导致重新渲染。
  • 用途useState 用于状态管理,**useRef**用于直接操作 DOM 或存储不需要重新渲染的数据。

三、注意事项

  1. 初始值useRef 的初始值只在第一次渲染时设置,后续的渲染不会影响其值。
  2. 类型useRef 并没有提供类型检查(TypeScript 下除外),所以需小心对**.current**属性的类型操作。

四、总结

  • **useRef**是一个非常灵活的 Hook,用于访问 DOM 元素和持有可变值,而不触发组件的重新渲染。
  • 它适用于各种场景,包括表单输入、定时器、存储上一个状态等。
相关推荐
腾讯TNTWeb前端团队1 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰5 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪5 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪5 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy6 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom6 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom6 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom6 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom7 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom7 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试