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只在组件生命周期中调用一次，并正确地移除监听器。 以下方法有效地解决了这个问题：

使用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>;}

登录后复制