React useRef 实用案例
探索 useRef 的多种用途：访问 DOM 节点、存储可变值、保持引用稳定。 · 难度：入门 · +15XP
useRef 深度解析
useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数。返回的对象在组件的整个生命周期内保持不变。它主要有三个用途：访问 DOM 元素、存储可变值（不会触发重新渲染）、保存之前的某个值。
常见场景
| 用途 | 说明 | 示例 |
|---|---|---|
| 访问 DOM | 获取输入框焦点或测量元素尺寸 | inputRef.current.focus() |
| 存储可变值 | 保存计时器 ID，不会因重新渲染而丢失 | timerRef.current = setTimeout(...) |
| 保存之前的值 | 配合 useEffect 记录旧值 | prevRef.current = value |
代码示例
import React, { useRef, useEffect } from 'react';
function AutoFocusInput() {
const inputRef = useRef(null);
useEffect(() => {
// 组件挂载后自动聚焦
inputRef.current.focus();
}, []);
return <input ref={inputRef} type="text" />;
}
function Timer() {
const timerRef = useRef(null);
const startTimer = () => {
timerRef.current = setTimeout(() => alert('时间到！'), 3000);
};
const stopTimer = () => {
clearTimeout(timerRef.current);
};
return (
<div>
<button onClick={startTimer}>开始</button>
<button onClick={stopTimer}>停止</button>
</div>
);
}
练习提示
结合两个例子：创建一个输入框，使用 useRef 获取其值（不需要受控组件），并在点击按钮时弹出该值。