React的基本組件元素是一個個組件，組件之間可能存在關聯、組合等關係。不同的組件之間，經常會發生數據傳遞或者交換，我們稱之為組件間通信。
根據傳遞的複雜程度，可以分為三種情況：
父子間通信，兄弟間通信，同其他外部庫通信。
父子間通信
在學習組件的時候，props是輸入，組件是輸出。在這裡的props，就是父向子傳遞的數據。而子向父傳遞數據，則是通過父級傳遞進來的props中的函數引用，間接的喚起父級處理函數，並傳入參數。
/* 父組件 */
export default class NameInput extends Component {
constructor(props) {
super(props);
this.state = {
value: "default"
};
this.handleSubChange = this.handleSubChange.bind(this);
}
handleSubChange(newValue) {
this.setState({ value: newValue });
}
render() {
return (
{this.state.value}
);
}
}
/* 子組件 */
export default class NameInput extends Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
}
handleChange() {
this.props.subClick("new sub");
}
render() {
return{this.props.sub};
}
}
在這個例子裡，通過調用props上傳遞進來的處理函數，達到了子向父傳遞數據的目的。
兄弟間通信
不使用其他庫的話，藉助React原生API，有兩種方法：
- 通過父組件做中轉
- 借用父組件以外，也可以使用react的Context API
關於Context API，我們還是先翻文檔Context。
Context主要是為了處理多個組件可能需要獲取同一組數據，例如文檔中提到的theme，以及B端系統經常需要獲取全局登錄態，都可以使用ContextAPI。
在Context中，有兩個重要的概念，Provider和Consumer。
Provider提供一個全局的數據源，訂閱了它的數據源的Cusumer，不論節點嵌套多深都可以獲取到Provider提供的數據。
看一個例子。
點我-CodeSandbox
在一些輕量級的應用中，基本上可以使用ContextAPI解決多級數據共享的問題。當然，如果要更強大，只能用Redux等庫了。
關於Redux的使用，會在下一篇詳細講解。
同其他外部庫通信
如果一個項目中，既有React，又有jQuery，又有Vue怎麼辦？怎麼解決這種情形下得數據流轉？
這是阿里的一道面試題，我那時沒有怎麼寫過React，基本上就是zepto和小程序，面試官沒有為難我，提了這樣的問題。當時我提出了一種想法，發佈訂閱加適配器模式。下面簡單說一下我的想法。
如果把這個場景抽象一下，可以看做是三種不同的組件需要相互通信，它們對數據的要求不一樣，數據格式不同，但是一旦數據打到各自的組件內，其實數據流就不需要我們關心了。
所以可以維護一個公共的數據集市，所有人都從數據集市裡取數據，也向數據集市中發數據，數據集市是一個公開的發佈者，各組件為訂閱者。
數據集市承擔了適配的工作，對各個組件傳進來的數據統一保存，在取數據時，根據組件的類型不同，派發不同形式的組件，這樣，基本上就將組件間通信提升至了一個統一的數據集市，避免了組件的之間一對一通信。
當然，這和flux的思想也很類似，統一數據源，統一分發，只和數據源交互，避免了多個組件間複雜通訊帶來的數據流混亂。
這些技術如何學習，有沒有免費資料？
對前端的技術，架構技術感興趣的同學關注我的頭條號，並在後臺私信發送關鍵字：“前端”即可獲取免費的架構師學習資料
知識體系已整理好，歡迎免費領取。還有面試視頻分享可以免費獲取。關注我，可以獲得沒有的架構經驗哦！
閱讀更多 前端攻城小牛 的文章
