美文网首页
react通信方式之---发布订阅

react通信方式之---发布订阅

作者: 颜色不一样的烟火_ac0f | 来源:发表于2021-09-19 11:54 被阅读0次

在vue 中组件通信可以通过自定义属性 、发布订阅事件,而在react中都是用props来进行通信,但是这一通信局限于父子组件之间,如果是相邻兄弟或者爷孙这种组件通信呢?可以借助于一个第三方库 pubsub-js来进行消息的订阅与发布,具体使用方式如下:

第一步:项目中下载pubsub-js

npm i pubsub-js -S

第二步:项目中使用

2.1 导入pubsub

import pubsub from 'pubsub-js'

2.2 消息的订阅与发布

child1组件中订阅一个事件

pubsub.subscribe('event1',()=>{alert('child1中订阅的事件')}

child2组件中发布这一事件

alertHandler=()=>{pubsub.publish('event1')}

<button onClick={this.alertHandler}>点击触发child1组件订阅的event事件</button>

注意:child1组件和child2组件都要引入pubsub 才可以使用

相关文章

  • react通信方式之---发布订阅

    在vue 中组件通信可以通过自定义属性 、发布订阅事件,而在react中都是用props来进行通信,但是这一通信局...

  • 消息订阅与发布

    消息订阅与发布(pubsub) 1、一种组件间通信的方式,适用于任意组件间通信 2、使用步骤: ...

  • MQTT 协议系列之基础概念

    1 MQTT 协议的通信模型 就像我们之前提到的那样,MQTT 的通信是发布/订阅的方式来实现的,消息的发布方和订...

  • 04给女朋友讲讲Redis-发布订阅

    一、Redis发布订阅介绍 Redis发布订阅(pub/sub)是一种消息通信模式:发布者(pub)发送消息,订阅...

  • MQTT 服务器介绍

    MQTT 发布订阅模式简述 MQTT 是基于 发布(Publish)/订阅(Subscribe) 模式来进行通信及...

  • Redis 发布订阅功能

    发布订阅 Redis 发布订阅 (pub/sub) 是一种消息通信模式:订阅者 (sub) 订阅频道,发送者 (p...

  • Redis发布订阅

    发布订阅 Redis提供了基于“发布/订阅”模式的消息机制,此种模式下,消息发布 者和订阅者不进行直接通信,发布者...

  • React Native 的组件通信方式

    React Native 的组件通信方式 React Native 的...

  • Redis高级知识

    Redis 发布订阅 Redis 发布订阅(pub/sub)是一种消息通信模式:发送者(pub)发送消息,订阅者(...

  • Redis学习(四)发布订阅

    Redis 发布订阅 Redis 发布订阅(pub/sub)是一种消息通信模式:发送者(pub)发送消息,订阅者(...

网友评论

      本文标题:react通信方式之---发布订阅

      本文链接:https://www.haomeiwen.com/subject/jrfxgltx.html