当前位置：首页 > news >正文

深入解析 React 中的 useRef Hook

news 2025/8/13 13:38:51

useRef 是 React 中一个强大且多功能的Hook，它提供了一种组件在渲染之间“记住”值的方式，而不会触发重新渲染。

一、useRef 的核心概念

1、基本定义
useRef 是一个函数，返回一个可变的ref对象，其 .current 属性被初始化为传入的参数（initiaValue）

const refContainer = useRef(initialValue);

2、关键特性

持久性： 返回的ref对象在组件的整个生命周期中保持不变
可变性： 可以自由修改 .current 属性
非响应式： 修改 .current 不会触发组件重新渲染
同步更新： 对 .current 的修改是同步的，立即生效

二、useRef 的三大核心用途

1、访问DOM元素
最常见的用例是访问 React 组件中的DOM节点

function TextInputWithFocusButton() {const inputEl = useRef(null);const focusInput = () => {inputEl.current.focus();};return (<><input ref={inputEl} type="text" /><button onClick={focusInput}>Focus the input</button></> );
}

2、存储可变值
存储不会触发重新渲染的组件状态

function TimerComponent() {const [count, setCount] = useState(0);const intervalRef = useRef();useEffect(() => {intervalRef.current = setInterval(() => {setCount(c => c + 1);	}, 1000);return () => clearInterval(intervalRef.current);}, []);const stopTimer = () => {clearInterval(intervalRef.current);};return (<div><p>Count: {count}</p><button onClick={stopTimer}>Stop Timer</button></div>);
}