基于 React 的 useRef 钩子函数介绍

在 React 中，useRef 是一种常用的钩子函数，它提供了对 DOM 元素或组件的引用。useRef 的返回值是一个可变的 ref 对象，可以在 React 组件的生命周期中保留数据。

使用语法

import React, { useRef } from "react";

function MyComponent() {
  const refContainer = useRef(initialValue);

  // ... 组件其他代码 ...
}

其中，initialValue 是可选的，并且可以在 useRef 的初始渲染期间设置。

使用场景

1. 获取 DOM 元素引用：useRef 可以获取任意 React 元素的引用，例如，通过 ref 属性引用一个输入框或按钮。

   function TextInput() {
     const inputRef = useRef();
   
     const handleFocus = () => {
       // 聚焦到输入框
       inputRef.current.focus();
     };
   
     return (
       <div>
         <input ref={inputRef} type="text" />
         <button onClick={handleFocus}>聚焦</button>
       </div>
     );
   }
   

2. 保存组件实例引用：使用 useRef 来访问函数组件内部的实例。

   function Timer() {
     const intervalRef = useRef();
   
     useEffect(() => {
       intervalRef.current = setInterval(() => {
         // 更新时间
       }, 1000);
   
       return () => {
         clearInterval(intervalRef.current);
       };
     }, []);
   
     // ...
   }
   

3. 缓存较大的计算结果：可以使用 useRef 缓存计算过程中的结果，避免多次计算。

   function ExpensiveCalculation() {
     const resultRef = useRef();
   
     if (!resultRef.current) {
       // 执行耗时计算
       resultRef.current = performExpensiveCalculation();
     }
   
     return <div>{resultRef.current}</div>;
   }
   

注意事项

1. useRef 返回的 ref 对象在组件的整个生命周期中保持不变。因此，在组件中访问该 ref 对象的属性或方法时不会导致组件重新渲染。

2. useRef 修改 ref 对象的值不会触发组件重新渲染。因此，修改 ref 对象中的属性或调用 ref 对象中的方法是安全的，不会影响组件的性能。

useRef 是 React 提供的一个强大钩子函数，可以在函数组件中使用它来获取 DOM 元素的引用、保存组件实例引用和缓存计算结果。合理地使用 useRef 可以提高组件的性能和可维护性。