mitt 事件发布-订阅库在 react 中的使用

mitt是一个轻量级的事件发布 - 订阅库，在 React 项目里，使用它能实现组件间的通信。下面来详细介绍一下 mitt 在 React 中的使用方法：

安装 mitt

在项目根目录下执行以下命令：

npm install mitt

使用

1. 新建一个 eventBus.js 文件，创建事件总线，并暴露出去：

   import mitt from 'mitt';
   const emitter = mitt();
   export default emitter;    
   

2. 新建一个发送事件的组件 SenderComponent.js。
   在按钮的点击事件处理函数里，借助emitter.emit方法发送一个名为message的事件，并且传递了一条消息。

import React from 'react';
import emitter from './eventBus';

const SenderComponent = () => {
    const handleClick = () => {
        // 发送事件，事件名为 'message'，并传递数据
        emitter.emit('message', 'Hello from SenderComponent!');
    };

    return (
        <button onClick={handleClick}>
            Send Message
        </button>
    );
};

export default SenderComponent;    

3. 新建一个接收事件的组件ReceiverComponent.js
   在useEffect钩子中，使用emitter.on方法监听message事件。当事件触发时，会执行对应的回调函数。组件卸载时，使用emitter.off方法移除监听器，以此避免内存泄漏。

import React, { useEffect } from 'react';
import emitter from './eventBus';

const ReceiverComponent = () => {
    useEffect(() => {
        // 监听 'message' 事件
        const handleMessage = (message) => {
            console.log('Received message:', message);
        };

        emitter.on('message', handleMessage);

        // 组件卸载时移除监听器
        return () => {
            emitter.off('message', handleMessage);
        };
    }, []);

    return (
        <div>
            Waiting for messages...
        </div>
    );
};

export default ReceiverComponent;    

到此就完整实现了 mitt 的组件通信。