React資料流和組件間的溝通總結

標籤：htm   get   ref   技術分享   html標籤   建立   自己的   方式   自己   

今天來給大家總結下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一些基本原理有更深的理解，有錯誤的地方私信我，我改正。

　　聲明：本文僅做個人學習使用，禁止轉載!

 

 

　　(文中觀點引自1190000006831820 nanges)

React資料流和組件間的溝通總結