React 中 useEffect 事件监听和移除的方法

在 React 中，我们经常需要在组件中注册事件监听，例如 window 的 resize、scroll，或者自定义的事件。为了避免内存泄漏和重复注册，React 推荐使用 useEffect 来管理事件监听器的注册和移除。本文将详细讲解这种方法。

---

1. useEffect 的基本用法

useEffect 是 React 的副作用管理钩子，用于在组件渲染后执行额外逻辑。其基本形式如下：

useEffect(() => {
  // 执行副作用逻辑

  return () => {
    // 清理副作用
  };
}, [依赖]);

• 第一个参数是一个函数，包含副作用逻辑。

• 返回的函数是清理函数（cleanup function），在组件卸载或依赖变化时调用。

• 第二个参数是依赖数组，空数组 [] 表示只在组件挂载和卸载时执行一次。

---

2. 事件监听示例

假设我们需要监听一个自定义事件：

import { useEffect } from 'react';

export const eventListener = () => {
  useEffect(() => {
    const handleMessage = (event: MessageEvent) => {
      console.log('收到消息:', event.data);
    };

    // 注册事件监听器
    window.addEventListener('message', handleMessage);

    // 返回清理函数，在组件卸载时移除事件监听
    return () => {
      window.removeEventListener('message', handleMessage);
    };
  }, []);

  return null;
};

在这个例子中：

1. handleMessage 是事件处理函数。

2. addEventListener 注册事件监听。

3. useEffect 的返回函数移除事件监听器，保证组件卸载后不会继续调用 handleMessage。

---

3. 为什么需要移除事件监听

如果不移除监听器，可能会出现以下问题：

• 内存泄漏：事件仍然存在，占用内存。

• 重复调用：组件重新挂载时会再次注册，导致同一事件被触发多次。

• 闭包问题：事件可能使用旧的 props 或 state，导致逻辑错误。

通过在 useEffect 中返回清理函数，我们可以优雅地管理事件监听的生命周期。

---

4. 小结

• useEffect 可以用来注册和清理事件监听器。

• 返回的函数用于移除事件监听，防止内存泄漏和重复调用。

• 当事件处理函数依赖 props 或 state 时，需要注意闭包问题，可以使用 useCallback 或把依赖加入依赖数组。

---

 最佳实践
任何涉及 DOM 或外部对象的事件监听，都应该在 useEffect 中注册，并在返回函数中移除。这是 React 管理副作用的标准模式。