Lazy loaded image
技术分享
React 中的 useRef 与 useState
字数 442阅读时长≈ 2 分钟
2021-9-11
2025-5-10
type
status
date
slug
summary
tags
category
icon
password

React 中的 useRef 与 useState 的区别与应用

在 React 中，useRef 和 useState 是两个常见的 Hook，它们都能用于保存组件状态或引用，但用途与特性截然不同。本文将从底层原理、使用场景、性能等多个角度对比讲解。

一、useState 简介

useState 用于保存会触发组件重新渲染的状态变量。

特点：

  • 会引起组件重新渲染
  • 适合用来控制 UI 展示和交互状态

二、useRef 简介

useRef 返回一个可变的 ref 对象，它的 .current 属性可用于保存值。

特点：

  • 修改 .current 不会触发组件更新
  • 常用于保存定时器、DOM 引用或前一个值等

三、useRef vs useState 对比

对比点
useState
useRef
是否触发渲染
✅ 会
❌ 不会
值是否可变
✅ 会更新
✅ 仅 .current 可变
常用场景
UI 状态、表单输入值
DOM 引用、定时器、缓存值
异步更新问题
有（批处理）
无（立即更新）
数据持久性
✅ 跨渲染保存
✅ 跨渲染保存

四、实战案例：保存上一个值

解读：

  • 使用 useRef 保存上一次的 count 值，不会影响组件渲染逻辑

五、DOM 操作场景

⚠️ 注意：只有在组件挂载后 .current 才会指向真实 DOM

六、总结

useRef 更像是一个“容器”，useState 更像是“状态驱动视图”的触发器。
 
上一篇
React Hooks 是什么？
下一篇
彻底理解 Promise / async
目录