让组件发挥更大效用：TypeScript 中的React 'useRef' 四个主要用例

在 React 中，'useRef' 是一个必不可少的 hook，它允许开发人员与 DOM 交互并管理可变值，而不会触发重新渲染。通过与 TypeScript 相结合，'useRef' 的能力进一步增强，增加了类型安全并防止常见的运行时错误。本文介绍四个用例，展示如何在 TypeScript 中使用 'useRef' 来优化组件的功能：

• 1. 访问 DOM 节点

'useRef' 最基本的功能之一是它允许我们访问 DOM 节点。这在需要直接与 DOM 交互的场景中非常有用，例如：

const ref = useRef<HTMLInputElement>(null);

useEffect(() => {
  if (ref.current) {
    ref.current.focus();
  }
}, []);

这段代码使用 'useRef' 来创建对 DOM 输入元素的引用。在组件挂载后，我们使用 useEffect 钩子来设置焦点。只有在 DOM 节点存在时才执行此操作，以防止在组件卸载后发生错误。

• 2. 获取元素的尺寸和位置

'useRef' 还可以用于获取元素的尺寸和位置。这在响应式设计中非常有用，例如：

const ref = useRef<HTMLDivElement>(null);

useEffect(() => {
  if (ref.current) {
    const { width, height } = ref.current.getBoundingClientRect();
    console.log(`Width: ${width}, Height: ${height}`);
  }
}, []);

这段代码使用 'useRef' 来创建对 DOM div 元素的引用。在组件挂载后，我们使用 useEffect 钩子来获取该元素的宽高。只有在 DOM 节点存在时才执行此操作，以防止在组件卸载后发生错误。

• 3. 管理表单状态

'useRef' 还可用于管理表单状态。这在需要在提交表单之前收集用户输入的情况下非常有用，例如：

const ref = useRef<HTMLFormElement>(null);

const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
  e.preventDefault();
  const formData = new FormData(ref.current);
  console.log(formData);
};

这段代码使用 'useRef' 来创建对 DOM 表单元素的引用。在提交表单时，我们使用 handleSubmit 函数来收集表单数据。只有在 DOM 节点存在时才执行此操作，以防止在组件卸载后发生错误。

• 4. 存储数据，防止重新渲染

'useRef' 还可以用于存储数据，而不会触发重新渲染。这在需要在组件之间共享数据或避免在每次重新渲染时重新计算值的情况下非常有用，例如：

const ref = useRef(0);

const handleClick = () => {
  ref.current++;
  console.log(ref.current);
};

这段代码使用 'useRef' 来创建对数字变量的引用。在每次点击时，我们使用 handleClick 函数来递增该值。只有在组件挂载时才会执行此操作，以防止在组件卸载后发生错误。

总之，'useRef' 是一个非常有用的钩子，它可以用来执行各种任务，包括访问 DOM 节点、获取元素的尺寸和位置、管理表单状态以及存储数据。通过与 TypeScript 相结合，我们可以充分利用 'useRef' 的能力，以编写更强大、更可靠的 React 应用程序。