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

問題描述

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

父子元件通訊（父傳子、子傳父）

需求

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

效果圖

程式碼圖示分析

總結

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

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

思路

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

需求

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

效果圖

程式碼圖示分析

總結

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

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

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

需求

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

效果圖

程式碼圖示分析

第一步肯定是要先下載pubsub

npm install pubsub-js --save

npm官方介紹：http://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的釋出訂閱通訊，功能很強大的。