React useEffect 中如何取消事件监听 removeEventListener

在 React 中使用 useEffect 钩子来添加和清除事件监听器是一种常见的模式。添加监听器通常在 useEffect 的回调函数中进行，而取消监听器则在 useEffect 的清除函数中进行。为了更好地展示这一点，我将提供一个具体的例子。

假设我们有一个组件，需要在用户点击页面时执行某些操作。我们将使用 useEffect 来添加和移除这个点击事件的监听器。

javascript
import React, { useEffect } from 'react';

function ClickHandlerComponent() {
  useEffect(() => {
    // 定义事件处理函数
    const handleDocumentClick = () => {
      console.log('页面被点击了！');
    };

    // 添加事件监听器
    document.addEventListener('click', handleDocumentClick);

    // 返回一个清除函数
    // 当组件卸载时，React 会执行这个函数来清除资源
    return () => {
      // 移除事件监听器
      document.removeEventListener('click', handleDocumentClick);
    };
  }, []);  // 空依赖数组表示这个 effect 只在组件挂载时运行一次，并在卸载时清理

  return <div>点击页面查看控制台输出。</div>;
}

export default ClickHandlerComponent;

在这个例子中：

1. useEffect 的回调函数中，我们添加了一个监听全局 click 事件的事件监听器。
2. 我们定义了 handleDocumentClick 函数，每当有点击事件发生时，它将被调用。
3. 使用 addEventListener 将 handleDocumentClick 添加为 click 事件的监听器。
4. useEffect 钩子返回了一个清除函数。这个函数包含了移除相应事件监听器的逻辑，即使用 removeEventListener。
5. 当组件被卸载时，React 自动调用此清除函数来执行清理操作，从而避免内存泄漏。

这是 useEffect 中添加和清除事件监听器的一个典型案例。使用这种模式可以确保组件的资源得到适当管理，并且不会在组件卸载后留下未清除的事件监听器。