今天來給大家總結下React的單向數據流與組件間的溝通。

首先，我認為使用React的最大好處在於：功能組件化，遵守前端可維護的原則。

先介紹單向數據流吧。

React單向數據流：

　　React是單向數據流，數據主要從父節點傳遞到子節點（通過props）。

　　如果頂層（父級）的某個props改變了，React會重渲染所有的子節點。

剛才我們提到了Props，怎麽理解Props呢？

Props：

　 props是property的縮寫，可以理解為HTML標簽的attribute。

　　不可以使用this.props直接修改props，因為props是只讀

　　在當前組件訪問props，使用this.props。


這裏貼出props使用代碼：

* data 為一個模擬數據，無具體意義，僅供舉例使用。

接下來說說state

State:

　　每個組件都有屬於自己的state，state和props的區別在於前者(state)只存在於組件內部，只能從當前組件調用this.setState修改state值（不可以直接修改this.state！）。

　　一般我們更新子組件都是通過改變state值，將state值通過屬性傳遞給子組件，子組件的獲取props值從而達到更新。

我們舉個實例吧：

這裏使用getInitialState來初始化state，例子裏面state是text，然後通過this.state.text讀取state值

Props與state：

　　盡可能使用props當做數據源，state用來存放狀態值（簡單的數據）。

　　也就是說咱們通常用props傳遞大量數據，state用於存放組件內部一些簡單的定義數據。（需要通過大量運用React可以感受這點）

那麽，單向數據流的原理及一些概念咱麽說完了，接下來咱們看看組件間是怎麽進行溝通的：

一般來說，有兩種溝通方式：

一、父子之間組件溝通（父傳子，子傳父）

　　在React中，最為常見的組件溝通也就是父子了，一般情況是：

　　* 父組件更新子組件狀態 ----->子組件屬性 -----子組件獲取this.props值----->子組件數據更新

　　另一種情況是：

　　* 子組件更新父組件狀態 -----需要父組件傳遞回調函數-----> 子組件調用觸發

　　可能大家對於第二種子組件更新父組件狀態的情況有些不理解：

　　　是這樣的，一般情況下，只能由父組件通過props傳遞數據給子組件，使得子組件得到更新，那麽現在，我們想實現

　　　 子組件更新父組件就需要 父組件通過props傳遞一個回調函數到子組件中，這個回調函數可以更新父組件，子組件就是

　　　 通過觸發這個回調函數，從而使父組件得到更新。（類似於一種取巧的做法）

　　　　這裏貼出 子組件更新父組件 代碼：

在這個例子中，refreshBox是父組件創建的一個回調函數，將其傳入Son組件中，然後通過Son組件進行調用觸發，

進而改變state，實現子組件對父組件的更新。

二、兄弟組件溝通

　　當兩個組件處於同一級時（同處父級，或者同處子級），就稱為兄弟組件。

　　這裏有兩種實現方式：

方式一：

　　按照React單向數據流方式，我們需要借助父組件進行傳遞，通過父組件回調函數改變兄弟組件的props。

　　其實這種實現方式與子組件更新父組件狀態的方式是大同小異的。

方式二：

　　方式一只適用於組件層次很少的情況，當組件層次很深的時候，整個溝通的效率就會變得很低

　　 在這裏，React官方給我們提供了一種上下文方式，可以讓子組件直接訪問祖先的數據或函數，無需從祖先組件一層層地傳遞數據到子組件中。

　　 但這種方法建議按需使用，可能會導致一些不可預期的錯誤。（比如數據傳遞邏輯結構不清晰）

　　 在這裏直接貼出例子：

　　首先要對使用對象進行說明，Box.childContextType就是這樣一個上下文聲明，子組件調用祖先組件的方法時，

　　通過 this.context.[callback] 這樣就可以進行祖先與子組件間的溝通了。

React的單向數據流與組件間的溝通