React：消息订阅(subscribe)-发布(publish)机制

发布类似触发事件， 订阅类似监听事件

使用这种方式的好处是，兄弟组件间通信不必再像使用props那种通过父组件来通信，多层组件之间通信也不必在一层一层的传递， 直接在触发事件的组件中发布消息 监听组件中订阅消息即可；

    1、工具库: PubSubJS

    2、下载: npm install pubsub-js --save 

    3、使用:

import PubSub from 'pubsub-js' //引入
PubSub.publish('delete', data) //发布消息
PubSub.subscribe('delete', function(data){ }); //订阅

 

示例：

import { Component } from 'react' 
import PubSub from "pubsub-js"; 
class App extends Component {
 
  SubscribeList = ['POSErrorMessage'];  // 订阅消息集合

  componentDidMount () {
    // 开启订阅消息
    this.SubscribeList.forEach(item => {
      PubSub.subscribe(item, this.subscribeCallback);  // 开启订阅
    })
  }

  componentWillUnmount() {
    this.SubscribeList.forEach(item => {
      // 取消消息订阅
      PubSub.unsubscribe(item);
    })
  }

  componentDidShow () {
    // 开启订阅消息加载等待进度, componentDidMount 添加消息订阅
    this.SubscribeList.forEach(item => {
      PubSub.subscribe(item, this.subsribeCallback);
    })
  }/**
   * 订阅的回调函数 @subscribeName 订阅的消息名称， @data 数据
   * */
  subsribeCallback = (subscribeName, data) => {
    if (subscribeName === 'POSErrorMessage') {
      
    }
  }

  // 在 App 类中的 render() 函数没有实际作用
  // 请勿修改此函数
  render () {
    return (
      <div></div>
    )
  }
}

export default App

 

发布消息：

import PubSub from "pubsub-js";

PubSub.publish('POSErrorMessage', '消息内容') //发布消息

 

注意： 页面卸载得时候记得卸载unsubscribe取消订阅，否则消息还是会被监听