成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

React 組件之間的通信方式

Miracle_lihb / 1340人閱讀

摘要：父子組件通信子父組件通信同級(jí)組件之間的通信父子組件通信通信的手段這是最常見(jiàn)的通信方式，父組件只需要將子組件需要的傳給子組件，子組件直接通過(guò)來(lái)使用。

在項(xiàng)目開(kāi)發(fā)的過(guò)程中，隨著應(yīng)用功能復(fù)雜度的增加和組件層次劃分的需求，組件之間的通信越來(lái)越多，
我大致認(rèn)為組件之間的通信分為3種：父-子組件通信、子-父組件通信和同級(jí)組件之間的通信。

1.父-子組件通信

2.子-父組件通信

3.同級(jí)組件之間的通信

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

這是最常見(jiàn)的通信方式，父組件只需要將子組件需要的props傳給子組件，子組件直接通過(guò)this.props來(lái)使用。

1.2 通信內(nèi)容

更多要提的是如何合理的設(shè)置子組件的props，要想將子組件設(shè)計(jì)成一個(gè)復(fù)用性強(qiáng)的通用組件，需要將能夠復(fù)用的部分抽象出來(lái)，
抽象出來(lái)的props有兩種形成，一種是簡(jiǎn)單的變量，另一種是抽象出來(lái)處理某種邏輯的函數(shù)。

以Header 組件為例

抽象出來(lái)三個(gè)props，分別是中間的title，渲染組件左邊的renderLeftComponent，渲染組件右邊的renderRightComponent
Header的 部分實(shí)現(xiàn)

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 通信的動(dòng)機(jī)

1.1中Header組件 props的通信動(dòng)機(jī) 是子組件需要這樣的屬性來(lái)完成自己的展示。還有一種動(dòng)機(jī)可以統(tǒng)稱向子組件傳遞監(jiān)聽(tīng)事件,
前一種是子組件的需求，后一種更多的是父組件的需求，例如Listview的onEndReached這種屬性，觸發(fā)源是在子組件中，當(dāng)子組件
的事件被觸發(fā)或者達(dá)到某種狀態(tài)的時(shí)候，調(diào)用父組件從屬性中傳過(guò)來(lái)的方法。

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

父-子組件通信的手段是通過(guò)子組件的props是子組件用父組件的東西，子-父組件通信，是父組件用子組件的東西，應(yīng)該將傳遞的內(nèi)容直接寫在子組件上，然后給子組件設(shè)置ref，父組件直接通過(guò)ref操作子組件的屬性。

2.2 通信的內(nèi)容

子組件的屬性

2.3 通信的動(dòng)機(jī)

父組件想要調(diào)用子組件的屬性

3.同級(jí)組件之間的通信

同級(jí)組件之間的通信，是構(gòu)建復(fù)雜界面的粘合劑，哎呦喂，我好會(huì)比喻啊
以維C果蔬的首頁(yè)為例：

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

Height的計(jì)算公式：window.innerHeight-Banner的Height-Menu的Height，

而B(niǎo)anner和Menu的Height都是需要在其Mount的時(shí)候才能計(jì)算。

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

3.1通信的方式

同級(jí)組件之間的通信還是需要通過(guò)父組件作為中介，利用多次父-子組件通信，項(xiàng)目中將需要傳遞的數(shù)據(jù)放在了父組件的state中，變動(dòng)時(shí)可以自動(dòng)的同步傳遞。
將 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通信的動(dòng)機(jī)

當(dāng)組件需要的props，不能直接從父組件中獲取時(shí)，需要父組件作為中介，再與其他的組件進(jìn)行通信獲取。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/91132.html

相關(guān)文章

  • React 組件之間的通訊

    摘要：父組件聲明自己支持父組件提供一個(gè)函數(shù)，用來(lái)返回相應(yīng)的對(duì)象子組件聲明自己需要使用我胡漢三又回來(lái)了點(diǎn)擊我如果是父組件向子組件單向通信，可以使用變量，如果子組件想向父組件通信，同樣可以由父組件提供一個(gè)回調(diào)函數(shù)，供子組件調(diào)用，回傳參數(shù)。 在使用 React 的過(guò)程中，不可避免的需要組件間進(jìn)行消息傳遞（通信），組件間通信大體有下面幾種情況： 父組件向子組件通信 子組件向父組件通信 跨級(jí)組件之間...

    dongxiawu 評(píng)論0 收藏0

  • 玩轉(zhuǎn) React（七）- 組件之間的數(shù)據(jù)共享

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

    Gu_Yan 評(píng)論0 收藏0

  • React中組件通信的幾種方式

    摘要：首次發(fā)表在個(gè)人博客需要組件之進(jìn)行通信的幾種情況父組件向子組件通信子組件向父組件通信跨級(jí)組件通信沒(méi)有嵌套關(guān)系組件之間的通信父組件向子組件通信數(shù)據(jù)流動(dòng)是單向的父組件向子組件通信也是最常見(jiàn)的父組件通過(guò)向子組件傳遞需要的信息子組件向父組件通信利用 showImg(https://segmentfault.com/img/remote/1460000012361466?w=1240&h=667)...

    yeooo 評(píng)論0 收藏0

  • 解密傳統(tǒng)組件間通信與React組件間通信

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

    CoderBear 評(píng)論0 收藏0

  • 掌握react，這一篇就夠了

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

    Enlightenment 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

Miracle_lihb

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<