[JavaScript知识库]React使用pubsub-js订阅发布和取消订阅

React中父子组件传值有三种形式：

• 父组件传值给子组件时，通常会使用props传值。
• 子组件传值给父组件时，通常会子组件中的事件触发一个回调函数，父组件中的对应函数去修改值。
• 兄弟组件间传值，通常会将子组件A的值传回父组件，父组件再传给子组件B

以上三种情况都可以使用消息订阅与发布机制来解决。

• 当然父传子还是用props比较好。
• 子组件传值给父组件，在子组件中发布，在父组件中订阅，就可以拿到相应的值
• 兄弟组件间传值，在子组件A中发布，在子组件B中订阅

下面介绍下PubSubJS的用法：

PubSubJS官方Github链接：?GitHub - mroderick/PubSubJS: Dependency free publish/subscribe for JavaScript

1. 安装包

npm install pubsub-js

2. 在React项目中引入包

import PubSub from 'pubsub-js'?

3. 重点使用的函数

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

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

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

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

4. 使用方法

父组件：

import React from 'react';
import Child from './Child';
import PubSub from 'pubsub-js';
import './App.css';

export default class App extends React.Component  {
  componentDidMount() {
  // publish 发布消息 消息名为：publish_one 内容为：This is publish
      PubSub.publish("publish_one","父组件发布信息“hello")
      PubSub.subscribe("childPublish",(msg,data)=>{
        console.log('父组件接受消息',msg,data);
    })      
  }
  render() {
    return (
      <div className = 'ArticleContainer'>
        父组件：
        <Child/>
      </div>
    )
  }
}

子组件：

import React, { Component } from 'react';
import PubSub from 'pubsub-js';

class Child extends Component {
    state={
        publishData:''
    }
    componentDidMount(){
        // 订阅消息 消息名：publish_one  第二个参数是一个函数
        // 此函数又有两个参数：消息名和消息数据
        this.token = PubSub.subscribe("publish_one",(msg,data)=>{
            this.setState({publishData:data})
        })      
    }
    componentWillUnmount(){
        //当组件卸载的时候要取消消息订阅
        PubSub.unsubscribe(this.token)
    }

    onChildClick=()=>{
        PubSub.publish("childPublish","子组件发布信息“hi")
    }
    render() {
        return (
            <div onClick={this.onChildClick}>
                子组件接受的消息内容：{this.state.publishData}
            </div>
        );
    }
}

export default Child;

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

在componentWillUnmount中取消订阅