React 組件之間的通信方式

Miracle_lihb 發布于2019-08-22 10:43 / 1250人閱讀

摘要：父子組件通信子父組件通信同級組件之間的通信父子組件通信通信的手段這是最常見的通信方式，父組件只需要將子組件需要的傳給子組件，子組件直接通過來使用。

在項目開發的過程中，隨著應用功能復雜度的增加和組件層次劃分的需求，組件之間的通信越來越多，
我大致認為組件之間的通信分為3種：父-子組件通信、子-父組件通信和同級組件之間的通信。

1.父-子組件通信

2.子-父組件通信

3.同級組件之間的通信

1.父-子組件通信 1.1通信的手段

這是最常見的通信方式，父組件只需要將子組件需要的props傳給子組件，子組件直接通過this.props來使用。

1.2 通信內容

更多要提的是如何合理的設置子組件的props，要想將子組件設計成一個復用性強的通用組件，需要將能夠復用的部分抽象出來，
抽象出來的props有兩種形成，一種是簡單的變量，另一種是抽象出來處理某種邏輯的函數。

以Header 組件為例

抽象出來三個props，分別是中間的title，渲染組件左邊的renderLeftComponent，渲染組件右邊的renderRightComponent
Header的部分實現

renderLeftComponent () {
    let leftDOM = {};
 
    if(this.props.renderLeftComponent) {
        return this.props.renderLeftComponent();
    }
    if (this.props.showBack) {
        let backFunc = this.props.onBack || this.goBack;
        leftDOM = ();
    }
    return leftDOM;
}
renderRightComponent () {
    if(this.props.renderRightComponent) {
    return this.props.renderRightComponent();
}
}
render () {
    return (
        
            
            {this.renderLeftComponent()}
            {this.props.title || "維C果蔬"}
            {this.renderRightComponent()}
            
        
    );
}

1.3 通信的動機

1.1中Header組件 props的通信動機是子組件需要這樣的屬性來完成自己的展示。還有一種動機可以統稱向子組件傳遞監聽事件,
前一種是子組件的需求，后一種更多的是父組件的需求，例如Listview的onEndReached這種屬性，觸發源是在子組件中，當子組件
的事件被觸發或者達到某種狀態的時候，調用父組件從屬性中傳過來的方法。

2.子-父組件通信 2.1 通信的手段

父-子組件通信的手段是通過子組件的props是子組件用父組件的東西，子-父組件通信，是父組件用子組件的東西，應該將傳遞的內容直接寫在子組件上，然后給子組件設置ref，父組件直接通過ref操作子組件的屬性。

2.2 通信的內容

子組件的屬性

2.3 通信的動機

父組件想要調用子組件的屬性

3.同級組件之間的通信

同級組件之間的通信，是構建復雜界面的粘合劑，哎呦喂，我好會比喻啊
以維C果蔬的首頁為例：

通信1： Listview需要offsetHeight屬性，Listview

Height的計算公式：window.innerHeight-Banner的Height-Menu的Height，

而Banner和Menu的Height都是需要在其Mount的時候才能計算。

通信2： ListView需要Menu的MenuId，才能夠根據MenuId獲取sku數據。

3.1通信的方式

同級組件之間的通信還是需要通過父組件作為中介，利用多次父-子組件通信，項目中將需要傳遞的數據放在了父組件的state中，變動時可以自動的同步傳遞。
將 bannerHeight，menuHeight，MenuId放在state中。
父組件代碼示意：

this.state {
    bannerHeight: 0,
    menuHeight: 0,
    MenuId: 0
}
setBannerHeight(height) {
    this.setState({bannerHeight:height});
}
setMenuHeight(height) {
    this.setState({menuHeight:height});
}
onMenuClick(menuId) {
    this.setState({menuId:menuId});
}

3.2通信的動機

當組件需要的props，不能直接從父組件中獲取時，需要父組件作為中介，再與其他的組件進行通信獲取。

云服務器 GPU云服務器組件之間通信兩臺服務器之間的通信 App之間通信組件和組件通信

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/91132.html

React 組件之間的通訊

摘要：父組件聲明自己支持父組件提供一個函數，用來返回相應的對象子組件聲明自己需要使用我胡漢三又回來了點擊我如果是父組件向子組件單向通信，可以使用變量，如果子組件想向父組件通信，同樣可以由父組件提供一個回調函數，供子組件調用，回傳參數。在使用 React 的過程中，不可避免的需要組件間進行消息傳遞（通信），組件間通信大體有下面幾種情況：父組件向子組件通信子組件向父組件通信跨級組件之間...

dongxiawu 2019-08-23 16:59 評論0 收藏0
玩轉 React（七）- 組件之間的數據共享

摘要：函數屬性或者說事件在組件之間通信過程中是必不可少的，但是切莫讓它影響了大家對單向數據流這一概念的理解。這應該屬于一種的使用方式，而且這樣做有悖單向數據流原則。上一篇文章玩轉 React（六）- 處理事件介紹了在 React 中如何處理用戶事件，以及 React 事件機制與原生 DOM 事件的差異和注意的問題，同時也介紹了事件處理函數中 this 的指向問題以及處理的幾種方式及其優...

Gu_Yan 2019-08-21 18:00 評論0 收藏0
React中組件通信的幾種方式

摘要：首次發表在個人博客需要組件之進行通信的幾種情況父組件向子組件通信子組件向父組件通信跨級組件通信沒有嵌套關系組件之間的通信父組件向子組件通信數據流動是單向的父組件向子組件通信也是最常見的父組件通過向子組件傳遞需要的信息子組件向父組件通信利用 showImg(https://segmentfault.com/img/remote/1460000012361466?w=1240&h=667)...

yeooo 2019-08-21 18:00 評論0 收藏0
解密傳統組件間通信與React組件間通信

摘要：同時吸取了社區大量優秀思想，進行歸納比對。有興趣的讀者可以點擊下面的鏈接購買，再次感謝各位的支持與鼓勵懇請各位批評指正京東當當原文網址在React中最小的邏輯單元是組件，組件之間如果有耦合關系就會進行通信，本文將會介紹React中的組件通信的不同方式通過歸納范，可以將任意組件間的通信歸類為四種類型的組件間通信，分別是父子組件，爺孫組件，兄弟組件和任意組件，需要注意的是前三個也可以算...

CoderBear 2019-08-23 12:01 評論0 收藏0
掌握react，這一篇就夠了

摘要：小明小明兒子，可以看到組件顯示了父組件的。小明受控組件和非受控組件受控組件和非受控組件這些都是指的表單組件，當一個表單的值是通過改變的而不是通過是受控組件，否則就是非受控組件。 react眾所周知的前端3大主流框架之一，由于出色的性能，完善的周邊設施風頭一時無兩。本文就帶大家一起掌握react。 jsx語法前端MVVM主流框架都有一套自己的模板處理方法，react則使用它獨特的jsx...

Enlightenment 2019-08-23 11:45 評論0 收藏0