useRef：访问 DOM 与「可变而不可渲染」的值

function SearchBox() {
  // ❌ 路线一：普通变量——组件函数每次渲染都从头执行（第 5 篇），
  // 随渲染生、随渲染死，存不住任何东西
  let inputEl: HTMLInputElement | null = null;

  // ❌ 路线二：useState 存 DOM 节点——能跨渲染，但 DOM 不是
  // 驱动界面的数据，塞进 state 白白多一次重渲染
  const [inputEl, setInputEl] = useState<HTMLInputElement | null>(null);
}

import { useEffect, useRef } from "react";

function SearchBox() {
  // 1. 造一个盒子，初值 null（泛型标注的是 current 的类型）
  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    // 3. 渲染完成后，盒子里已经是真实 DOM 节点，调它的命令式 API
    inputRef.current?.focus();
  }, []);

  // 2. 把盒子拴到 JSX 上：React 提交 DOM 时把节点塞进 ref.current
  return <input ref={inputRef} placeholder="搜索文章…" />;
}

import { useRef, useState } from "react";

function Stopwatch() {
  const [elapsed, setElapsed] = useState(0);      // 驱动界面：state
  const timerRef = useRef<number | null>(null);   // 幕后数据：ref

  function start() {
    if (timerRef.current !== null) return;  // 已在计时，别重复开
    timerRef.current = setInterval(() => setElapsed(e => e + 1), 1000);
  }

  function stop() {
    if (timerRef.current === null) return;
    clearInterval(timerRef.current);
    timerRef.current = null;
  }

  return (
    <>
      <p>已计时 {elapsed} 秒</p>
      <button onClick={start}>开始</button>
      <button onClick={stop}>暂停</button>
    </>
  );
}

import { useEffect, useRef } from "react";

function usePrevious<T>(value: T): T | undefined {
  const ref = useRef<T | undefined>(undefined);

  useEffect(() => {
    ref.current = value; // 渲染之后才写；本轮渲染读到的，正是上一轮的值
  }, [value]);

  return ref.current;
}

// 用法：const prev = usePrevious(count);「比上次多了 {count - prev} 条」

import { useEffect, useRef, useState } from "react";

function Poller() {
  const [count, setCount] = useState(0);
  const countRef = useRef(count);

  useEffect(() => {
    countRef.current = count; // 每次渲染后，把最新值写进镜像
  }, [count]);

  useEffect(() => {
    // 闭包捕获的是 countRef——恒定引用，不随渲染更替
    const id = setInterval(() => {
      console.log("最新 count：", countRef.current); // ✅ 永远最新
    }, 1000);
    return () => clearInterval(id);
  }, []);

  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}

import { useRef } from "react";

function Badge({ items }: { items: string[] }) {
  const lastLenRef = useRef(0);

  // ❌ 渲染期间改 ref：渲染结果取决于「之前发生过什么」
  if (items.length !== lastLenRef.current) {
    lastLenRef.current = items.length;
    return <b>{items.length} 项（有更新）</b>;
  }
  return <span>{items.length} 项</span>;
}

import { forwardRef } from "react";
import type { Ref } from "react";

// React 18 及更早：forwardRef 包一层，ref 从第二个参数进来
const MyInput = forwardRef<HTMLInputElement>(function MyInput(props, ref) {
  return <input ref={ref} placeholder={props.placeholder} />;
});

// React 19+：ref 就是普通 prop，直接写进 props 类型
function MyInput19({ ref, placeholder }: {
  ref?: Ref<HTMLInputElement>;
  placeholder?: string;
}) {
  return <input ref={ref} placeholder={placeholder} />;
}

// 两种写法，调用方完全一样：
<MyInput ref={inputRef} placeholder="搜索…" />