react元件通訊方式之~圖解父子元件通訊和兄弟元件通訊pubsub-js

語言: CN / TW / HK

問題描述

我們知道,react元件通訊方式有很多種,在專案開發中,我們需要根據:專案複雜程度、業務具體功能、以及元件層級關係,去靈活選擇合適的通訊方式。本文簡述下父子元件和兄弟元件通訊的常用方式。至於別的react通訊方式(Context、mobx、redux什麼的),後續會有對應文章再分類記錄。

父子元件通訊(父傳子、子傳父)

需求

假設我們有這樣的需求 - 點選按鈕開啟彈框(父傳子) - 思路如下: - 子元件中有一個彈框(元件),父元件通過props,將控制彈框是否彈出的標識傳遞給子元件 - 子元件根據這個標識來控制是否開啟彈框 - 關閉彈框後將點選關閉位置呈現到頁面上(子傳父) - 思路如下: - 因為要區分是點選取消按鈕還是點選確認按鈕關閉的彈框(點選小叉號也是相當於點選取消按鈕) - 所以在子元件中通過呼叫父元件傳來的函式,且傳不同參的方式告知父元件點選的是那個關閉彈框的 - 當然父元件要提前傳遞過來一個函式以便子元件能夠呼叫

效果圖

1.gif

程式碼圖示分析

2.png

總結

  • 父元件傳遞子元件資料,子元件在props中即可接受並使用
  • 子元件傳遞父元件,需要父元件提前傳一個函式給子元件,以便子元件在適當的時候,將子元件中的資料通過呼叫這個函式,再傳遞給父元件

兄弟元件通訊之方式一 父元件中轉(不推薦)

思路

  • 因為兄弟元件直接是無法直接通訊的,所以就考慮找一箇中轉站去通訊。
  • 因為兄弟元件都有一個共同的父元件,所以中轉站就選擇父元件,同時資料也要統一存放在父元件中。
  • 所以原本 兄弟A ===》 兄弟B 的資料流程就變成 兄弟A ===》 父元件 ===》 兄弟B ,即加了一層

需求

假設我們有這樣的需求 - 在紙質書本陣列件(Toptop)中有一個按鈕,點選讓電子書本數(Bottombottom)加一 - 在電子書本陣列件(Bottombottom)中也有一個按鈕,對應點選讓紙質書本陣列件加一

效果圖

3.gif

程式碼圖示分析

4.png

總結

這種通過父元件做中轉的方式不太方便,實際開發專案中,很少用這種方法,瞭解即可

兄弟元件通訊之方式二 pubsub.js訊息訂閱釋出(推薦)

值得一提的時候,vue中也可以使用這個外掛,因為這個外掛是用原生js寫的

需求

此案例的需求和上面的父元件中轉案例類似,就是在一個元件中點選按鈕,更改另一個元件的狀態。我們看一下效果圖

效果圖

5.gif

程式碼圖示分析

第一步肯定是要先下載pubsub

npm install pubsub-js --save

6.png

npm官方介紹:https://www.npmjs.com/package/pubsub-js

別忘了取消訂閱

注意上述案例中,實際寫法不太完善,因為在元件掛載後componentDidMount鉤子中訂閱了訊息,所以當元件即將解除安裝的時候componentWillUnmount鉤子中,還需要取消這個事件訂閱。簡化程式碼如下:

```js // 元件掛載訂閱訊息 componentDidMount() { this.token = PubSub.subscribe("wantAddOneFromPaper", (msg, data) => { // ... }) }

// 元件解除安裝取消訂閱訊息 componentWillUnmount() { PubSub.unsubscribe(this.token) } ```

總結

這種釋出訂閱方式,是目前開發中比較常用的兄弟元件通訊方法。當然其實pubsub.js不是說只能適用於兄弟元件通訊,其實任意層級、任意關係的元件通訊,都可以使用pubsub的釋出訂閱通訊,功能很強大的。