資訊專欄INFORMATION COLUMN
摘要：父子組件通信子父組件通信同級組件之間的通信父子組件通信通信的手段這是最常見的通信方式，父組件只需要將子組件需要的傳給子組件，子組件直接通過來使用。
在項目開發(fā)的過程中，隨著應(yīng)用功能復(fù)雜度的增加和組件層次劃分的需求，組件之間的通信越來越多，
我大致認為組件之間的通信分為3種：父-子組件通信、子-父組件通信和同級組件之間的通信。
1.父-子組件通信
2.子-父組件通信
3.同級組件之間的通信
1.父-子組件通信 1.1通信的手段這是最常見的通信方式，父組件只需要將子組件需要的props傳給子組件，子組件直接通過this.props來使用。
1.2 通信內(nèi)容更多要提的是如何合理的設(shè)置子組件的props，要想將子組件設(shè)計成一個復(fù)用性強的通用組件，需要將能夠復(fù)用的部分抽象出來，
抽象出來的props有兩種形成，一種是簡單的變量，另一種是抽象出來處理某種邏輯的函數(shù)。
以Header 組件為例
抽象出來三個props，分別是中間的title，渲染組件左邊的renderLeftComponent，渲染組件右邊的renderRightComponent
Header的 部分實現(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 通信的動機
1.1中Header組件 props的通信動機 是子組件需要這樣的屬性來完成自己的展示。還有一種動機可以統(tǒng)稱向子組件傳遞監(jiān)聽事件,
前一種是子組件的需求，后一種更多的是父組件的需求，例如Listview的onEndReached這種屬性，觸發(fā)源是在子組件中，當子組件
的事件被觸發(fā)或者達到某種狀態(tài)的時候，調(diào)用父組件從屬性中傳過來的方法。
父-子組件通信的手段是通過子組件的props是子組件用父組件的東西，子-父組件通信，是父組件用子組件的東西，應(yīng)該將傳遞的內(nèi)容直接寫在子組件上，然后給子組件設(shè)置ref，父組件直接通過ref操作子組件的屬性。
2.2 通信的內(nèi)容子組件的屬性
2.3 通信的動機父組件想要調(diào)用子組件的屬性
3.同級組件之間的通信同級組件之間的通信，是構(gòu)建復(fù)雜界面的粘合劑，哎呦喂，我好會比喻啊
以維C果蔬的首頁為例：
通信1： Listview需要offsetHeight屬性，Listview
Height的計算公式：window.innerHeight-Banner的Height-Menu的Height，
而Banner和Menu的Height都是需要在其Mount的時候才能計算。
通信2： ListView需要Menu的MenuId，才能夠根據(jù)MenuId獲取sku數(shù)據(jù)。
3.1通信的方式同級組件之間的通信還是需要通過父組件作為中介，利用多次父-子組件通信，項目中將需要傳遞的數(shù)據(jù)放在了父組件的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，不能直接從父組件中獲取時，需要父組件作為中介，再與其他的組件進行通信獲取。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/91132.html
摘要：父組件聲明自己支持父組件提供一個函數(shù)，用來返回相應(yīng)的對象子組件聲明自己需要使用我胡漢三又回來了點擊我如果是父組件向子組件單向通信，可以使用變量，如果子組件想向父組件通信，同樣可以由父組件提供一個回調(diào)函數(shù)，供子組件調(diào)用，回傳參數(shù)。 在使用 React 的過程中，不可避免的需要組件間進行消息傳遞（通信），組件間通信大體有下面幾種情況： 父組件向子組件通信 子組件向父組件通信 跨級組件之間...
摘要：函數(shù)屬性或者說事件在組件之間通信過程中是必不可少的，但是切莫讓它影響了大家對單向數(shù)據(jù)流這一概念的理解。這應(yīng)該屬于一種的使用方式，而且這樣做有悖單向數(shù)據(jù)流原則。 上一篇文章 玩轉(zhuǎn) React（六）- 處理事件 介紹了在 React 中如何處理用戶事件，以及 React 事件機制與原生 DOM 事件的差異和注意的問題，同時也介紹了事件處理函數(shù)中 this 的指向問題以及處理的幾種方式及其優(yōu)...
摘要：首次發(fā)表在個人博客需要組件之進行通信的幾種情況父組件向子組件通信子組件向父組件通信跨級組件通信沒有嵌套關(guān)系組件之間的通信父組件向子組件通信數(shù)據(jù)流動是單向的父組件向子組件通信也是最常見的父組件通過向子組件傳遞需要的信息子組件向父組件通信利用 showImg(https://segmentfault.com/img/remote/1460000012361466?w=1240&h=667)...
摘要：同時吸取了社區(qū)大量優(yōu)秀思想，進行歸納比對。有興趣的讀者可以點擊下面的鏈接購買，再次感謝各位的支持與鼓勵懇請各位批評指正京東當當原文網(wǎng)址 在React中最小的邏輯單元是組件，組件之間如果有耦合關(guān)系就會進行通信，本文將會介紹React中的組件通信的不同方式 通過歸納范，可以將任意組件間的通信歸類為四種類型的組件間通信，分別是父子組件，爺孫組件，兄弟組件和任意組件，需要注意的是前三個也可以算...
摘要：小明小明兒子，可以看到組件顯示了父組件的。小明受控組件和非受控組件受控組件和非受控組件這些都是指的表單組件，當一個表單的值是通過改變的而不是通過是受控組件，否則就是非受控組件。 react眾所周知的前端3大主流框架之一，由于出色的性能，完善的周邊設(shè)施風頭一時無兩。本文就帶大家一起掌握react。 jsx語法 前端MVVM主流框架都有一套自己的模板處理方法，react則使用它獨特的jsx...
閱讀 2076·2019-08-30 15:53
閱讀 3073·2019-08-30 15:44
閱讀 2920·2019-08-30 14:11
閱讀 2916·2019-08-30 14:01
閱讀 2705·2019-08-29 15:16
閱讀 3751·2019-08-29 13:10
閱讀 1249·2019-08-29 10:56
閱讀 2532·2019-08-26 13:58
