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

useRefuseState 都是 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 的改变不建议作为 useEffectuseMemo 等 hook 的依赖项;
  • useRef 不会参与 React 的响应式更新机制。
相关推荐
li35744 小时前
将已有 Vue 项目通过 Electron 打包为桌面客户端的完整步骤
前端·vue.js·electron
Icoolkj4 小时前
VuePress 与 VitePress 深度对比:特性、差异与选型指南
前端·javascript·vue.js
excel4 小时前
CNN 分层详解:卷积、池化到全连接的作用与原理
前端
excel4 小时前
CNN 多层设计详解:从边缘到高级特征的逐层学习
前端
西陵6 小时前
Nx带来极致的前端开发体验——任务编排
前端·javascript·架构
大前端helloworld6 小时前
从初中级如何迈入中高级-其实技术只是“入门卷”
前端·面试
东风西巷7 小时前
Balabolka:免费高效的文字转语音软件
前端·人工智能·学习·语音识别·软件需求
萌萌哒草头将军7 小时前
10个 ES2025 新特性速览!🚀🚀🚀
前端·javascript·vue.js
半夏陌离7 小时前
SQL 入门指南:排序与分页查询(ORDER BY 多字段排序、LIMIT 分页实战)
java·前端·数据库