React中useRef如何用
useRef的基本概念
useRef是React Hook之一，用于在函数组件中创建可变的引用对象。其返回值是一个包含current属性的对象，该属性可存储任意值，且在组件重新渲染时保持不变。
获取DOM元素的引用
通过useRef绑定DOM元素，可直接操作原生DOM：
import React, { useRef } from 'react';
function TextInput() {
const inputRef = useRef(null);
const focusInput = () => {
inputRef.current.focus();
};
return (
<div>
<input type="text" ref={inputRef} />
<button onClick={focusInput}>聚焦输入框</button>
</div>
);
}此处inputRef.current指向实际的<input> DOM节点。
存储可变值
useRef可存储与渲染无关的变量，修改时不会触发重新渲染：
function Counter() {
const countRef = useRef(0);
const increment = () => {
countRef.current += 1;
console.log('当前值:', countRef.current);
};
return <button onClick={increment}>点击计数（不触发渲染）</button>;
}适合存储定时器ID、上一次渲染状态等。
与useState的区别
- useState：状态变化会触发组件重新渲染。
- useRef：修改
current属性不会触发渲染，适合存储不影响UI的数据。
避免滥用场景
useRef不应替代状态管理。若数据变化需反映到UI，仍需使用useState或useReducer。
