PubSub.js訊息的釋出訂閱

在react中, 進行元件中傳遞資料 :

　　* 可以使用 『props』 通過標籤屬性的方式, 從元件外部向元件內部傳遞資料, 將元件和資料解耦

* 進行父元件往子元件傳遞資料比較方便

　　* 進行兄弟元件之間傳遞資料, 只能把資料放到父元件中, 然後兄弟之間傳遞, 把方法寫到父元件裡面,然後通過標籤的形式,往子元件傳遞

要是拆分元件傳遞資料當巢狀層數比較多 就比較麻煩 , 所以建議使用PubSub.js

PubSub 釋出訂閱是一種設計模式,簡化程式碼解耦

訊息的釋出訂閱，當巢狀層數比較多，可以用此工具庫

1
 
 下載:
2 npm i pubsub.js   或者   yarn add pubsub.js

 1 簡單demo 應該放在元件中使用,這裡做個簡單的測試
 2 
 3 //引入
 4 import PubSub from 'pubsub-js';
 5 
 6 //訂閱一個頻道   頻道名稱           頻道名    資料
 7 PubSub.subscribe('h5210510', (channel, data) => {
 8     console.log('當前的頻道名為:'+channel);
 9     console.log('當前收到的資料為:' + data);
 
10 });
11 
12 
13 setTimeout(() => {
14     //釋出訊息
15     PubSub.publish('h5210510', '你好訊息釋出訂閱');
16 }, 2000)

 1 import React, { Component } from 'react';
 2 import PubSub from 'pubsub-js';
 3 
 4 export default class Show extends Component {
 5     state = {
 6         name: ''
 7     }
 8     //元件掛載完畢 元件將要被渲染的時候進行訂閱
 

 9     componentDidMount() {
10         //訂閱
11         PubSub.subscribe('newName', (_, data) => {
12             this.setState({
13                 name: data
14             })
15         })
16     }
17 
18     render() {
19         return (
20             <div>{this.state.name}</div>
21         )
22     }
23 }