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


今天來給大家總結下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:

  每個組件都有屬於自己的statestateprops區別在於前者(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] 這樣就可以進行祖先與子組件間的溝通了。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM