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