React useRef 和 useState 有什么区别？

Question

仓乃文 · Accepted Answer

useRef 和 useState 都能在组件多次渲染间保存数据，但 useRef 修改 .current 不会触发重渲染，useState 修改会触发重渲染。需要驱动视图更新的数据用 useState，只做内部记录（如 DOM 引用、上一次值、定时器 ID）用 useRef。

核心区别：
```javascript
function Demo() {
  const [count, setCount] = useState(0);  // 修改会触发重渲染
  const timerRef = useRef(null);           // 修改不会触发重渲染

useEffect(() => {
    timerRef.current = setInterval(() => {
      setCount(prev => prev + 1);  // 用函数式更新避免闭包陷阱
    }, 1000);
    return () => clearInterval(timerRef.current);  // ref 存定时器 ID
  }, []);
}
```

useRef 常见用途：
```javascript
const inputRef = useRef(null);       // 1. 获取 DOM 元素
const prevValueRef = useRef();       // 2. 记录上一次渲染的值
const renderCountRef = useRef(0);    // 3. 统计渲染次数（不影响视图）
renderCountRef.current++;
```

补充说明：
- useRef(initialValue) 的 initial value 只在首次渲染时赋值，后续渲染被忽略
- 不要在渲染过程中读写 ref.current（除初始化），应在事件处理或 Effect 中操作
- 如果 ref.current 的变化需要驱动视图更新，说明你应该用 useState
- React 19 中 ref 可以直接作为 prop 传递，不再需要 forwardRef