React-Toastify源码中的设计模式：观察者模式在eventManager中的应用
【免费下载链接】react-toastify React notification made easy 🚀 ! 项目地址: https://gitcode.***/gh_mirrors/re/react-toastify
观察者模式简介
观察者模式（Observer Pattern）是一种行为型设计模式，它定义了对象之间的一对多依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都会得到通知并自动更新。这种模式常用于实现事件处理系统、发布-订阅模型等场景。在React-Toastify中，观察者模式被广泛应用于事件管理系统，特别是在eventManager模块中，它负责协调不同组件之间的通信和状态同步。
React-Toastify中的事件管理架构
React-Toastify是一个用于在React应用中显示通知消息的库，它提供了简单易用的API和灵活的配置选项。在其内部实现中，eventManager模块扮演着核心角色，负责管理事件的注册、触发和取消等操作。通过观察者模式，eventManager能够高效地协调Toast组件、ToastContainer组件以及其他相关模块之间的通信。
eventManager模块概览
eventManager模块的源代码位于src/core/eventManager.ts文件中。它定义了一个Event枚举类型，包含了各种可能的事件类型，如Show、Clear、DidMount、WillUnmount等。同时，它还定义了一个EventManager接口，该接口包含了事件注册（on）、事件取消（off）、事件触发（emit）等方法。
事件类型定义
在eventManager中，事件类型被定义为一个枚举：
export const enum Event {
Show,
Clear,
DidMount,
WillUnmount,
Change,
ClearWaitingQueue
}
这些事件类型涵盖了通知组件从创建到销毁的整个生命周期，以及状态变化等关键节点。
观察者模式在eventManager中的具体实现
事件注册与管理
eventManager使用Map数据结构来存储事件与对应的回调函数列表。在on方法中，当一个事件被注册时，它会检查该事件是否已经存在于list属性中，如果不存在则创建一个新的条目，然后将回调函数添加到对应的列表中：
on(event: Event, callback: Callback) {
this.list.has(event) || this.list.set(event, []);
this.list.get(event)!.push(callback);
return this;
}
这种实现方式允许一个事件类型可以注册多个回调函数，从而实现一对多的依赖关系。
事件触发机制
当调用emit方法触发一个事件时，eventManager会遍历该事件对应的所有回调函数，并通过setTimeout将它们放入事件队列中执行：
emit(event: Event, ...args: any[]) {
this.list.has(event) &&
this.list.get(event)!.forEach((callback: Callback) => {
const timer: TimeoutId = setTimeout(() => {
// @ts-ignore
callback(...args);
}, 0);
this.emitQueue.has(event) || this.emitQueue.set(event, []);
this.emitQueue.get(event)!.push(timer);
});
}
使用setTimeout可以确保回调函数在当前调用栈执行完毕后再执行，从而避免阻塞主线程，并保证事件处理的顺序性。
事件取消与资源清理
为了防止内存泄漏，eventManager提供了off方法用于取消事件注册，以及cancelEmit方法用于取消尚未执行的事件回调：
off(event, callback) {
if (callback) {
const cb = this.list.get(event)!.filter(cb => cb !== callback);
this.list.set(event, cb);
return this;
}
this.list.delete(event);
return this;
}
cancelEmit(event) {
const timers = this.emitQueue.get(event);
if (timers) {
timers.forEach(clearTimeout);
this.emitQueue.delete(event);
}
return this;
}
这些方法确保了在组件卸载或不再需要监听事件时，可以正确地清理相关资源。
观察者模式在实际场景中的应用
Toast组件与eventManager的交互
在React-Toastify中，当调用toast函数显示一个通知时，它会通过eventManager触发Show事件。ToastContainer组件会监听这个事件，并在接收到通知后渲染对应的Toast组件。这种交互方式使得toast函数和ToastContainer组件之间解耦，它们不需要直接引用对方，而是通过eventManager进行间接通信。
相关代码可以在src/core/toast.ts文件中找到，其中dispatchToast函数负责触发Show事件：
function dispatchToast<TData>(
content: ToastContent<TData>,
options: NotValidatedToastProps
): Id {
if (containers.size > 0) {
eventManager.emit(Event.Show, content, options);
} else {
queue.push({ content, options });
}
return options.toastId;
}
容器组件的生命周期管理
ToastContainer组件在挂载和卸载时，会分别触发DidMount和WillUnmount事件。eventManager会监听这些事件，并相应地更新容器实例的状态：
eventManager
.on(Event.DidMount, (containerInstance: ContainerInstance) => {
latestInstance = containerInstance.containerId || containerInstance;
containers.set(latestInstance, containerInstance);
// ...
})
.on(Event.WillUnmount, (containerInstance: ContainerInstance) => {
containers.delete(containerInstance.containerId || containerInstance);
// ...
});
这种机制确保了eventManager始终能够追踪当前活跃的容器实例，从而正确地路由事件和管理通知队列。
观察者模式的优势与局限性
优势
-
松耦合：通过事件机制，组件之间不需要直接引用，降低了代码的耦合度，提高了可维护性和可扩展性。
-
灵活性：可以动态地添加或移除事件监听器，适应不同的场景需求。
-
可重用性：
eventManager模块可以作为一个独立的事件处理系统，被应用于其他需要事件通信的场景。
局限性
-
调试难度增加：事件流的间接性使得调试时难以追踪事件的来源和处理过程。
-
潜在的性能问题：如果注册了过多的事件监听器或事件触发过于频繁，可能会影响应用的性能。
-
内存泄漏风险：如果忘记在组件卸载时取消事件监听器，可能会导致内存泄漏。
总结
在React-Toastify中，观察者模式通过eventManager模块得到了巧妙的应用，它为不同组件之间的通信提供了高效、灵活的解决方案。通过事件的注册、触发和取消机制，eventManager成功地实现了一对多的依赖关系，使得通知消息的显示、更新和销毁等操作能够无缝协作。
理解React-Toastify中观察者模式的实现，不仅有助于我们更好地使用这个库，还能为我们自己的项目设计提供借鉴。在实际开发中，我们可以根据具体需求，合理地运用观察者模式来解耦组件、优化代码结构，从而构建更加健壮和可维护的应用。
参考资料
- React-Toastify官方文档
- 设计模式：观察者模式
- src/core/eventManager.ts
- src/core/toast.ts
【免费下载链接】react-toastify React notification made easy 🚀 ! 项目地址: https://gitcode.***/gh_mirrors/re/react-toastify
