👨🏫 本系列由前端面试真题博主 Kincy 发起，每日更新一题，通勤路上轻松掌握高频知识点。
📢 如果你想第一时间获取更新，或与群友交流面试经验、内推信息，欢迎加入微信群（文末扫码）！
🧠 系列前言：
面试题千千万，我来帮你挑重点。每天一道，通勤路上、蹲坑时、摸鱼中，技术成长不设限！本系列主打幽默 + 深度 + 面霸必备语录，你只管看，面试场上稳拿 offer！
💬 面试官发问：
“
useRef不就是用来获取 DOM 的？除了 ref={xxx}，还有啥高级用法？”
哼哼，这题一出，不少人脑海中只有 <input ref={...}>，但其实你错过了它真正的潜力——
useRef是 React 世界里的 “隐形仓库管理员” ！
🎯 快答区（面霸速记版）
-
useRef()返回一个带.current属性的 可变对象 -
常见用途有两个：
- 绑定 DOM 元素（老本行）
- 跨 render 保存值，不触发重新渲染（隐藏战力）
-
.current属性不会随 render 更新而丢失，且修改它不会导致组件重新渲染
它就像一个“不参与视图更新的储物柜”，闭包、计时器、滚动位置……它都能记！
🧬 useRef 的真本事
🪝 一、DOM 操作老本行
function AutoFocusInput() {
const inputRef = useRef<HTMLInputElement>(null)
useEffect(() => {
inputRef.current?.focus()
}, [])
return <input ref={inputRef} />
}
📌 这是 useRef 最传统的用法，等价于 class 组件的 createRef。
💾 二、值缓存器：不会引发渲染的“小仓库”
const renderCount = useRef(0)
renderCount.current += 1
console.log('渲染次数：', renderCount.current)
每次更新 renderCount 不会触发页面重新渲染，不打扰 React 的视图系统。
✅ 对比 useState：
| Hook | 会触发重新渲染？ | 常用于 |
|---|---|---|
useState | ✅ 会 | 页面视图绑定状态 |
useRef | ❌ 不会 | DOM 引用、定时器、临时数据 |
🧟♂️ 三、闭包陷阱终结者
来看这个经典“鬼打墙”问题：
useEffect(() => {
const timer = setInterval(() => {
console.log(count) // 永远打印初始值
}, 1000)
}, [])
你以为能访问最新 count？其实是闭包导致 count 卡在初始值。
✅ 正确解法：用 ref 保存“活数据”
const countRef = useRef(count)
useEffect(() => {
countRef.current = count
}, [count])
useEffect(() => {
const timer = setInterval(() => {
console.log(countRef.current) // 始终是最新值
}, 1000)
return () => clearInterval(timer)
}, [])
📌 这是在副作用中访问最新状态的最佳实践之一！
🧰 四、useRef 还能干这些骚操作
⏱ 保存定时器 ID、防抖节流
const timerId = useRef<number>()
useEffect(() => {
timerId.current = window.setTimeout(() => {
console.log('done')
}, 1000)
return () => clearTimeout(timerId.current)
}, [])
📦 保存上一次的 props 或 state
const prevValue = useRef(value)
useEffect(() => {
if (prevValue.current !== value) {
console.log('变化了！')
prevValue.current = value
}
}, [value])
⚠️ 五、useRef 的一些注意事项
useRef改变.current不会触发重新渲染- 默认值只在第一次渲染时有效（类似
useState(init)） - 在 React 严格模式下，组件会渲染两次，记得避免用它代替真实的生命周期判断
🎓 装 X 语录（限时使用）
“useRef 本质上是 React 中的可变引用容器，用于保存状态或 DOM，不参与视图更新。”
“它和闭包配合，可以绕开 stale 状态问题。”
“很多人只把它当成 DOM 引用工具，实际上它更像是组件生命周期之外的‘副作用仓库’。”
说完再补一句：“比起 useState，useRef 更适合存储不影响 UI 的副作用数据。”
✅ 总结一句话
useRef是 Hook 界的“仓库管理员”：能管 DOM、管值，还不会影响视图，它是函数组件的隐形 MVP！
🔮 明日预告
明天我们来聊聊 useReducer—— ⚙️ 你以为它是 useState 的高级版？其实它才是 React 内置的 Redux 精简替身！
📌 点赞 + 收藏 + 关注系列，一起搞懂 Hooks，不再被面试官“钩”住！
📚 本系列每天一题，持续更新中！
👉 扫码加入【前端面试题交流群】，一起成长、交流、内推、分享机会！
备注“掘金”优先通过
