React 組件通信之發(fā)布訂閱模式

作者：時傾

來源：SegmentFault 思否社區(qū)

---

React 通信

react的數(shù)據(jù)流是單向的, react 通信有以下幾種方式：

• 父向子通信：傳入props
• 子向父通信：父組件向子組件傳一個函數(shù)，然后通過這個函數(shù)的回調(diào)，拿到子組件傳過來的值
• 父向?qū)O通信：利用context傳值。React.createContext()
• 兄弟間通信：

1、找一個相同的父組件，既可以用props傳遞數(shù)據(jù)，也可以用context的方式來傳遞數(shù)據(jù)。
2、用一些全局機制去實現(xiàn)通信，比如redux等
3、發(fā)布訂閱模式

---

兄弟間通信 - 發(fā)布訂閱模式

組件間通信需要引用一個類的實例，使用單例模式實現(xiàn)。

發(fā)布/訂閱模式

在 發(fā)布/訂閱模式 有?發(fā)布者?和?訂閱者，它們通過信道鏈接到一起。

其主要包含三個對象：

• 發(fā)布者：消息的發(fā)布者，往信道中投遞消息的對象。
• 訂閱者：訂閱一個或者多個信道消息的對象。
• 信道：每個信道都有一個名字，信道的實現(xiàn)細(xì)節(jié)對用戶代碼來說是隱藏的。

優(yōu)點

1. 松耦合：發(fā)布者和訂閱者的通信是在用戶代碼之外處理的，通過信道降低了發(fā)布者和訂閱者的耦合性
2. 可擴展性：發(fā)布/訂閱模式可以讓系統(tǒng)在無論什么時候都可以擴展
3. 靈活性：不需要擔(dān)心不同的組件是如何組合在一起的

缺點

1. 無法知道消息傳送是成功的還是失敗的，信道不會通知系統(tǒng)消息傳送的狀態(tài)
2. 隨著訂閱者和發(fā)布者數(shù)量的增加，不斷增加的消息傳送回導(dǎo)致架構(gòu)的不穩(wěn)定，容易在負(fù)載大的時候出問題

單例模式

確保一個類僅有一個實例，并提供一個訪問它的全局訪問點。

---

代碼實現(xiàn)

定義發(fā)布對象：

class?SingletonPublish?{
??constructor()?{
????this.listenList?=?{};
????this.instance?=?null;
??}

??static?getInstance()?{
????if?(!this.instance)?{
??????this.instance?=?new?SingletonPublish();
????}
????return?this.instance;
??}

??//?訂閱者添加訂閱事件
??addListen(key,?fn)?{
????if?(!this.listenList[key])?{
??????this.listenList[key]?=?[];
????}
????this.listenList[key].push(fn);
??}

??//?發(fā)布者發(fā)布消息，執(zhí)行訂閱者訂閱事件
??trigger()?{
????const?key?=?Array.from(arguments).shift();
????const?fns?=?this.listenList[key];
????if?(!fns?||?fns.length?===?0)?{
??????return?false;
????}

????fns.forEach((fn)?=>?{
??????fn.apply(this,?arguments);
????});
??}

??//?移除訂閱事件
??remove(key,?fn)?{
????const?fns?=?this.listenList[key];
????if?(!fns?||?fns.length?===?0)?return;

????if?(!fn)?{
??????this.listenList[key]?=?[];
????}?else?{
??????for?(let?l?=?fns.length?-?1;?l?>=?0;?l--)?{
????????if?(fn?===?fns[l])?{
??????????fns.splice(l,?1);
????????}
??????}
????}
??}
}

export?default?SingletonPublish.getInstance();

訂閱者訂閱一個back事件：

import?SingletonPublish?from?'../singleton-publish';

//?...
SingletonPublish.addListen('back',?()?=>?{
??console.log('get?--?back');
??SingletonPublish.remove('back',?hasExitAndVisible);
});
//?...

發(fā)布者發(fā)布一個back消息：

import?SingletonPublish?from?'../singleton-publish';

//?...
SingletonPublish.trigger('back');
//...

觀察者模式

在這種模式中，一個目標(biāo)對象（被觀察者）管理所有的依賴于它的對象（觀察者），并且在它本身的狀態(tài)發(fā)生變化的時候主動發(fā)出通知。

其主要包含兩個對象：

• 被觀察者
• 觀察者

缺點

1. 耦合問題：每個觀察者必須和被觀察對象綁定在一起，這引入了耦合
2. 性能問題：在最基本的實現(xiàn)中觀察對象必須同步地通知觀察者。這可能會導(dǎo)致性能瓶頸。

---

點擊左下角閱讀原文，到?SegmentFault 思否社區(qū)?和文章作者展開更多互動和交流，掃描下方”二維碼“或在“公眾號后臺“回復(fù)“?入群?”即可加入我們的技術(shù)交流群，收獲更多的技術(shù)文章~

-?END -