正文 

当前位置： 首页 > 程序 > java教程

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

意念 意念     2022-10-27     497

关键词：

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.  

vue--全局事件总线&&消息订阅与发布(pubsub)

...;...........        )  3.使用事件总线:    (1).接收数据：A组件想接收数据。则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身  查看详情

补：vue--组件间的通信

...信对于要收到消息的组件来说，其要先订阅消息：引入了pubsub，其是一个对象，pubsub.subscribe(),用来订阅消息，其中的“demo”为消息的名称，（）=》写箭头函数是为了让this保持为VC，其中 查看详情

vue组件间通信全局事件总线订阅与发布(代码片段)

目录一、全局事件总线作用安装组件使用案例案例分析组件一（小明）组件二（小红）效果展示二、订阅与发布 安装组件使用案例案例分析组件一（小明）组件二（小红）效果展示一、全局事件总... 查看详情

react组件通信之发布订阅模式

React通信react的数据流是单向的,react通信有以下几种方式：父向子通信：传入props子向父通信：父组件向子组件传一个函数，然后通过这个函数的回调，拿到子组件传过来的值父向孙通信：利用context传值。React.createContext()兄弟间... 查看详情

vue的全局事件总线(代码片段)

我们使用vue的过程中，会有很多时候要用到组件间的通信，组件间的通信也有很多种，比如父子组件通信，兄弟组件通信，任意组件间的通信解决组件间的通信也有很多方法，$emit父子组件的通信可用事件... 查看详情

vue和react组件间通信方法对比

...(推荐)、this.$refs、this.$childrenprops子组件=>父组件自定义事件($emit、$on)(推荐)、this.$parent回调函数(推荐)非父子组件(兄弟组件、跨级组件)bus高阶组件(推荐)、自定义事件、context 查看详情

vue父子组件间通信（数据传递）

...事件总线/消息订阅与发布/Vuex/路由传参父组件传递：在使用子组件时，使用v-bind：自定义接收名称="要传递的数据"子组件接收：props:["自定义接收名称"]父组件传递：v-on:自定义接收名称="要传递的方法"子组件接收时自定义一个... 查看详情

reactjs学习笔记-父子组件间的通信

...#xff0c;并进行唯一命名，在父组件中即可调用；3、使用全局事件Pub/Sub模式，在componentDidMount里面订阅事件，在componentWillUnmount里面取消订阅，当收到事件触发的时候调用setState更新UI。（这里暂时没有学习... 查看详情

11：高级篇-ctk事件管理机制（插件间通信）

...人微信号：iwaleon微信公众号：高效程序员发布/订阅模式事件管理服务规范是CTKPluginFramework规范的一部分，它定义了一个通用的插件间通信机制。该机制遵循流行的发布/订阅模式，并且可以以同步或异步的方式执行。关于发布/... 查看详情

pubsub-js库实现“跨组件”数据传递(代码片段)

文章目录一、参考应用场景描述使用说明快速入门(订阅——发布)发布匹配多个订阅规则发布匹配公共订阅和个性化订阅规则类似应用一、参考pubsub-jsnpm地址应用场景描述在React和Vue开发中，如果遇到同级组件或者跨多级组件... 查看详情

pubsub-js库实现“跨组件”数据传递(代码片段)

文章目录一、参考应用场景描述使用说明快速入门(订阅——发布)发布匹配多个订阅规则发布匹配公共订阅和个性化订阅规则类似应用一、参考pubsub-jsnpm地址应用场景描述在React和Vue开发中，如果遇到同级组件或者跨多级组件... 查看详情

[react]react组件间的通信有哪些？

...onext基础上的库，Mobx这是依赖收集，EventBus是发布订阅模式，与React本身关系不大个人简介我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，但坚持一定很酷。欢迎大家一起讨论主目录与歌谣一起通关... 查看详情

react工程化——webpack构建react工程化——react脚手架解析——函数组件间的通信父—子——函数组件事件绑定——todolist案例(代码片段)

类组件，函数组件标签绑定事件，事件的绑定的this指向问题。父子组件通信webpack引入核心库，babelreact脚手架React团队维护开发的create-react-app来创建React新的单页应用项目的最佳方式。React脚手架(create-react-app)意义... 查看详情

react中组件间通信的几种方式(代码片段)

在使用React的过程中，不可避免的需要组件间进行消息传递（通信），组件间通信大体有下面几种情况：父组件向子组件通信子组件向父组件通信非嵌套组件间通信跨级组件之间通信1.父组件向子组件通信父组件通过向子组件传... 查看详情

react组件间通信（常用方式，简单易用）(代码片段)

...中的props区分开）向子组件通信，子组件通过回调事件与父组件通信。首先，先创建一个父组件Parent.js跟 查看详情

vue非父子组件间通信

有时候非父子关系的组件也需要通信。在简单的场景下，使用一个空的Vue实例作为中央事件总线： 有时候非父子关系的组件也需要通信。在简单的场景下，使用一个空的Vue实例作为中央事件总线：varbus=newVue()//触发组件A中的... 查看详情

react源码分析组件通信refskey和reactdom

...析5--组件通信，refs，key，ReactDOMReact源码分析6—React合成事件系统1组件间通信父组件向子组件 查看详情

eventbus详解(代码片段)

...，代码更优雅，以及将发送者和接收者解耦。通常我们在使用EventBus的时候都是直接需要接收通信的Activity/Fragment中通过EventBus.getDefault().register(this)订阅事件，在需要发起通信的逻辑直接调用EventBus.getDefault().post(Objectevent)来发布... 查看详情