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. 重点使用的函数

1.  
   发送消息：PubSub.publish(名称,参数)
2.  
    
3.  
   订阅指定消息：PubSub.subscrib(名称,函数) 
4.  
    
5.  
   取消指定订阅：PubSub.unsubscrib(名称)
6.  
    
7.  
   取消所有订阅：PubSub.clearAllSubscriptions()

4. 使用方法

父组件：

1.  
   import React from 'react';
2.  
   import Child from './Child';
3.  
   import PubSub from 'pubsub-js';
4.  
   import './App.css';
5.  
    
6.  
   export default class App extends React.Component {
7.  
   componentDidMount() {
8.  
   // publish 发布消息 消息名为：publish_one 内容为：This is publish
9.  
   PubSub.publish("publish_one","父组件发布信息“hello")
10.  
    PubSub.subscribe("childPublish",(msg,data)=>{
11.  
    console.log('父组件接受消息',msg,data);
12.  
    })
13.  
    }
14.  
    render() {
15.  
    return (
16.  
    <div className = 'ArticleContainer'>
17.  
    父组件：
18.  
    <Child/>
19.  
    </div>
20.  
    )
21.  
    }
22.  
    }

子组件：

1.  
   import React, { Component } from 'react';
2.  
   import PubSub from 'pubsub-js';
3.  
    
4.  
   class Child extends Component {
5.  
   state={
6.  
   publishData:''
7.  
   }
8.  
   componentDidMount(){
9.  
   // 订阅消息 消息名：publish_one 第二个参数是一个函数
10.  
    // 此函数又有两个参数：消息名和消息数据
11.  
    this.token = PubSub.subscribe("publish_one",(msg,data)=>{
12.  
    this.setState({publishData:data})
13.  
    })
14.  
    }
15.  
    componentWillUnmount(){
16.  
    //当组件卸载的时候要取消消息订阅
17.  
    PubSub.unsubscribe(this.token)
18.  
    }
19.  
     
20.  
    onChildClick=()=>{
21.  
    PubSub.publish("childPublish","子组件发布信息“hi")
22.  
    }
23.  
    render() {
24.  
    return (
25.  
    <div onClick={this.onChildClick}>
26.  
    子组件接受的消息内容：{this.state.publishData}
27.  
    </div>
28.  
    );
29.  
    }
30.  
    }
31.  
     
32.  
    export default Child;

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

在componentWillUnmount中取消订阅

这篇好文章是转载于：学新通技术网