别再用错了！一分钟让你区分 useRef 和 useState

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 的响应式更新机制。