【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);