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

React——useRef（）

news 2025/8/16 3:04:31

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 确认组件是否挂载}