消息订阅与发布pubsubjs的使用

一、消息订阅与发布机制

先订阅再发布，长用于兄弟组件之间通信

二、pubsubjs的使用

1、安装

 cnpm i -S pubsub-js

2、使用
创建两个组件，是为兄弟组件，组件A发送消息，组件B接受消息
在组件A中创建一个可供订阅的方法
在组件B这中进行订阅
代码组件A

import React, { Component } from 'react';
import Pubsub from 'pubsub-js'
class index extends Component {
    state = { name: '张三' }
    componentDidMount() {
       //创建
        this.token= Pubsub.subscribe('atguigu', (_, data) => {
            console.log(data)
            this.setState(
                { name: data.name }
            )
        })
    }
    componentWillUnmount() {
        console.log('componentWillUnmount')
        //销毁
        Pubsub.unsubscribe(this.token)
    }
    render() {
        return (
            <div>
                {this.state.name}
            </div>
        );
    }
}

export default index;

代码组件B

import React, { Component } from 'react';
import Pubsub from 'pubsub-js'
class index extends Component {
    submit= () => {
       //订阅
        Pubsub.publish('atguigu', {
            name: 'tom', age: 18
        }
        )
        console.log(123)
    }
    render() {
        return (
            <div>
                <button onClick={this.submit}>点击</button>
            </div>
        );
    }
}

export default index;