useRef 是 React 的一个 Hook，用于在组件的整个生命周期内持久化保存数据。主要有以下几个用途：
-
存储对 DOM 节点的引用：通过给 DOM 元素添加
ref属性来直接访问实际的 DOM 节点。这常用于需要直接操作 DOM 时，比如管理焦点、文本选择或媒体播放。示例代码：
function TextInputWithFocusButton() {const inputEl = useRef(null);const onButtonClick = () => {// `current` 指向挂载到 `input` 元素的真实 DOM 节点inputEl.current.focus();};return (<><input ref={inputEl} type="text" /><button onClick={onButtonClick}>Focus the input</button></>);}
-
保存组件状态跨渲染周期不变的数据：
useRef返回的对象在组件的整个生命周期内保持不变，可以用来保存任何可变值。与实例属性类似，当你想要保存不需触发视图重新渲染的数据时，可以使用useRef。示例代码：
function TimerComponent() {const intervalRef = useRef();useEffect(() => {const id = setInterval(() => {// ...每隔一段时间执行的操作...}, 1000);intervalRef.current = id;return () => clearInterval(intervalRef.current);}, []);// ...}
-
追踪组件是否已经挂载或卸载：有时我们需要知道组件是否仍然挂载在 DOM 上，以避免在异步操作（如 API 调用）完成后调用 setState 导致的潜在错误。
示例代码：
function MyComponent() {const isMountedRef = useRef(true);useEffect(() => {return () => {// 组件卸载时更新 ref 的值isMountedRef.current = false;};}, []);// 使用 isMountedRef.current 确认组件是否挂载}
- 作为实例变量：对于需要存储任何可变值而又不想导致组件重新渲染的场景非常有用。因为
useRef创建的是一个普通 JavaScript 对象，其.current属性被初始化为传入的参数（useRef的初始值），这个值可以自由更改。
总结来说，useRef 主要用于访问 DOM 节点、保存可变数据和跟踪组件挂载状态，且对它所保存的数据的修改不会触发组件的重新渲染。