【React中useRef钩子详解】
一、useRef的核心特性
useRef是React提供的Hook，用于在函数组件中创建可变的持久化引用，具有以下核心特性：
- 持久化存储
返回的ref对象在组件整个生命周期内保持不变，即使组件重新渲染，current属性的值也不会丢失。 - 无触发渲染
修改ref.current的值不会导致组件重新渲染，适合存储不影响UI状态的数据（如定时器ID、DOM引用等）。 - 多类型支持
可存储任意类型数据（数字、字符串、对象、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节点（聚焦