今天來給大家總結下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值，將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] 這樣就可以進行祖先與子元件間的溝通了。
元件 單向資料流
所有的 prop 都使得其父子 prop 之間形成了乙個單向下行繫結 父級 prop 的更新會向下流動到子元件中，但是反過來則不行。這樣會防止從子元件意外改變父級元件的狀態，從而導致你的應用的資料流向難以理解。這裡有兩種常見的試圖改變乙個 prop 的情形 1 這個 prop 用來傳遞乙個初始值 這...
React資料流和元件間的通訊總結
今天來給大家總結下react的單向資料流與元件間的溝通。首先，我認為使用react的最大好處在於 功能元件化，遵守前端可維護的原則。先介紹單向資料流吧。react 單向資料流 react是單向資料流，資料主要從父節點傳遞到子節點 通過props 如果頂層 父級 的某個props改變了，react會重...
單向資料流
props是單向繫結的，當父元件的屬性變化時，將傳導給子元件，但是不會反過來 而且不允許子元件直接修改父元件中的資料，報錯 解決方式 方式1 如果子元件想把它作為區域性資料來使用，可以將資料存入另乙個變數中再操作，不影響父元件中的資料 方式2 如果子元件想修改資料並且同步更新到父元件，兩個方法 a....