Hook 中的一个坑：用 useRef 订阅自定义事件，你以为用对了吗？

2024-01-02 10:21:25

在 React 中，Hook 是一个特殊的函数，它允许您在函数组件中使用状态和生命周期方法。useRef 是一个特殊的 Hook，它允许您在函数组件中创建一个可变的引用。这个引用可以指向一个 DOM 元素、一个对象，甚至是另一个函数。

在 React 中，useRef 通常用于以下场景：

创建一个可变的引用，以便在组件之间传递数据。
在组件卸载时执行清理操作。
在组件渲染时执行一些操作。

在 React Hook 中，useRef 也可以用于订阅自定义事件。自定义事件是您自己定义的事件，它可以由您自己的代码触发。要使用 useRef 订阅自定义事件，您可以按照以下步骤进行操作：

在您的组件中创建一个 useRef 变量。
将 useRef 变量指向一个事件处理函数。
在您想要订阅的元素上添加一个自定义事件监听器，并将 useRef 变量指向的事件处理函数作为参数传递给监听器。

例如，以下代码演示了如何在 React Hook 中使用 useRef 订阅自定义事件：

import { useRef } from "react";

const MyComponent = () => {
  const ref = useRef(null);

  useEffect(() => {
    const element = ref.current;

    element.addEventListener("my-custom-event", (event) => {
      console.log(event);
    });

    return () => {
      element.removeEventListener("my-custom-event", (event) => {
        console.log(event);
      });
    };
  }, []);

  return <div ref={ref} />;
};