【react】兄弟組件的通訊方式，傳統非redux

不少用過redux開發的朋友們都知道，通常兄弟組件通訊可使用redux。

redux也是近期在擠時間學習中。可能也不是很懂，說不定是有錯誤的理解，如有。如今雖然本身搭建了一個react+router+redux的環境，可是還不知道應該怎麼用好。由於是徹底本身使用webpack從頭開始搭建的環境，不少搭建步驟都是網上搜的，每篇文章都不全。各類報錯。而後繼續百度搜錯誤解決辦法，才把問題一個個解決。

如今的環境完成度也相對好點了。可是每一個組件中都要寫上2個方法也是比較蛋疼的。

mapStateToProps和mapDispatchToProps，用於將reducer轉化成組件的props

這樣組件就能夠經過this.props.state拿到全部公用的state，

this.props.方法名就能拿到mapDispatchToProps中定義的方法，如：this.props.d2_1({type:"add"})

 

可是有部分公司或項目並無使用到redux和router。

就要使用一種全局變量的事件監聽的形式，最好就是作成一個公用方法來，方便後來調用。

//事件
var E={
	//自定義事件集合
	listeners: [],
	//自定義事件監聽
	listenner: {
		/**
		 * 添加、註冊
		 * @param ch {String} 事件（頻道）名稱
		 * @param callback {Function}回調函數
		 **/
		add: function(ch, callback) {
			E.listeners[ch] ? E.listeners[ch].push(callback) : E.listeners[ch] = [callback];
		},
		/**
		 * 觸發、廣播
		 * @param ch {String} 事件（頻道）名稱
		 * @param obj {JSON} 回調函數的傳回參數
		 **/
		call: function(ch, obj) {
			if (!(ch in E.listeners))
				return;
			var arr = E.listeners[ch].slice();
			~ function next() {
				var callback;
				while (callback = arr.shift()) {
					try {
						callback(obj);
						callback = null;
					} finally {
						callback && next();
					}
				}
			}();
		}
	}
}

 

調用方法是：

在待更新組件中添加事件監聽，參數：一個自定義事件名，一個回調函數。回調中setState更新組件便可

在觸發組件中添加事件觸發，參數：一個自定義事件名，一個傳遞過來的值或對象

如今的項目確實使用這個綽綽有餘。

我如今公司的項目用的就不是router+redux。就是傳統的純react，項目開始時，幾乎全部前端人員都不會react，本來都是傳統的es5+jquery開發模式，可是項目就要開始啓動。直接作業務，並無時間讓員工們去學習redux。使用react的目的是將本來的webapp項目使用react重構，以及在重構期間繼續完成原有需求，一直以來，項目的開發模式都是freemarker+jquery和react並行的。由於一邊新門戶，一邊老門戶，老門戶作了改動，新門戶也要跟着改動。及其浪費資源。由於沒有多少時間學習和培訓也是必然。