使用 useRef 钩子

React 中的 useRef 钩子是一个非常有用的工具，它允许我们在函数组件内部创建一个可变的标识符，用于引用任何值。

使用 useRef 创建变量

在 JavaScript 中，我们可以将变量分配给一个常量或变量，并随时更改值。但是，在 React 组件中，每次重新渲染组件时，所有变量的值都将重置为其初始值。

使用 useRef 钩子可以创建一个变量，它的值会一直被保留在内存中，即使重新渲染组件也不会丢失。

下面是使用 useRef 钩子创建一个变量的例子：

import { useRef } from 'react';

function MyComponent() {
  const countRef = useRef(0);
  countRef.current++;
  console.log(countRef.current); // 1
}

在此示例中，我们使用 useRef 创建了一个名为 countRef 的变量，并将其初始值设置为 0。每次组件渲染时，我们会将变量的值增加一次，并打印新的值。

注意我们使用 .current 属性来访问 useRef 变量中存储的值，这可以确保我们获取到当前的值。

使用 useRef 引用 DOM 元素

useRef 钩子还可以创建一个引用到 DOM 元素的变量。当我们需要访问 DOM 元素时，例如设置元素的高度、宽度或滚动位置，使用 useRef 钩子可以方便地获取元素的引用。

以下是使用 useRef 引用 DOM 元素的示例：

import { useRef } from 'react';

function MyComponent() {
  const inputRef = useRef();

  return (
    <div>
      <input ref={inputRef} />
      <button onClick={() => inputRef.current.focus()}>
        Focus input
      </button>
    </div>
  );
}

在此示例中，我们使用 useRef 创建一个名为 inputRef 的变量，它将用于引用 input 元素。

通过在 input 元素上设置 ref 属性并将其指向 inputRef，我们可以获取对 input 元素的引用。

我们在 button 元素点击事件中调用 inputRef.current.focus() 来将焦点设置在 input 元素上。

总结

本文介绍了如何通过 useRef 钩子在函数组件中创建变量，并将其用于引用 DOM 元素。使用 useRef 钩子可以轻松访问和修改组件中的变量，以及获取对 DOM 元素的引用。