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

來源:互聯網
上載者:User

標籤: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:

  每個組件都有屬於自己的statestateprops的區別在於前者(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資料流和組件間的溝通總結

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.