标签导航：

react中mitt库事件监听器重复触发的原因是什么以及如何解决？

React应用中mitt库事件监听器重复触发问题详解及解决方案

在使用mitt库实现React组件间通信时，开发者经常遇到事件监听器重复触发的问题：组件A发出事件后，组件B的监听器会多次执行。本文将分析此问题的原因，并提供有效的解决方法。

问题描述：

组件A使用emitter.emit('e1', data)发送事件，组件B使用emitter.on('e1', callback)监听事件。然而，组件B的回调函数callback却执行了多次，而非预期的一次。

问题分析：

虽然代码中emitter.on可能只在组件B挂载时执行一次，但如果组件B由于状态变化或父组件重新渲染而重新渲染，useEffect钩子将再次执行，从而重复添加事件监听器。 这导致同一个事件被多次监听，从而导致事件被多次触发。

解决方案：

关键在于确保emitter.on只在组件生命周期中调用一次，并正确地移除监听器。 以下方法有效地解决了这个问题：

  1. 使用useEffect的清理函数： 在useEffect的第二个参数（依赖项数组）中，添加一个清理函数，用于在组件卸载前移除事件监听器。
import { useEffect } from 'react';
import Emitter from '../../emitter';

function Index() {
    useEffect(() => {
        const unsubscribe = Emitter.on('e1', (e) => {
            console.log('mitt test', e);
        });
        return () => {
            unsubscribe(); // 组件卸载前移除监听器
        };
    }, []); // 空依赖数组，确保只在挂载时执行一次

    return <div>BBB</div>;
}

emitter.on返回一个取消订阅函数unsubscribe。在useEffect的清理函数中调用unsubscribe()，确保无论组件是否重新渲染，事件监听器只会被添加一次，并在组件卸载时被移除。这是处理事件监听器生命周期的最佳实践。

通过以上方法，可以有效避免mitt库事件监听器在React应用中重复触发的现象，确保事件处理的准确性和可靠性。 记住，始终使用emitter.on返回的取消订阅函数来移除监听器。