useRef 与 DOM

这一课你将能做到

1. 说明 ref 与 state 的差别（会不会触发重渲染）
2. 用 ref 拿到 input 并在按钮点击时 focus()
3. 知道什么时候不该用 ref 硬改 UI

为什么要学

有时你需要「记住一个值但不想因为这个值重画界面」，或「拿到真正的 DOM 节点」（聚焦、测宽、播视频）。
这时用 useRef。

人话：ref 是一个可变盒子，改盒子里的东西默认不会让 React 重画页面。
本站搜索框「一点按钮光标进输入框」、音视频控件，都是 ref 的典型活。显示在屏幕上的字仍然用 state。

先建立图像

state：变了 → 重新渲染 → 用户看到变化
ref.current：变了 → 默认不重新渲染（只是盒子里的值换了）

需求	用什么
屏幕上要显示的数字/文案	state
聚焦输入框、读 video 当前时间	ref
记「上一次 count」给逻辑用	常也能用 ref
菜单开没开	state（要重画）

跟着做

步骤 1：聚焦输入框（完整可抄）

import { useRef } from "react";

export function FocusDemo() {
  const inputRef = useRef(null);

  return (
    <>
      <input ref={inputRef} placeholder="点按钮后我会被聚焦" />
      <button type="button" onClick={() => inputRef.current?.focus()}>
        聚焦
      </button>
    </>
  );
}

ref={inputRef} 让 React 把 DOM 节点填进 inputRef.current。
第一次渲染刚结束前，current 可能还是 null，所以用可选链 ?.。

步骤 2：存「上一次的值」（混个脸熟）

import { useEffect, useRef } from "react";

export function PrevCount({ count }) {
  const prev = useRef(count);
  useEffect(() => {
    prev.current = count;
  }, [count]);
  return (
    <p>
      这次 {count}，上次 {prev.current}
    </p>
  );
}

进阶：比较这次和上次而不额外为「上次」开一个会触发渲染的 state。先知道有这用法即可。

步骤 3：想清楚边界

能声明式解决就少操作 DOM：

• 显示/隐藏：条件渲染，不要 ref.current.style.display = "none"
• 按钮文字：state，不要 ref.current.textContent = ...
• 列表：map，不要 innerHTML

ref 是逃生舱，不是默认方向盘。

步骤 4：和 getElementById 比

在 React 树内优先用 ref。getElementById 可能拿到别的节点、过期节点，或在 SSR 时根本没有 document。

步骤 5：测宽（只读 DOM）