PubSub消息订阅-发布

PubSub消息订阅-发布

react导入库

npm install pubsub-js --save

react 页面引入pubsubjs

import PubSub from 'pubsub-js'

pubsubjs使用

发送消息：PubSub.publish(名称,参数)
订阅消息：PubSub.subscrib(名称,函数)
取消订阅：PubSub.unsubscrib(名称)

pubsubjs源码及使用详情https://github.com/mroderick/PubSubJS

React实例使用监听实现传参

子组件发布消息

子组件Home使用PubSub.publish发送消息

import React, { Component } from 'react';  
import PubSub from 'pubsub-js';  
class Home extends Component {  
  
   state={  
      increase:'increase',  
      decrease:'decrease'  
    }  
  
  buttonIncrease = () => {  
    //发送消息
    PubSub.publish('PubSubmessag',this.state.increase);  
  }  
  buttonDecrease= ()=> {  
     //发送消息
     PubSub.publish('PubSubmessage', this.state.decrease);  
  }  
  render() {  
    return (  
      <div>  
        Some state changes:  
        <button onClick={this.buttonIncrease}>Increase</button>  
        <button onClick={this.buttonDecrease}>Decrease</button>  
      </div>  
    )  
  }  
}  
export default Home;  

父页面订阅指定消息，取消订阅消息

父页面App.js接收使用PubSub.subscribe订阅指定消息，PubSub.unsubscribe取消订阅消息

import React, { Component } from 'react';  
import { Link} from 'react-router-dom';  
import PubSub from 'pubsub-js';  
  
export default class App extends Component{  
 
  state={  
    increase:'none',  
  }  

componentDidMount(){  
//订阅指定消息
  this.pubsub_token = PubSub.subscribe('PubSubmessage', (topic,message) => {  
    this.setState({  
      increase: message  
    });  
  });  
}  
componentWillUnmount(){  
//取消订阅消息
  PubSub.unsubscribe(this.pubsub_token);  
}  
  render() {  
  return (  
    <div>  
      <header>  
        Links:       
        <Link to="/App/home">Home</Link>     
      </header>   
      <div style={{ marginTop: '1.5em' }}>{ this.props.children}</div>  
      <div style={{ marginTop: '1.5em' }}>{ this.state.increase}</div>  
    </div>  
  )  
}  
}  

当在子页面单击increase、decrease按钮，会发送不同的消息给父页面，父页面收到消息，利用this.state.increase进行呈现，此时你会发现它是实时变化的，因为它会实时监听子组件发送的消息。