useRef 和 useState 都是 React 的 Hook，用于在函数组件中保存数据，但二者的用途和行为有明显区别：
-
useState
- 用于管理需要触发重新渲染的状态数据。
- 状态变化会导致组件重新渲染，视图会更新。
- 适合保存会影响界面显示的变量（如输入框内容、组件显隐状态等）。
- 状态更新是异步的，在同一次 render 中无法立即获取最新值。
-
useRef
- 用于保存不会引起视图重新渲染的可变数据。
- 适合存储 DOM 引用、定时器 ID、前一状态、临时变量等。
- 数据更新不会触发组件的 rerender，更像是在整个组件生命周期内都可变的"容器" （ref 对象，current 属性持久有效）。
- 状态更新是同步的，可在当前 render 流程内立即获取新值。
| 区别 | useState | useRef |
|---|---|---|
| 渲染影响 | 数据变化会引起组件重新渲染 | 数据变化不会引起组件重新渲染 |
| 数据存储方式 | 返回 状态, 设置函数 | 返回 ref 对象（通过 .current 获得和设置值） |
| 用途 | 存放会影响界面显示的状态数据 | 存放 DOM、定时器、可变临时数据，不影响界面 |
| 更新方式 | setState 异步更新，无法立即获得最新值 | ref.current 同步更新，可立即获得 |
| 常用场景 | 交互状态、表单输入、显隐控制等 | 获取 DOM、缓存旧值、标记、临时存储中间量等 |
选择建议：
- 如果数据变化影响 UI，需用 useState；
- 如果只需在渲染间持久保存某个数据且不会影响 UI，用 useRef。
注意事项：
ref.current的改变不建议作为useEffect、useMemo等 hook 的依赖项；useRef不会参与 React 的响应式更新机制。