前端组件通信新姿势：用mitt实现Toast组件的优雅通信

大家好，我是FogLetter，今天要和大家分享一个前端开发中的实用技巧------如何使用mitt这个轻量级的事件总线库来实现跨组件通信，并以一个自定义Toast组件为例，展示如何优雅地解决组件间通信问题。

一、为什么我们需要事件总线？

在前端开发中，组件通信是一个永恒的话题。随着项目规模的扩大，组件层级越来越深，父子组件、兄弟组件、跨层级组件之间的通信变得越来越复杂。

传统的解决方案有：

Props/回调：适合父子组件通信，但层级深了就会形成"prop drilling"
Context API：适合全局状态，但会导致不必要的重渲染
状态管理库：如Redux，适合复杂状态管理，但有点杀鸡用牛刀的感觉

而事件总线提供了一种发布-订阅模式的解决方案，让组件之间可以松耦合地通信，特别适合像Toast这种需要全局触发的UI组件。

二、mitt简介：200字节的事件总线

mitt是一个超轻量级的事件总线库，只有200字节大小，却提供了强大的功能：

支持事件的监听(on)和触发(emit)
支持一次性事件
支持清除所有事件
TypeScript友好

它的API极其简单：

javascript 复制代码

import mitt from 'mitt'

const emitter = mitt()

// 监听事件
emitter.on('foo', e => console.log('foo', e))

// 触发事件
emitter.emit('foo', { a: 'b' })

// 清除所有事件
emitter.all.clear()

三、实战：基于mitt的Toast组件

让我们来看一个实际的例子------实现一个全局Toast通知组件。

1. Toast组件设计需求

可以在任意位置触发显示
显示用户、铃铛、邮件三种信息的计数
自动2秒后消失
有漂亮的动画效果
样式可自定义，不受UI库限制

2. 实现思路

使用mitt作为事件总线，任何组件都可以通过触发事件来显示Toast，而Toast组件只需要监听这个事件即可。

3. 代码实现

3.1 创建事件总线

首先创建一个单独的文件来管理Toast相关的事件：

javascript 复制代码

// toastController.js
import mitt from 'mitt'

// 创建mitt实例
export const toastEvents = mitt()

// 封装一个方便的showToast方法
export function showToast(user = 0, bell = 0, mail = 0) {
  toastEvents.emit('show', { user, bell, mail })
}

3.2 实现Toast组件

javascript 复制代码

import styles from './toast.module.css'
import { useState, useEffect } from 'react'
import { toastEvents } from './toastController'

const Toast = () => {
  const [isVisible, setIsVisible] = useState(false)
  const [data, setData] = useState({
    user: 0,
    bell: 0,
    mail: 0
  })
  
  useEffect(() => {
    const show = (info) => {
      setData(info)
      setIsVisible(true)
      setTimeout(() => {
        setIsVisible(false)
      }, 2000)
    }
    
    // 订阅show事件
    toastEvents.on('show', show)
    
    // 组件卸载时取消订阅
    return () => toastEvents.off('show', show)
  }, [])
  
  if (!isVisible) return null
  
  return (
    <div className={styles.toastWrapper}>
      <div className={styles.toastItem}>👤 {data.user}</div>
      <div className={styles.toastItem}>🔔 {data.bell}</div>
      <div className={styles.toastItem}>✉ {data.mail}</div>
      <div className={styles.toastArrow}></div>
    </div>
  )
}

export default Toast

3.3 Toast样式

css 复制代码

.toastWrapper {
  position: fixed;
  bottom: 120px;
  right: 20px;
  background-color: #1890ff;
  border-radius: 16px;
  color: white;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  font-size: 24px;
  display: flex;
  gap: 24px;
  align-items: center;
  z-index: 1000;
  animation: fadeIn 0.3s ease-out;
}

.toastItem {
  display: flex;
  align-items: center;
  gap: 8px;
}

.toastArrow {
  position: absolute;
  bottom: -12px;
  right: 32px;
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 12px solid #1890ff;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0px);
  }
}

4. 使用Toast组件

在应用的最外层渲染Toast组件：

javascript 复制代码

function App() {
  return (
    <div className="App">
      {/* 其他内容 */}
      <Toast />
    </div>
  )
}

然后在任何需要显示Toast的地方：

javascript 复制代码

import { showToast } from './toastController'

// 显示Toast
showToast(1, 2, 3)

// 或者带部分参数
showToast(0, 5, 0)

四、实现原理分析

这个实现的核心是发布-订阅模式：

发布者(Publisher) ：调用showToast函数的地方，通过emit发布事件
事件总线(Event Bus)：mitt实例，负责传递事件
订阅者(Subscriber) ：Toast组件，通过on监听事件

这种模式的优点在于：

松耦合：发布者和订阅者不需要知道对方的存在
灵活性：可以在任何地方触发Toast，不受组件层级限制
可维护性：通信逻辑集中管理，易于维护

五、性能与注意事项

虽然mitt非常轻量，但在使用时还是需要注意以下几点：

内存泄漏：一定要在组件卸载时取消事件监听
事件命名：使用清晰明确的事件名，避免冲突
适度使用：不要滥用事件总线，简单的父子通信还是用props
TypeScript支持：mitt对TypeScript支持良好，可以定义事件类型

六、与其他方案的对比

方案	适用场景	优点	缺点
Props/回调	父子组件通信	简单直接	深层组件需要层层传递
Context API	跨层级组件共享状态	React原生支持	可能导致不必要的重渲染
Redux	复杂全局状态管理	功能强大	学习曲线陡峭，样板代码多
事件总线	松耦合的组件通信	简单灵活，不受层级限制	需要手动管理事件监听

七、扩展思考

基于这种模式，我们可以轻松扩展更多功能：

不同类型的Toast：通过不同的事件类型显示成功、错误、警告等Toast
队列管理：当多个Toast快速触发时，可以实现队列依次显示
持久化Toast：某些重要的通知可以手动关闭而不是自动消失
动画效果：添加更多的入场出场动画

八、总结

通过mitt实现的事件总线模式，我们打造了一个灵活、解耦的Toast通知系统。这种模式不仅适用于Toast，还可以应用于：

全局模态框控制
用户登录状态通知
跨组件的数据同步
复杂的多步骤交互

记住，技术选型没有银弹，事件总线虽好，但也要根据实际场景合理使用。希望这篇分享对你有帮助，如果有任何问题，欢迎在评论区留言讨论！