当前位置：首页 > news >正文

React 中 useRef 除了引用 DOM 还能做什么？

news 2026/7/30 10:17:44

React 中 useRef 除了引用 DOM 还能做什么？

一句话总结：useRef 是一个「渲染间持久化的可变容器」，除了存 DOM 节点，还能存定时器 ID、上一次的值、跨渲染的标志位，是函数组件里不触发重渲染的「私有变量」！

正文目录

useRef 到底是什么？
5 大高频使用场景 & 代码示例
万能兜底：什么时候用 useRef vs useState
预防 checklist（不再踩坑）
一句话总结

一、useRef 到底是什么？

const ref = useRef(initialValue); // ref.current = initialValue（初始值） // 修改 ref.current 不会触发重渲染 // 组件每次渲染，ref 是同一个对象

核心特性：

特性	useRef	useState
修改后触发重渲染？	❌ 不触发	✅ 触发
跨渲染保持值？	✅ 是	✅ 是
修改方式	`ref.current = val`	`setState(val)`
适合存什么	DOM、定时器、标志位	需要展示的 UI 数据

一句话：需要页面响应变化 → useState；只需要存个值但不影响 UI → useRef。

二、5 大高频使用场景 & 代码示例

① 引用 DOM 节点（最常见）

import { useRef, useEffect } from 'react'; function InputFocus() { const inputRef = useRef(null); useEffect(() => { inputRef.current?.focus(); // ✅ 挂载后自动聚焦 }, []); return <input ref={inputRef} />; }

② 存储定时器 ID，避免泄漏

// ❌ 定时器存在普通变量里，每次渲染都会重置 function Timer() { let timerId = null; // ❌ 每次渲染都是 null useEffect(() => { timerId = setInterval(() => console.log('tick'), 1000); return () => clearInterval(timerId); // ❌ timerId 可能是 null }, []); }

修复：用 useRef 存定时器

// ✅ useRef 存定时器 ID，跨渲染稳定 import { useRef, useEffect } from 'react'; function Timer() { const timerRef = useRef(null); useEffect(() => { timerRef.current = setInterval(() => { console.log('tick'); }, 1000); return () => clearInterval(timerRef.current); // ✅ 清理时能拿到 }, []); const stop = () => clearInterval(timerRef.current); return <button onClick={stop}>停止</button>; }

③ 记录上一次的值（prevValue）

// ✅ 用 useRef 记录上一次的 props/state import { useRef, useEffect } from 'react'; function PriceDisplay({ price }) { const prevPriceRef = useRef(price); useEffect(() => { prevPriceRef.current = price; // ✅ 渲染后更新 }); const isUp = price > prevPriceRef.current; return ( <div style={{ color: isUp ? 'red' : 'green' }}> ¥{price} {isUp ? '↑' : '↓'} </div> ); }

④ 防止 useEffect 里的闭包陷阱

// ❌ useEffect 空依赖，但里面用了最新的 state → 闭包旧值 function Counter() { const [count, setCount] = useState(0); useEffect(() => { const timer = setInterval(() => { console.log(count); // ❌ 永远是 0 setCount(count + 1); // ❌ 永远设成 1 }, 1000); return () => clearInterval(timer); }, []); }

修复方案一：useRef 存最新值

// ✅ useRef 存最新 count，定时器里读 ref.current function Counter() { const [count, setCount] = useState(0); const countRef = useRef(count); useEffect(() => { countRef.current = count; // ✅ 每次渲染更新 ref }); useEffect(() => { const timer = setInterval(() => { setCount(countRef.current + 1); // ✅ 读最新值 }, 1000); return () => clearInterval(timer); }, []); return <div>{count}</div>; }

修复方案二：函数式更新（更简洁）

// ✅ 函数式更新，不需要 ref function Counter() { const [count, setCount] = useState(0); useEffect(() => { const timer = setInterval(() => { setCount(prev => prev + 1); // ✅ 拿到最新值 }, 1000); return () => clearInterval(timer); }, []); return <div>{count}</div>; }

⑤ 标志位：控制「只执行一次」或「是否已初始化」

// ✅ 用 useRef 做初始化标志，防止重复执行 import { useRef, useEffect } from 'react'; function useInitOnce(callback) { const initializedRef = useRef(false); useEffect(() => { if (initializedRef.current) return; // ✅ 只执行一次 initializedRef.current = true; callback(); }, [callback]); }

// ✅ 防抖：用 useRef 存防抖定时器 function SearchInput() { const [value, setValue] = useState(''); const debounceRef = useRef(null); const handleChange = (e) => { const val = e.target.value; setValue(val); clearTimeout(debounceRef.current); // ✅ 清掉上一个定时器 debounceRef.current = setTimeout(() => { fetchResults(val); // ✅ 500ms 后发请求 }, 500); }; useEffect(() => { return () => clearTimeout(debounceRef.current); // ✅ 卸载时清理 }, []); return <input value={value} onChange={handleChange} />; }

三、万能兜底：什么时候用 useRef vs useState

决策流程：

这个值变化后，UI 需要更新吗？ ├── 是 → useState └── 否 → 这个值需要在事件/定时器里访问吗？ ├── 是 → useRef └── 否 → 普通变量就行

场景	用什么	原因
输入框内容	useState	UI 需要响应
加载状态	useState	UI 需要响应
DOM 节点引用	useRef	不需要触发渲染
定时器 ID	useRef	不需要触发渲染
上一次的值	useRef	用于比较，不直接渲染
防抖定时器	useRef	不需要触发渲染
初始化标志	useRef	只控制逻辑，不渲染
isMounted 标志	useRef	防止卸载后 setState

万能模板：

import { useState, useRef, useEffect } from 'react'; function useDebounce(callback, delay) { const timerRef = useRef(null); // ✅ 存定时器 const callbackRef = useRef(callback); // ✅ 存最新 callback useEffect(() => { callbackRef.current = callback; // ✅ 每次渲染更新 }); useEffect(() => { return () => clearTimeout(timerRef.current); // ✅ 卸载清理 }, []); const debounced = (...args) => { clearTimeout(timerRef.current); timerRef.current = setTimeout(() => { callbackRef.current(...args); // ✅ 调最新的 }, delay); }; return debounced; }