React - Hooks - useRef

2025/5/23 2:32:33 来源：https://blog.csdn.net/2302_81312344/article/details/145966412 浏览: 次关键词：React - Hooks - useRef

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

一、基本语法

import React, { useRef } from 'react';const MyComponent = () => {// initialValue：用于初始化 ref 对象的值。可以是任何类型，如 null、数字、字符串等const myRef = useRef(initialValue); // 创建一个 ref 对象return ([...]);
};

二、使用示例

1.访问 DOM 元素

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

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：

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 值，便于在某些情况下进行比较。

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;