别再用错了!一分钟让你区分 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 的响应式更新机制。
相关推荐
excel13 分钟前
JavaScript 运算符与 Vue 中的 1 << n 应用
前端
上单带刀不带妹23 分钟前
Vue3 全局 API 转移详解
前端·javascript·vue.js·vue3·api
怕冷的火焰(~杰)34 分钟前
yarn安装electron和better-sqlite3失败问题(rebuild:better-sqlite3)
前端·javascript·electron
IT_陈寒1 小时前
JavaScript性能优化:7个90%开发者不知道的V8引擎黑科技
前端·人工智能·后端
摸鱼的春哥1 小时前
“全栈模式”必然导致“质量雪崩”!和个人水平关系不大
前端·javascript·后端
Eme丶1 小时前
Nginx部署vue以及转发配置记录
前端·vue.js·nginx
大气层煮月亮1 小时前
Oracle EBS ERP之报表开发—嵌入Web中的报表预览、报表打印
前端·数据库·oracle
excel1 小时前
Vue 中 v-show 与 v-if 的全面解析
前端
回忆哆啦没有A梦4 小时前
Vue页面回退刷新问题解决方案:利用pageshow事件实现缓存页面数据重置
前端·vue.js·缓存
A_ugust__5 小时前
vue3+ts 封装跟随弹框组件,支持多种模式【多选,分组,tab等】
前端·javascript·vue.js