「React Native」Event Bus,消息總線

(一)父子間組件通信:
?? 一般使用props静袖,回調(diào)函數(shù)進(jìn)行通信觉鼻。
(二)跨組件之間通信:
??(1)React Native提供了DeviceEventEmitter發(fā)事件、監(jiān)聽(比較重)
事件來完成父子間通信
??(2)閉包队橙,逐級透傳值(耦合度過高)
??(3)通過鍵值對存儲來達(dá)到事件總線的效果坠陈,從而達(dá)到父子之間解耦。
(三)優(yōu)缺點(diǎn)比較:
相比于發(fā)事件捐康、閉包傳值仇矾,采用鍵值對存儲來達(dá)到時間總線的效果更為輕量級,也完成了解耦解总。
(四)源碼如下:




/**
 * 事件總線贮匕,使用鍵值對存儲
 * @author zhengyixue
 */

class EventBus {
    constructor() {
        this.events = this.events || new Object();
    }
}

//構(gòu)造函數(shù)需要存儲event事件
//發(fā)布事件,參數(shù)是事件的type和需要傳遞的參數(shù)
EventBus.prototype.emit = function (type, ...args) {
    let e;
    e = this.events[type];
    // 查看這個type的event有多少個回調(diào)函數(shù)倾鲫,如果有多個需要依次調(diào)用粗合。
    if (Array.isArray(e)) {
        for (let i = 0; i < e.length; i++) {
            e[i].apply(this, args);
        }
    } else {
        e.apply(this, args);
    }
};

//監(jiān)聽函數(shù),參數(shù)是事件type和觸發(fā)時需要執(zhí)行的回調(diào)函數(shù)
EventBus.prototype.addListener = function (type, fun) {
    const e = this.events[type];
    let currentIndex = -1
    if (!e) {   //如果從未注冊過監(jiān)聽函數(shù)乌昔,則將函數(shù)放入數(shù)組存入對應(yīng)的鍵名下
        this.events[type] = [fun];
        currentIndex = 0
    } else {  //如果注冊過,則直接放入
        e.push(fun);
        //獲取當(dāng)前組件監(jiān)聽函數(shù)壤追,在觀察函數(shù)數(shù)組中的索引磕道,移除監(jiān)聽時使用
        currentIndex = this.events[type].length - 1
    }
    return { type, index: currentIndex}
};


//移除監(jiān)聽
EventBus.prototype.remove = function (subscribe) {
    let { type, index } = subscribe
    let e;
    e = this.events[type];
    // 查看這個type的event有多少個回調(diào)函數(shù),如果有多個需要依次調(diào)用行冰。
    if (Array.isArray(e)) {
        //監(jiān)聽的函數(shù)為空溺蕉,則空處理
        if (e.length === 0) {
            return
        } else if (e.length === 1) {
            //只有一個監(jiān)聽的函數(shù),則直接移除監(jiān)聽
            e.splice(0, 1)
        } else {
            //如果同一個key存在多個監(jiān)聽函數(shù)悼做,只移除當(dāng)前組件監(jiān)聽函數(shù)
            for (let i = 0; i < e.length; i++) {
                if (index > 0 && i === index) {
                    e.splice(index, 1)
                }
            }
        }
    } else {
        e = []
    }
};

//移除所有監(jiān)聽
EventBus.prototype.removeAll = function () {
    //移除所有監(jiān)聽函數(shù)
    if (this.events.length > 0) {
        this.events.length = 0;
    }
};

const eventBus = new EventBus();
export default eventBus;

(五)用法:
(1)發(fā)事件:

EventBus.emit('key',value)

(2)接受事件:

this.subscribe = EventBus.addListener("key", data => {
            console.log("message==", data);
            this.setState({
                data: data
            });
        });

(3)移除監(jiān)聽(componentWillUnmount):

        EventBus.remove(this.subscribe)
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末疯特,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子肛走,更是在濱河造成了極大的恐慌漓雅,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,402評論 6 499
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件朽色,死亡現(xiàn)場離奇詭異邻吞,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)葫男,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,377評論 3 392
  • 文/潘曉璐 我一進(jìn)店門抱冷,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人梢褐,你說我怎么就攤上這事旺遮≌匝叮” “怎么了?”我有些...
    開封第一講書人閱讀 162,483評論 0 353
  • 文/不壞的土叔 我叫張陵耿眉,是天一觀的道長边翼。 經(jīng)常有香客問我,道長跷敬,這世上最難降的妖魔是什么讯私? 我笑而不...
    開封第一講書人閱讀 58,165評論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮西傀,結(jié)果婚禮上斤寇,老公的妹妹穿的比我還像新娘。我一直安慰自己拥褂,他們只是感情好娘锁,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,176評論 6 388
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著饺鹃,像睡著了一般莫秆。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上悔详,一...
    開封第一講書人閱讀 51,146評論 1 297
  • 那天镊屎,我揣著相機(jī)與錄音,去河邊找鬼茄螃。 笑死缝驳,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的归苍。 我是一名探鬼主播用狱,決...
    沈念sama閱讀 40,032評論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼拼弃!你這毒婦竟也來了夏伊?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,896評論 0 274
  • 序言:老撾萬榮一對情侶失蹤吻氧,失蹤者是張志新(化名)和其女友劉穎溺忧,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體医男,經(jīng)...
    沈念sama閱讀 45,311評論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡砸狞,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,536評論 2 332
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了镀梭。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片刀森。...
    茶點(diǎn)故事閱讀 39,696評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖报账,靈堂內(nèi)的尸體忽然破棺而出研底,到底是詐尸還是另有隱情埠偿,我是刑警寧澤,帶...
    沈念sama閱讀 35,413評論 5 343
  • 正文 年R本政府宣布榜晦,位于F島的核電站冠蒋,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏乾胶。R本人自食惡果不足惜抖剿,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,008評論 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望识窿。 院中可真熱鬧斩郎,春花似錦、人聲如沸喻频。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽甥温。三九已至锻煌,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間姻蚓,已是汗流浹背宋梧。 一陣腳步聲響...
    開封第一講書人閱讀 32,815評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留狰挡,地道東北人乃秀。 一個月前我還...
    沈念sama閱讀 47,698評論 2 368
  • 正文 我出身青樓,卻偏偏與公主長得像圆兵,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子枢贿,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,592評論 2 353