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

ゝ一纸荒年。 2022-11-20 09:48 344阅读 0赞

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

发布-订阅模式，阮一峰在《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 的世界中，**它更多的以一种被称为发布/订阅模式的变种来实现**

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzIzMTMzNzgz_size_16_color_FFFFFF_t_70][]

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

从下面的代码来了解：

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][https_www.jianshu.com_p_594f018b68e7]

2. [https://blog.csdn.net/weixin\_42134714/article/details/85691808][https_blog.csdn.net_weixin_42134714_article_details_85691808]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzIzMTMzNzgz_size_16_color_FFFFFF_t_70]: /images/20221120/e3bec5f5566f4feea22cecf14527768b.png
[https_www.jianshu.com_p_594f018b68e7]: https://www.jianshu.com/p/594f018b68e7
[https_blog.csdn.net_weixin_42134714_article_details_85691808]: https://blog.csdn.net/weixin_42134714/article/details/85691808