React 发布-订阅机制实现组件间信息通信 2

本篇主要是承接上一文对发布-订阅模式，以具体在React中使用案例PubSubJS来理解此原理。

PubSubJS官方Github链接： https://github.com/mroderick/PubSubJS

1. 安装包

npm install pubsub-js

2. 在React项目中引入包

import PubSub from 'pubsub-js' 

3. 重点使用的函数

发送消息：PubSub.publish(名称,参数)

订阅指定消息：PubSub.subscrib(名称,函数) 

取消指定订阅：PubSub.unsubscrib(名称)

取消所有订阅：PubSub.clearAllSubscriptions()

 

4. 使用方法

var mySubscriber = function (msg, data) {
    console.log( msg, data );
};

// 订阅消息
var token = PubSub.subscribe('MY TOPIC', mySubscriber);

// 异步发布消息
PubSub.publish('MY TOPIC', 'hello world!');

// 同步发布消息

PubSub.publishSync('MY TOPIC', 'hello world!');

// 取消订阅

PubSub.unsubscribe(token);

PubSub.clearAllSubscriptions();

注意：所对应的发布-订阅有相同的名称，才能匹配起来。

 

5. 案例

// 导入
import PubSub from "pubsub-js"

// 在有数据的地方进行发布
class Data extends React.Component{
  pubmsg = ()=>{
      PubSub.publish("频道","频道发布的消息")
  }
  render() {
      return(
          <button onClick={this.pubmsg}>Data组件,发布消息</button>
          )
      }
  }
  
// 订阅
class App extends Component {
    // 组件将要被渲染的时候进行订阅
    componentDidMount() {
      PubSub.subscribe("频道", (msg,data)=> {
        console.log(msg,data)
      })
    }
  
    render() {
      return (
        <div className="App">
           <Data />
        </div>
      );
    }
  }

注意：PubSub.subsribe( )是用于订阅消息，在componentDidMount( )中使用。

 

 

参考资料：

1.  https://github.com/mroderick/PubSubJS

2. https://blog.csdn.net/zfan520/article/details/78612088