迹忆客 专注技术分享

在 React 中删除事件监听器：

1. 在 useEffect 挂钩中添加事件侦听器。
2. 从 useEffect 挂钩返回一个函数。
3. 当组件卸载时，使用 removeEventListener 方法移除事件监听器。

import {useRef, useEffect} from 'react';

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

  useEffect(() => {
    const handleClick = event => {
      console.log('Button clicked');
    };

    const element = ref.current;

    element.addEventListener('click', handleClick);

    // 👇️ remove the event listener when the component unmounts
    return () => {
      element.removeEventListener('click', handleClick);
    };
  }, []);

  return (
    <div>
      <button ref={ref}>Click</button>
    </div>
  );
};

export default App;

我们在组件的 useEffect 钩子中为一个元素添加了一个事件监听器。

如果要向窗口或文档对象添加事件侦听器，请使用相同的方法，但不包括 ref。

useEffect(() => {
  const handleClick = event => {
    console.log('Button clicked');
  };

  const element = ref.current;

  element.addEventListener('click', handleClick);

  // 👇️ remove the event listener when the component unmounts
  return () => {
    element.removeEventListener('click', handleClick);
  };
}, []);

我们将一个空的 dependencies 数组传递给 useEffect 钩子，因此它只会在组件安装时运行。

我们只想调用一次 addEventListener 方法 - 当组件安装时。

我们将对该元素的引用存储在一个变量中，并使用 addEventListener 方法向按钮添加一个点击事件侦听器。

该方法采用的第一个参数是要侦听的事件类型，第二个参数是在指定类型的事件发生时调用的函数。

我们从 useEffect 钩子返回的函数在组件卸载时被调用。

return () => {
  element.removeEventListener('click', handleClick);
};

我们使用 removeEventListener 方法来删除我们之前注册的事件监听器。

清理步骤很重要，因为我们要确保我们的应用程序中没有任何内存泄漏。

我们传递给 removeEventListener 方法的 2 个参数是：

• 要为其移除事件侦听器的事件类型。
• 相应的事件处理函数。

这是一种更好的方式来可视化如何在 React 中删除事件监听器。

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

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

  useEffect(() => {
    const handleClick = event => {
      console.log('Button clicked');
      console.log('jiyik.com');
    };

    const element = ref.current;

    element.addEventListener('click', handleClick);

    // 👇️ remove the event listener when the component unmounts
    return () => {
      element.removeEventListener('click', handleClick);
      console.log('✅ Event listener removed');
    };
  }, []);

  return (
    <div>
      <button ref={ref}>Click</button>
    </div>
  );
};

const App = () => {
  const [isShown, setIsShown] = useState(true);

  return (
    <div>
      {isShown && <Box />}

      <br />
      <br />

      <button onClick={() => setIsShown(isShown => !isShown)}>
        Toggle box visibility
      </button>
    </div>
  );
};

export default App;

Box 组件注册了一个点击事件监听器，每次用户点击按钮时都会触发该监听器。

组件的 useEffect 钩子返回一个清理函数，该函数在组件卸载时运行。

return () => {
  element.removeEventListener('click', handleClick);
  console.log('✅ Event listener removed');
};

我们在 App 组件中使用了一个布尔状态变量来渲染和卸载 Box 组件。

当 Box 组件卸载时，“Event listener removed”消息将记录到控制台，事件监听器将被删除。