如何在 React 中使用 useRef 钩子

在 React 中，我们可以通过 useRef 钩子来创建一个可变的引用对象，这个对象可以在组件的生命周期中使用。

使用场景

• 获取 DOM 元素或组件的引用，例如调用其中的方法或获取其中的属性；
• 存储任何一个可变的值，这个值可以在组件的生命周期中修改和访问。

用法

创建 Ref

我们可以通过 useRef 钩子来创建一个 Ref，例如：

import { useRef } from 'react';

function MyComponent() {
  const myRef = useRef(null);
  
  return (
    <div ref={myRef}>Hello World!</div>
  );
}

这里我们创建了一个名为 myRef 的 Ref，初始值为 null。我们将这个 Ref 添加到 <div> 标签上，这样我们在组件中就可以通过 myRef 来获取到这个 <div> 元素的引用了。

获取 Ref 值

我们可以通过 useRef 钩子的 .current 属性来获取 Ref 的值，例如：

import { useEffect, useRef } from 'react';

function MyComponent() {
  const myRef = useRef(null);
  
  useEffect(() => {
    console.log(myRef.current.innerText);  // 输出：Hello World!
    myRef.current.style.color = 'red';    // 修改 <div> 的样式
  }, []);
  
  return (
    <div ref={myRef}>Hello World!</div>
  );
}

这里我们在 useEffect 钩子中获取到了 myRef 的当前值，并对其进行了修改。

存储可变值

Ref 不仅可以用来获取 DOM 元素的引用，还可以用来存储组件中的可变值。

import { useEffect, useRef, useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);
  const countRef = useRef(count);
  
  useEffect(() => {
    console.log(`count: ${count}, countRef: ${countRef.current}`);
    countRef.current = count;   // 将 count 的值保存到 countRef 中
  });
  
  const handleButtonClick = () => {
    setCount(count + 1);
  };
  
  return (
    <div>
      <p>You clicked {count} times.</p>
      <button onClick={handleButtonClick}>Click me</button>
    </div>
  );
}

这里我们调用 useState 钩子来创建了一个可变的 count 值，并创建了一个名为 countRef 的 Ref，初始值为 count 的当前值。

然后，我们在 useEffect 钩子中输出了 count 和 countRef.current 的值，并将 count 的值保存到 countRef 中。

最后，我们在 handleButtonClick 方法中调用 setCount 钩子来修改 count 的值，这样我们就可以看到我们保存在 countRef 中的值也随之被更新了。