介绍

useRef 是 React 中的一个 Hook，用于创建可变的引用。它可以用来获取对 DOM 元素的引用，以及存储任意值，类似于类组件中的 ref 属性。

在某些场景下，你可能需要在组件的渲染过程中记录一些信息，以便后续操作。这时，useRef 就是一个很好的选择。

使用方法

使用 useRef 首先需要在组件中引入：

import React, { useRef } from 'react';

然后就可以在组件中定义一个 ref 了：

const myRef = useRef();

这里 myRef 就是我们定义的一个可变的引用。如果我们需要获取它对应的 DOM 元素，可以在 JSX 中给元素添加一个 ref 属性：

<input type="text" ref={myRef} />

此时，myRef.current 就指向了这个 input 元素，我们可以在组件中使用这个引用来对它进行操作。

如果我们要存储一个值，可以将其作为 useRef 的默认值，如下所示：

const myRef = useRef('default value');

我们可以通过 myRef.current 访问和修改这个值。

需要注意的是，当 myRef 发生变化时，组件并不会重新渲染。因此，useRef 不会触发组件的重新渲染，也不会导致副作用。

示例

下面是一个简单的示例，演示了如何使用 useRef：

import React, { useRef } from 'react';

function App() {
  const inputRef = useRef(null);
  const countRef = useRef(0);

  function handleClick() {
    inputRef.current.focus();
    countRef.current++;
    console.log(countRef.current);
  }

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Click me</button>
    </div>
  )
}

在这个示例中，我们创建了两个 useRef：inputRef 和 countRef。inputRef 用于获取 input 元素的引用，countRef 用于存储计数器的值。

当我们点击按钮时，会将焦点设置到输入框上，并将计数器加 1。每次打印计数器的值时，都是从 countRef.current 中读取的。

总结

useRef 是一个很实用的 Hook，可以用来获取 DOM 元素的引用，以及存储组件中的一些信息。它的使用方法很简单，主要的注意点在于组件的渲染和副作用的处理。