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

作者：時(shí)傾

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

---

React 通信

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

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

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

---

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

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

發(fā)布/訂閱模式

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

其主要包含三個(gè)對(duì)象：

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

優(yōu)點(diǎn)

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

缺點(diǎn)

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

單例模式

確保一個(gè)類(lèi)僅有一個(gè)實(shí)例，并提供一個(gè)訪(fǎng)問(wèn)它的全局訪(fǎng)問(wèn)點(diǎn)。

---

代碼實(shí)現(xiàn)

定義發(fā)布對(duì)象：

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();

訂閱者訂閱一個(gè)back事件：

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

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

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

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

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

觀(guān)察者模式

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

其主要包含兩個(gè)對(duì)象：

• 被觀(guān)察者
• 觀(guān)察者

缺點(diǎn)

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

---

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

-?END -