使用 useRef 反应

React 中的 useRef 是一个非常有用的钩子，能够直接操作 DOM 元素，而无需通过 React 的 state 进行交互。这在某些情况下是非常有用的，例如：

• 当你需要访问 DOM 元素的属性或方法时
• 当你需要在组件卸载时处理一些清理操作时

使用 useRef

使用 useRef 很简单，只需要在组件中声明即可：

import { useRef } from 'react';

function MyComponent() {
  const myRef = useRef(null);

  return (
    <div ref={myRef}>
      Hello, world!
    </div>
  );
}

在这个例子中，我们创建了一个名为 myRef 的 ref，然后将其传递给一个 div 元素。这样，我们就可以使用 myRef.current 属性来访问这个 div 元素了。

例子

以下是一个使用 useRef 的例子，展示了如何在组件卸载时进行一些清理操作：

import { useRef, useEffect } from 'react';

function MyComponent() {
  const intervalRef = useRef(null);

  useEffect(() => {
    intervalRef.current = setInterval(() => {
      console.log('Hello, world!');
    }, 1000);

    return () => {
      clearInterval(intervalRef.current);
    };
  }, []);

  return null;
}

在这个例子中，我们创建了一个名为 intervalRef 的 ref，将其初始值设置为 null。在 useEffect 中，我们使用 setInterval 定时器，将当前值赋值给 intervalRef.current 属性，并在组件卸载时，清除定时器。

结论

useRef 是 React 中非常有用的钩子之一，能够直接操作 DOM 元素，而无需通过 React 的 state 进行交互。在某些情况下，特别是需要访问 DOM 元素属性或方法时，使用 useRef 可以让我们更加方便地完成任务。