问题场景

很多人对 useRef 的认知停留在“拿 DOM 元素”：

const btnRef = useRef
return 点击

但实际项目里真正让我们头皮发麻的不是拿不到 DOM。而是：

这些问题，useRef 就是答案。

. 🎯 解决 useEffect 闭包陷阱

场景倒计时组件。使用者点击暂停，定时器里拿到的 count 永远是旧值。

function Countdown {
const = useState
const countRef = useRef // 同步 ref
useEffect => {
countRef.current = count
},)
useEffect => {
const timer = setInterval => {
// ✅ ref 永远指向最新值。不参与闭包捕获
if {
setCount
}
},1000)
return => clearInterval
},)
}

原理ref.current 是一个可变对象修改它不会引发重渲染，且读取时总是最新值。

. 📊 追踪组件渲染次数

function ExpensiveList {
const renderCount = useRef
renderCount.current++
useEffect => {
console.log
})
return 

{/* ... */}
}

时挂上这个，一眼看出哪些组件因 props/state变化在无意义重渲染。配合 React DevTools Profiler 更香。

版——追踪哪个 prop 改变触发了重渲染

function useWhyDidYouUpdate {
const prev = useRef
useEffect => {
const changes: Record = {}
Object.keys.forEach(key => {
if {
changes = { from: prev.current,to: props }
}
})
if .length) {
console.log
}
prev.current = props
})
}

. ⏰ 定时器/事件的稳健清理

function PollingComponent {
const timerRef = useRef
const stopPolling = useCallback => {
if {
clearInterval
timerRef.current = null
}
}。)
const startPolling = useCallback => {
stopPolling // 防止重复
timerRef.current = window.setInterval => {
console.log
},1000)
},)
useEffect => => stopPolling,)
return 开始轮询
}

React StrictMode 下组件会 mount-unmount-mount 两次启动定时器会打架，所以一定要用 ref 管理句柄。

. 📋 跟踪上一次的 props/state

function usePrevious: T | undefined{
const ref=useRef
useEffect=>{ref.current=value}。)
return ref.current
}
function ScrollNotifier{
const prevY=usePrevious
useEffect=>{
if{console.log}
else if{console.log}
},)
return 

至于{`滚动距离，${y}px`}
}

为什么能拿到上一次值？因为 useRef 不参与渲染周期。第一次渲染时 ref 是

. 🔗 避免不必要的 useEffect 

function EditForm{
const nameRef=useRef
function handleChange{ nameReftemp=e.target.value }
function handleSave{
alert
}
return (


保存

)
}

⚠️ 适用判断：If 值只在提交/特定时间点使用且不需要 UI 刷新，就用 ref 代替 state。你可以避免大量无意义重新渲染。

要点

Simplified Takeaway: if value changes don’t need UI refresh—drop it into a {`useRef`};it’s a “no‑render memory box” that keeps you from juggling effect dependencies and extra renders.