今天來給大家總結下React的單向數據流與組件間的溝通。
首先，我認為使用React的最大好處在於：功能組件化，遵守前端可維護的原則。
先介紹單向數據流吧。
React單向數據流：
React是單向數據流，數據主要從父節點傳遞到子節點（通過props）。
如果頂層（父級）的某個props改變了，React會重渲染所有的子節點。
剛才我們提到了Props，怎么理解Props呢？
Props：
props是property的縮寫，可以理解為HTML標簽的attribute。
不可以使用this.props直接修改props，因為props是只讀的，props是用於整個組件樹中傳遞數據和配置。
在當前組件訪問props，使用this.props。
這里貼出props使用代碼：
* data 為一個模擬數據，無具體意義，僅供舉例使用。
接下來說說state
State:
每個組件都有屬於自己的state，state和props的區別在於前者(state)只存在於組件內部，只能從當前組件調用this.setState修改state值（不可以直接修改this.state！）。
一般我們更新子組件都是通過改變state值，更新新子組件的props值從而達到更新。
我們舉個實例吧：
這里使用getInitialState來初始化state，例子里面state是text，然后通過this.state.text讀取state值
Props與state：
盡可能使用props當做數據源，state用來存放狀態值（簡單的數據）。
也就是說咱們通常用props傳遞大量數據，state用於存放組件內部一些簡單的定義數據。（需要通過大量運用React可以感受這點）
那么，單向數據流的原理及一些概念咱么說完了，接下來咱們看看組件間是怎么進行溝通的：
一般來說，有兩種溝通方式：
一、父子組件溝通
在React中，最為常見的組件溝通也就是父子了，一般情況是：
* 父組件更新組件狀態 -----props-----> 子組件更新
另一種情況是：
* 子組件更新父組件狀態 -----需要父組件傳遞回調函數-----> 子組件調用觸發
可能大家對於第二種子組件更新父組件狀態的情況有些不理解：
是這樣的，一般情況下，只能由父組件通過props傳遞數據給子組件，使得子組件得到更新，那么現在，我們想實現
子組件更新父組件就需要 父組件通過props傳遞一個回調函數到子組件中，這個回調函數可以更新父組件，子組件就是
通過觸發這個回調函數，從而使父組件得到更新。（類似於一種取巧的做法）
這里貼出 子組件更新父組件 代碼：
在這個例子中，refreshBox是父組件創建的一個回調函數，將其傳入Son組件中，然后通過Son組件進行調用觸發，
進而改變state，實現子組件對父組件的更新。
二、兄弟組件溝通
當兩個組件處於同一級時（同處父級，或者同處子級），就稱為兄弟組件。
這里有兩種實現方式：
方式一：
按照React單向數據流方式，我們需要借助父組件進行傳遞，通過父組件回調函數改變兄弟組件的props。
其實這種實現方式與子組件更新父組件狀態的方式是大同小異的。
方式二：
方式一只適用於組件層次很少的情況，當組件層次很深的時候，整個溝通的效率就會變得很低
在這里，React官方給我們提供了一種上下文方式，可以讓子組件直接訪問祖先的數據或函數，無需從祖先組件一層層地傳遞數據到子組件中。
但這種方法建議按需使用，可能會導致一些不可預期的錯誤。（比如數據傳遞邏輯結構不清晰）
在這里直接貼出例子：
首先要對使用對象進行說明，Box.childContextType就是這樣一個上下文聲明，子組件調用祖先組件的方法時，
通過 this.context.[callback] 這樣就可以進行祖先與子組件間的溝通了。
總結：今天在這里總結了單向數據流的概念與組件間的溝通，希望大家看后能對React一些基本原理有更深的理解，有錯誤的地方私信我，我改正。
聲明：本文僅做個人學習使用，禁止轉載!
(文中觀點引自https://segmentfault.com/a/1190000006831820 作者：nanges)