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

代码搬运媛2025-04-28 10:42

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

安装 mitt

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

复制代码

npm install mitt

使用

新建一个 eventBus.js 文件，创建事件总线，并暴露出去：
javascript 复制代码
```
import mitt from 'mitt';
const emitter = mitt();
export default emitter;    
```
新建一个发送事件的组件 SenderComponent.js。在按钮的点击事件处理函数里，借助emitter.emit方法发送一个名为message的事件，并且传递了一条消息。

javascript 复制代码

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;

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

javascript 复制代码

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 的组件通信。

mitt 库同样适用于 vue，使用方法也是同上一样的步骤，只是要遵循 vue 的语法。