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

React——useRef（）

article 2025/3/6 16:58:00

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