react系列（三）元件間通訊
元件間通訊
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 (
<div>
<div>{this.state.value}</div>
<Sub sub="sub1" subClick={this.handleSubChange} />
</div>
);
}
}
/* 子元件 */
export default class NameInput extends Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
}
handleChange() {
this.props.subClick("new sub");
}
render() {
return <div onClick={this.handleChange}>{this.props.sub}</div>;
}
}
在這個例子裡，通過呼叫props上傳遞進來的處理函式，達到了子向父傳遞資料的目的。
兄弟間通訊
不使用其他庫的話，藉助React原生API，有兩種方法：
- 通過父元件做中轉
- 借用父元件以外，也可以使用react的Context API
關於Context API，我們還是先翻文件ofollow,noindex" target="_blank">Context 。
Context主要是為了處理多個元件可能需要獲取同一組資料，例如文件中提到的theme，以及B端系統經常需要獲取全域性登入態，都可以使用ContextAPI。
在Context中，有兩個重要的概念，Provider和Consumer。
Provider提供一個全域性的資料來源，訂閱了它的資料來源的Cusumer，不論節點巢狀多深都可以獲取到Provider提供的資料。
看一個例子。
在一些輕量級的應用中，基本上可以使用ContextAPI解決多級資料共享的問題。當然，如果要更強大，只能用Redux等庫了。
關於Redux的使用，會在下一篇詳細講解。
同其他外部庫通訊
如果一個專案中，既有React，又有jQuery，又有Vue怎麼辦？怎麼解決這種情形下得資料流轉？
這是阿里的一道面試題，我那時沒有怎麼寫過React，基本上就是zepto和小程式，面試官沒有為難我，提了這樣的問題。當時我提出了一種想法，釋出訂閱加介面卡模式。下面簡單說一下我的想法。
如果把這個場景抽象一下，可以看做是三種不同的元件需要相互通訊，它們對資料的要求不一樣，資料格式不同，但是一旦資料打到各自的元件內，其實資料流就不需要我們關心了。
所以可以維護一個公共的資料集市，所有人都從資料集市裡取資料，也向資料集市中發資料，資料集市是一個公開的釋出者，各元件為訂閱者。
資料集市承擔了適配的工作，對各個元件傳進來的資料統一儲存，在取資料時，根據元件的型別不同，派發不同形式的元件，這樣，基本上就將元件間通訊提升至了一個統一的資料集市，避免了元件的之間一對一通訊。
當然，這和flux的思想也很類似，統一資料來源，統一分發，只和資料來源互動，避免了多個元件間複雜通訊帶來的資料流混亂。
不管怎麼樣，在前端應用越來越複雜的今天，資料流的流向問題是繞不開，不論是單向資料流，還是多Model多資料流，都是適配當前場景下的解決方案，以後可能會有新的解決方案。
但是目前，在React體系中，Redux是繞不開的。下一篇，說一下flux和Redux。