当你第一次接触 React Hooks 时useRef 的第一印象往往是：拿 DOM 的工具。这是真的，但它远不止此，

1️⃣ 什么是 useRef？

useRef 是一个可变容器，跨渲染周期保持同一对象实例。

• 返回一个形如 { current: T } 的对象
• ref.current 在组件生命周期内保持不变
• 修改 .current 不会触发重新渲染

这就是它与 useState 最大的区别。老实说，

1.1 定义与语法示例

const inputRef = useRef;// 初始化为 null 或默认值
inputRef.current // 当前引用的 DOM 节点或其它值

2️⃣ 基础用法：获取 DOM 元素

如果你想让按钮点击后聚焦到输入框，这是最直观的用法。话说回来，

function TextInput {
const inputRef = useRef;const focusInput = => inputRef.current?.focus，return (
<>

聚焦输入框
);}

常见场景汇总

• 聚焦 / 自动选中文本
⚠️ **痛点**：如果把 ref 放在条件渲染中。可能导致 `current` 为 `undefined`，请务必检查 null。
• ⚠️ **痛点**：频繁读写 `current` 并配合 CSS 动画会导致性能下降，请使用 `requestAnimationFrame` 包装。

3️⃣ useRef vs useState：关键区别与常见误解

经典案例：

function Counter {
const countRef = useRef;// 用 Ref 存储计数，不会触发重绘
const = useState;// 用 State 存储计数，会重绘

const incrementWithRef = => { countRef.current++;其实，console.log;// 值已变化，但 UI 未更新 };

const incrementWithState = => setCount;

return ( <>

Status from state: {count}

至于**结论**，需要 UI 响应 → 用 `useState`；只想存一点东西且不需要 UI 更新 → 用 `useRef`。

4️⃣ 隐藏技能：跨渲染保存可变值 — 超越 “DOM” 的本质用途

4.1 保存上一次的 Props / State

这在做动画、表单脏检查或日志记录时非常有用：

`function usePrevious: T | undefined {
const ref = useReft;useEffect => { ref.current = value;},)，return ref.current;}``

javascript

const prevCount = usePrevious;// now prevCount holds previous count value even after state changes

javascript function Timer { const timerId = useReft;

useEffect => { timerId.current = setInterval=> console.log,1000);return => timerId.current && clearInterval;},)，

return

**优点**这方面。比全局变量更安全，也避免了闭包捕获旧引用的问题。

javascript function useOnce=>any) { const ref = useReft<{value:any}>; if { ref.current={value:init};} return ref.current.value;}

• Create SDK instance once.
• Create Web Worker singleton.
• Caching global config objects.

If you notice that a setInterval callback always logs initial state value even after updates—that’s a classic closure trap.

scss /* 痛点示例 */ function Chat { const = usestate;usereffect=>{ const id=setInterval=>{ console.log;},1000)，// always old count!return =>clearInterval;},)，// ❌ bug – stale closure!}

### 用 useref 解决

scss function Chat{ const = usestate;const countRef=useref;

usereffect=>{ countRef.current=count;},)，

usereffect=>{ const id=setInterval=>{ console.log;},1000)，// ✅ 最新值永远被打印！其实，return =>clearInterval;},)，}

• This pattern keeps latest value inside a mutable container that persists across renders.

• * UseLatest*: Always get newest value without re-rendering. csharp function uselatest{ const r=useref;r.current=value;不过，return r，}
  • * UseMounted*: Determine if component still mounted before setting state from async calls.

  csharp function usemounted{ const r=useref;usereffect=>{ r.current=true;其实，return=>{r.current=false};},)，return r;}

  This is essential for avoiding memory leaks in fetch callbacks:

  scss if.current){setData;}

  • * 误区 A:* 使用 useref 替代 usestate. 从原因来看，UI 无响应。

  • 示例

  csharp // ❌ 错误：UI 不会更新!const counterRfr=useref;怎么说呢，... counterRfr.cur++;说起来，// 没有重绘，怎么说呢，

  // ✅ 正确方式： const =usestate ... setCounter

  * 误区 B:* 在渲染阶段修改 ref.current.

  从原因来看。可能导致不可预期行为，老实说，

  • 建议

  说到把修改放在。

  - 内。
  - 等事件处理函数里。
  - 自定义 Hook 内部逻辑里。

  * 误区 C:* 把 ref. 当成响应式数据来使用。

  从原因来看，它并不会触发组件更新。

  • 说明

  如果你需要立即看到改变，请改为 或 。

  • ✅ 获取 DOM 节点 • ✅ 缓存实例/订阅/定时器 • ✅ 保持上一次状态或 props • ✅ 避免闭包问题 • ✅ 控制副作用生命周期

  不适合这方面。

  • ❌ UI 状态管理 • ❌ 响应式数据流

  ---

  如果答案是 “是 / 否 / 是”，那么 就用 useref。若第二个问题回答 “是”，则应该优先考虑 或 。

  ---