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 元素和持有可变值,而不触发组件的重新渲染。
  • 它适用于各种场景,包括表单输入、定时器、存储上一个状态等。
相关推荐
江城开朗的豌豆6 分钟前
Vue和React的数据流之争:双向绑定 vs 单向数据流,谁更适合你?
前端·javascript·vue.js
芜青8 分钟前
JavaScript手录09-内置对象【String对象】
开发语言·javascript·ecmascript
OpenTiny社区9 分钟前
前端可智能识别的搜索组件 SearchBox 使用详解!
前端·vue.js·ui·开源·opentiny
世伟爱吗喽10 分钟前
最新面试题总结
前端·javascript·vue.js
江城开朗的豌豆16 分钟前
前端权限控制实战:手把手教你玩转角色权限分配
前端·javascript·vue.js
超浪的晨29 分钟前
JavaWeb 入门:HTML 基础与实战详解(Java 开发者视角)
java·开发语言·前端·后端·html·个人开发
CCF_NOI.3 小时前
谷歌浏览器深入用法全解析:解锁高效网络之旅
大数据·运维·服务器·前端·计算机·谷歌
paopaokaka_luck6 小时前
基于SpringBoot+Uniapp的健身饮食小程序(协同过滤算法、地图组件)
前端·javascript·vue.js·spring boot·后端·小程序·uni-app
患得患失9496 小时前
【前端】【vscode】【.vscode/settings.json】为单个项目配置自动格式化和开发环境
前端·vscode·json