react 中何时使用 useRef-A Site

react 中何时使用 useRef

发布时间： 2024-10-28 更新时间： 2025-10-19 总字数：528 阅读时间：2m 作者：AIGC IP上海

React 中的 useRef Hook 用于创建一个可变的引用对象，用于存储某些值，并且可以在整个组件的生命周期中保持不变。

使用 useRef 的时机：

存储 DOM 元素：在组件中，需要获取某个 DOM 元素的引用，以便在后续操作中使用。
存储某些状态：在组件中，需要存储某些状态，而这些状态不需要被触发重新渲染。
缓存某些计算结果：在组件中，需要缓存某些计算结果，以便在后续操作中重复使用。
实现某些定时器或 interval：在组件中，需要实现某些定时器或 interval，以便在后续操作中使用。

使用 useRef 的优点：

不触发重新渲染：使用 useRef 存储的值不会触发组件的重新渲染。
可变的引用：使用 useRef 创建的引用对象是可变的，可以在整个组件的生命周期中保持不变。

useRef 的基本语法：

import { useRef } from 'react';

function Example() {
  const inputRef = useRef(null);

  const handleClick = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} type='text' />
      <button onClick={handleClick}>Focus input</button>
    </div>
  );
}

在上面的示例中，我们使用 useRef 创建了一个名为 inputRef 的引用对象，并将其关联到一个输入框上。在 handleClick 函数中，我们可以使用 inputRef.current 来获取输入框的引用，并调用其 focus() 方法。

其他使用 useRef 的示例：

存储某些状态：

const countRef = useRef(0);

countRef.current += 1;

缓存某些计算结果：

const cachedResultRef = useRef(null);

if (!cachedResultRef.current) {
  cachedResultRef.current = someExpensiveCalculation();
}

const result = cachedResultRef.current;

实现某些定时器或 interval：

const timerRef = useRef(null);

timerRef.current = setInterval(() => {
  console.log('Timer ticked!');
}, 1000);

总之，useRef 是一个非常有用的 Hook，用于存储某些值，并且可以在整个组件的生命周期中保持不变。

react 中何时使用 useRef

Cookie Notice!