React 发布-订阅机制实现组件间信息通信 1

首先我们需要了解下什么是发布-订阅模式？

发布-订阅模式，阮一峰在《Javascript 异步编程的 4 种方法》书中写道：

我们假定，存在一个"信号中心"，某个任务执行完成，就向信号中心"发布"（publish）一个信号，其他任务可以向信号中心"订阅"（subscribe）这个信号，从而知道什么时候自己可以开始执行。这就叫做"发布/订阅模式"（publish-subscribe pattern），又称"观察者模式"（observer pattern）。

上面是关于 订阅-发布模式的一个抽象的定义，简单地讲发布-订阅和观察者混为一谈。但是，其实两者是有一定区别的。

《Learning JavaScript Design Patterns》一书这样说：

“While the Observer pattern is useful to be aware of, quite often in the JavaScript world, we’ll find it commonly implemented using a variation known as the Publish/Subscribe pattern.”
虽然 Observer 模式非常有用，但是在 JavaScript 的世界中，它更多的以一种被称为发布/订阅模式的变种来实现

 两者的最大区别在于，发布订阅模式有个事件调度中心。

 

 

从图中可以看出，观察者模式中观察者和目标直接进行交互，而发布订阅模式中统一由调度中心进行处理，订阅者和发布者互不干扰。这样一方面实现了解耦，还有就是可以实现更细粒度的一些控制。比如发布者发布了很多消息，但是不想所有的订阅者都接收到，就可以在调度中心做一些处理，类似于权限控制之类的。还可以做一些节流操作。

从下面的代码来了解：

class PubSub {
    constructor() {
        this.subscribers = {}
    }
    subscribe(type, fn) {
        if (!Object.prototype.hasOwnProperty.call(this.subscribers, type)) {
          this.subscribers[type] = [];
        }
        
        this.subscribers[type].push(fn);
    }
    unsubscribe(type, fn) {
        let listeners = this.subscribers[type];
        if (!listeners || !listeners.length) return;
        this.subscribers[type] = listeners.filter(v => v !== fn);
    }
    publish(type, ...args) {
        let listeners = this.subscribers[type];
        if (!listeners || !listeners.length) return;
        listeners.forEach(fn => fn(...args));        
    }
}

let ob = new PubSub();
ob.subscribe('add', (val) => console.log(val));
ob.publish('add', 1);

从上面代码可以看出，发布-订阅模式统一由调度中心处理，消除了发布者和订阅者之间的依赖。

 

利用发布-订阅模式驱动数据流，其是解决通信类问题的万金油。在前端应用非常广泛，比如：

前两年爆火的socket.io模块，它是一个典型的跨端发布-订阅模式的实现

在Node.js中，许多原生模块也是以EventEmitter为基础类实现

还有大家非常熟悉的，在Vue.js中座位常规操作而被推广的全局实践总栈EventBus

虽然这些名字各不相同，但是内核是一致的，都是发布-订阅模型。

 

参考资料：

1. https://www.jianshu.com/p/594f018b68e7

2. https://blog.csdn.net/weixin_42134714/article/details/85691808