【React中useRef钩子详解】

一、useRef的核心特性

useRef是React提供的Hook，用于在函数组件中创建可变的持久化引用，具有以下核心特性：

1. 持久化存储
   返回的ref对象在组件整个生命周期内保持不变，即使组件重新渲染，current属性的值也不会丢失。
2. 无触发渲染
   修改ref.current的值不会导致组件重新渲染，适合存储不影响UI状态的数据（如定时器ID、DOM引用等）。
3. 多类型支持
   可存储任意类型数据（数字、字符串、对象、DOM节点等），初始值通过参数传递（如useRef(null)）。

---

二、useRef与useState的区别

特性	useRef	useState
重新渲染	❌ 修改current不触发	✅ 更新状态触发重新渲染
数据用途	存储与UI无关的变量或DOM引用	管理与UI相关的状态
数据更新方式	直接修改current属性	通过setState函数更新
闭包问题	可保存最新值，避免闭包陷阱	闭包中可能获取旧状态值
初始化方式	直接传入初始值	传入初始值，返回状态及更新函数

示例对比：

// useRef：点击按钮更新值但页面不刷新
const countRef = useRef(0);
countRef.current += 1; // useState：更新触发渲染
const [count, setCount] = useState(0);
setCount(count + 1);

---

三、useRef的典型应用场景

1. 访问DOM元素

通过ref属性绑定到JSX元素，直接操作DOM节点（聚焦