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 或存储不需要重新渲染的数据。
三、注意事项
- 初始值 :
useRef
的初始值只在第一次渲染时设置,后续的渲染不会影响其值。 - 类型 :
useRef
并没有提供类型检查(TypeScript 下除外),所以需小心对**.current
**属性的类型操作。
四、总结
- **
useRef
**是一个非常灵活的 Hook,用于访问 DOM 元素和持有可变值,而不触发组件的重新渲染。 - 它适用于各种场景,包括表单输入、定时器、存储上一个状态等。
