React消息订阅与发布机制

1. 安装并引入模块

npm install pubsub-js

import PubSub from 'pubsub-js';
// or when using CommonJS
const PubSub = require('pubsub-js');

2. 基本使用

1. 先订阅，再发布
2. 适用于任意组件间通信
3. 要在组件的componentWillUnmount中取消订阅

// 创建订阅的回调函数
var mySubscriber = function (msg, data) {
    console.log(msg, data);
};

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

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

// 取消指定订阅
PubSub.unsubscribe(token);
// 取消一个函数的所有订阅
PubSub.unsubscribe(mySubscriber);

3. 基本案例

React不同组件之间的通信。

1. 发布消息的组件

import PubSub from 'pubsub-js';

...
PubSub.publish('msg', { isFirst: false, isLoading: true });
...

2. 订阅消息的组件

import PubSub from 'pubsub-js';

...
componentDidMount() {
    // 直接将回调函数写在一起
    // 不需要回调函数的第一个参数，用_占位
    this.token = PubSub.subscribe('msg', (_, stateObj) => {
        this.setState(stateObj);
    });
}

componentWillUnmount() {
    PubSub.unsubscribe(this.token);
}
...

---

参考链接：pubsub-js