react使用pubsub事件订阅，组件间通信

Posted 2020-10-28 意念

1、PubSub使用方式

1.1 react导入库

npm install pubsub-js --save

1.2 react 页面引入pubsubjs

import PubSub from ‘pubsub-js‘

1.3 pubsubjs使用

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

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

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

 

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

 

2、React实例使用监听实现传参

 

2.1 子页面home.js使用PubSub.publish发送state

[javascript] view plain copy

1. import React, { Component } from ‘react‘;  
2. import PubSub from ‘pubsub-js‘;  
3. class Home extends Component {  
4.   constructor(props){  
5.     super(props);  
6.     this.state={  
7.       increase:‘increase‘,  
8.       decrease:‘decrease‘  
9.     }  
10.   }  
11.   buttonIncrease(){  
12.     PubSub.publish(‘PubSubmessag‘,this.state.increase);  
13.   }  
14.   buttonDecrease(){  
15.      PubSub.publish(‘PubSubmessage‘, this.state.decrease);  
16.   }  
17.   render() {  
18.     return (  
19.       <div>  
20.         Some state changes:  
21.         <button onClick={this.buttonIncrease.bind(this)}>Increase</button>  
22.         <button onClick={this.buttonDecrease.bind(this)}>Decrease</button>  
23.       </div>  
24.     )  
25.   }  
26. }  
27. export default Home;  

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

[javascript] view plain copy

1. import React, { Component } from ‘react‘;  
2. import { Link} from ‘react-router-dom‘;  
3. import PubSub from ‘pubsub-js‘;  
4.   
5. export default class App extends Component{  
6. constructor(props){  
7.   super(props);  
8.   this.state={  
9.     increase:‘none‘,  
10.   }  
11. }  
12. componentDidMount(){  
13.   this.pubsub_token = PubSub.subscribe(‘PubSubmessage‘, function (topic,message) {  
14.     this.setState({  
15.       increase: message  
16.     });  
17.   }.bind(this));  
18. }  
19. componentWillUnmount(){  
20.   PubSub.unsubscribe(this.pubsub_token);  
21. }  
22.   render() {  
23.   return (  
24.     <div>  
25.       <header>  
26.         Links:       
27.         <Link to="/App/home">Home</Link>     
28.       </header>   
29.       <div style={{ marginTop: ‘1.5em‘ }}>{ this.props.children}</div>  
30.       <div style={{ marginTop: ‘1.5em‘ }}>{ this.state.increase}</div>  
31.     </div>  
32.   )  
33. }  
34. }  

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

 

PS：React-Router4.0建立子父组件关系

子父组件关系建立是依靠React-Router4.0来建立的，附上子父组件关系的源码，若对RR4.0不太了解，可参考http://blog.csdn.net/zfan520/article/details/78563034

[javascript] view plain copy

1. import React, { Component } from ‘react‘;  
2. import {BrowserRouter } from ‘react-router-dom‘;  
3. import { Router, Route, } from ‘react-router‘  
4.   
5. import  App from ‘../components/App.js‘  
6. import  Home from ‘../components/Home.js‘  
7.   
8. export default class RouterIndex extends Component {  
9.   render() {  
10.     return (   
11.           <BrowserRouter>  
12.             <App path="/App" component={App}>  
13.               <Route path="/App/home" component={Home} />  
14.             </App>  
15.           </BrowserRouter>  
16.     )  
17.   }  
18. }