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只在组件生命周期中调用一次，并正确地移除监听器。 以下方法有效地解决了这个问题：
-
使用
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 BBB;
}
emitter.on返回一个取消订阅函数unsubscribe。在useEffect的清理函数中调用unsubscribe()，确保无论组件是否重新渲染，事件监听器只会被添加一次，并在组件卸载时被移除。这是处理事件监听器生命周期的最佳实践。
通过以上方法，可以有效避免mitt库事件监听器在React应用中重复触发的现象，确保事件处理的准确性和可靠性。 记住，始终使用emitter.on返回的取消订阅函数来移除监听器。
