React 元件之間的通訊方式

2021-09-17 21:51:41 字數 1643 閱讀 6392

在專案開發的過程中,隨著應用功能複雜度的增加和元件層次劃分的需求,元件之間的通訊越來越多,

我大致認為元件之間的通訊分為3種:父-子元件通訊、子-父元件通訊和同級元件之間的通訊。

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

更多要提的是如何合理的設定子元件的props,要想將子元件設計成乙個復用性強的通用元件,需要將能夠復用的部分抽象出來,

抽象出來的props有兩種形成,一種是簡單的變數,另一種是抽象出來處理某種邏輯的函式。

以header 元件為例

抽象出來三個props,分別是中間的title,渲染元件左邊的renderleftcomponent,渲染元件右邊的renderrightcomponent

header的 部分實現

renderleftcomponent () ;

if(this.props.renderleftcomponent)

if (this.props.showback)

return leftdom;

}renderrightcomponent ()

}render () );}

1.1中header元件 props的通訊動機 是子元件需要這樣的屬性來完成自己的展示。還有一種動機可以統稱向子元件傳遞監聽事件,

前一種是子元件的需求,後一種更多的是父元件的需求,例如listview的onendreached這種屬性,觸發源是在子元件中,當子元件

的事件被觸發或者達到某種狀態的時候,呼叫父元件從屬性中傳過來的方法。

父-子元件通訊的手段是通過子元件的props是子元件用父元件的東西,子-父元件通訊,是父元件用子元件的東西,應該將傳遞的內容直接寫在子元件上,然後給子元件設定ref,父元件直接通過ref操作子元件的屬性。

子元件的屬性

父元件想要呼叫子元件的屬性

同級元件之間的通訊,是構建複雜介面的粘合劑,哎呦喂,我好會比喻啊

以維c果蔬的首頁為例:

通訊1: listview需要offsetheight屬性,listview

height的計算公式:window.innerheight-banner的height-menu的height,

而banner和menu的height都是需要在其mount的時候才能計算。

通訊2: listview需要menu的menuid,才能夠根據menuid獲取sku資料。

同級元件之間的通訊還是需要通過父元件作為中介,利用多次父-子元件通訊,專案中將需要傳遞的資料放在了父元件的state中,變動時可以自動的同步傳遞。

將 bannerheight,menuheight,menuid放在state中。

父元件**示意:

this.state 

setbannerheight(height) );

}setmenuheight(height) );

}onmenuclick(menuid) );

}

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

react 元件之間的通訊

react推崇的是單向資料流,自上而下進行資料的傳遞,但是由下而上或者不在一條資料流上的元件之間的通訊就會變的複雜。解決通訊問題的方法很多,如果只是父子級關係,父級可以將乙個 函式當作屬性傳遞給子級,子級可以直接呼叫函式從而和父級通訊。元件層級巢狀到比較深,可以使用上下文context來傳遞資訊,這...

react父子元件之間通訊

父子元件之間通訊 父傳子通訊 類元件 index.js import react from react import reactdom from react dom reactdom.render document.getelementbyid root import react,from reac...

React兄弟元件之間的通訊

案例要求 達到這樣乙個效果 元件拆分 import react,from react import search from components search search import import list from components list list export default cla...