【Lolttery】專案開發日誌 （八）通過事件通知 實現react js元件間通訊

晦若晨曦發表於2017-12-14
事件ReactJS元件

##react.js的天坑

挺長時間沒有更新簡書了。

最近Lolttery已經進入了內測階段，改bug改得頭昏腦漲。

還有很多諸如react.js的填坑工作，比如本次。

react.js對於父子元件之間的通訊還是比較簡單的。但是對於兩個元件之間的通訊就很操蛋了。

另一個問題就是對於其它js框架的聯動也會遇到這類的問題。

在官方給出的方案是：

對於沒有 父-子 關係的元件間的通訊，你可以設定你自己的全域性事件系統。 在 componentDidMount() 裡訂閱事件，在 componentWillUnmount() 裡退訂，然後在事件回撥裡呼叫 setState()。
複製程式碼

我當時的表情是：

呵呵

##做一個全域性事件系統

既然人家說沒轍，那就做唄。

事件系統的核心也就是訂閱-通知，其實對於javascript來說，挺好實現的。

話不多說，直接看程式碼：

Commons.EventDriver = (function(){

        var regtable = {};

        this.register = function(event,callback){
            var reciverlist = regtable[event]||[];
            reciverlist.push(callback);
            regtable[event] = reciverlist;
        };

        this.unregister = function(event,callback){
            var reciverlist = regtable[event]||[];
            var mark = -1;
            for(var i=0;i<reciverlist;i++){
                if(reciverlist[i]==callback){
                    mark = i;
                    break;
                }
            }
            if(mark!=-1){
                reciverlist.splice(mark,1);
            }
        };

        this.send = function(event,props){
            var reciverlist = regtable[event];
            console.log("call this");
            if(reciverlist){
                for(var i=0;i<reciverlist.length;i++){
                    reciverlist[i](props);
                }
            }
        };
        return this;
    }());
複製程式碼

程式碼很簡單，三個方法：註冊，登出，傳送。

通過一個全域性的事件管理物件，以事件名稱作為key，在此註冊一個回撥函式，當傳送事件時，依次觸發所有已註冊的回撥函式。為了方便引數傳遞，還附帶了一個Prop物件儲存引數。

註冊如下：

 Commons.EventDriver.register("updateUserInfo",this.reload);
複製程式碼

通知如下：

Commons.EventDriver.send("updateUserInfo");
複製程式碼

##總結

其實呢，這一套東西不僅是實現react.js的元件間通訊，更能達到事件驅動執行的效果。當然現在的功能還十分簡陋，但是核心的思想是木有問題的。

最後呢，其實用來做組元件間通訊的時候還真不多，更多的被我拿來在頁面上通過js呼叫元件內方法了。

相關文章