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

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

4. 使用方法

父组件：

import React from 'react';
import Child from './Child';
import PubSub from 'pubsub-js';
import './App.css';export default class App extends React.Component  {componentDidMount() {// publish 发布消息 消息名为：publish_one 内容为：This is publishPubSub.publish("publish_one","父组件发布信息“hello")PubSub.subscribe("childPublish",(msg,data)=>{console.log('父组件接受消息',msg,data);})      }render() {return (<div className = 'ArticleContainer'>父组件：<Child/></div>)}
}

子组件：

import React, { Component } from 'react';
import PubSub from 'pubsub-js';class Child extends Component {state={publishData:''}componentDidMount(){// 订阅消息 消息名：publish_one  第二个参数是一个函数// 此函数又有两个参数：消息名和消息数据this.token = PubSub.subscribe("publish_one",(msg,data)=>{this.setState({publishData:data})})      }componentWillUnmount(){//当组件卸载的时候要取消消息订阅PubSub.unsubscribe(this.token)}onChildClick=()=>{PubSub.publish("childPublish","子组件发布信息“hi")}render() {return (<div onClick={this.onChildClick}>子组件接受的消息内容：{this.state.publishData}</div>);}
}export default Child;

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

在componentWillUnmount中取消订阅

React使用pubsub-js订阅发布和取消订阅相关推荐

android订阅管理,RXJAVA取消订阅封装-kotlin-Android
因为好几次自己想要在别的项目使用,每次都要重写一遍太麻烦,整理了一下发布到 jcenter . 利用官方lifecycle库与kotlin语言特性.lifecycle官方 support 27+ 自带 ...
mqtt（2）发布、订阅、订阅确定、取消订阅
PUBLISH – 发布消息 packetId – 报文标识符不同的MQTT报文所拥有的标识符不同 topicName – 主题名 QoS – 服务质量等级 retainFlag – 保留标志 ...
QQ邮箱的订阅邮件怎么取消订阅？
如果您需要取消某个栏目的订阅: 进入QQ邮件订阅文件夹: 点击需要退订的订阅邮件: 点击页面最下面的链接"取消这个栏目的订阅": 系统会弹出个新的窗口显示:退订成功. 如果您需要取 ...
【MQTT基础篇（五）】发布、订阅和取消订阅
文章目录发布.订阅和取消订阅 1 PUBLISH – 发布消息 1.1 topicName – 主题名 1.2 QoS – 服务质量等级 1.3 packetId – 报文标识符 1.4 retai ...
1.4 发布、订阅和取消订阅
文章目录 PUBLISH – 发布消息 topicName – 主题名 QoS – 服务质量等级 packetId – 报文标识符 retainFlag – 保留标志 Payload – 有效载荷 d ...
学习太极创客 — MQTT（五）发布、订阅和取消订阅
视频链接:https://www.bilibili.com/video/BV1G541157NZ/?spm_id_from=333.788.recommend_more_video.-1&vd ...
MQTT发布订阅和取消订阅
在之前的课程里,我们学习了如何使用MQTT客户端连接MQTT服务端.在这节课里,我们学习客户端如何实现发布消息.订阅主题以及取消订阅主题.在本节课里我们将重点讲解以下MQTT报文: PUBLISH – ...
[Java]SpringBoot2整合mqtt服务器EMQ实现消息订阅发布入库(二)
又到了显摆分享技术的时候了没有看过上一篇文章的可以先看一下,这篇是在上一篇基础上接着添加功能 SpringBoot2整合mqtt服务器EMQ实现消息订阅发布入库(一) 这篇文章的流程为: 1.Spr ...
【EventBus】EventBus 源码解析 ( 取消订阅 )
文章目录一.取消订阅二.取消订阅 unsubscribeByEventType 方法一.取消订阅 [EventBus]EventBus 使用示例 ( 最简单的 EventBus 示例 ) 示例中 ...

React使用pubsub-js订阅发布和取消订阅

React使用pubsub-js订阅发布和取消订阅相关推荐

最新文章

热门文章