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

來源 | https://segmentfault.com/a/1190000039195677

react 通信

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

• 父向子通信：傳入props

• 子向父通信：父組件向子組件傳一個(gè)函數(shù)，然后通過這個(gè)函數(shù)的回調(diào)，拿到子組件傳過來的值

• 父向?qū)O通信：利用context傳值。React.createContext()

• 兄弟間通信：

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

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

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

發(fā)布/訂閱模式

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

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

• 發(fā)布者：消息的發(fā)布者，往信道中投遞消息的對象。

• 訂閱者：訂閱一個(gè)或者多個(gè)信道消息的對象。

• 信道：每個(gè)信道都有一個(gè)名字，信道的實(shí)現(xiàn)細(xì)節(jié)對用戶代碼來說是隱藏的。

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

1. 松耦合：發(fā)布者和訂閱者的通信是在用戶代碼之外處理的，通過信道降低了發(fā)布者和訂閱者的耦合性

2. 可擴(kuò)展性：發(fā)布/訂閱模式可以讓系統(tǒng)在無論什么時(shí)候都可以擴(kuò)展

3. 靈活性：不需要擔(dān)心不同的組件是如何組合在一起的

缺點(diǎn)

1. 無法知道消息傳送是成功的還是失敗的，信道不會通知系統(tǒng)消息傳送的狀態(tài)

2. 隨著訂閱者和發(fā)布者數(shù)量的增加，不斷增加的消息傳送回導(dǎo)致架構(gòu)的不穩(wěn)定，容易在負(fù)載大的時(shí)候出問題

單例模式

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

代碼實(shí)現(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();

訂閱者訂閱一個(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');//...

觀察者模式

• 被觀察者
• 觀察者

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

本文完?