pubsub.js 消息的发布订阅

PubSub.js消息的发布订阅

在react中, 进行组件中传递数据 :

　　* 可以使用 『props』 通过标签属性的方式, 从组件外部向组件内部传递数据, 将组件和数据解耦

       * 进行父组件往子组件传递数据比较方便

　　* 进行兄弟组件之间传递数据, 只能把数据放到父组件中, 然后兄弟之间传递, 把方法写到父组件里面,然后通过标签的形式,往子组件传递 

 要是拆分组件传递数据 当嵌套层数比较多 就比较麻烦 , 所以建议使用PubSub.js

 

  PubSub 发布订阅是一种设计模式, 简化代码解耦

  组件间数据的传递方式

        消息的发布订阅，当嵌套层数比较多，可以用此工具库

 

下载:
npm i pubsub.js   或者   yarn add pubsub.js

 

简单demo 应该放在组件中使用,这里做个简单的测试

//引入
import PubSub from 'pubsub-js';

//订阅一个频道   频道名称           频道名    数据
PubSub.subscribe('h5210510', (channel, data) => {
    console.log('当前的频道名为:'+channel);
    console.log('当前收到的数据为:' + data);
});


setTimeout(() => {
    //发布消息
    PubSub.publish('h5210510', '你好消息发布订阅');
}, 2000)

 

  import React, { Component } from 'react';
  import PubSub from 'pubsub-js';
  
  export default class Show extends Component {
      state = {
          name: ''
      }
      //组件挂载完毕 组件将要被渲染的时候进行订阅
      componentDidMount() {
         //订阅
         PubSub.subscribe('newName', (_, data) => {
             this.setState({
                 name: data
             })
         })
     }
 
     render() {
         return (
             <div>{this.state.name}</div>
         )
     }
　　　//组件将要卸载
    　componentWillUnmount(){
      //取消订阅              频道
        PubSub.unsubscribe('keyword');
      }

   }