React的消息订阅全过程

1.安装pubsub-js

yarn add pubsub-js --save 或者
npm i pubsub-js --save

2.在发布消息的模块导入pubsub并进行消息的发布

import React, { Component } from 'react'
import PubSub from 'pubsub-js'
import axios from 'axios'export default class Search extends Component {search = () => {const { value:keyWords} = this.Element//发起axios请求axios.get(`/api1/search/users2?q=${keyWords}`).then(// 通知list更新状态 response.data.items//1.在这里进行消息的发布，注意发布时PubSub.publish//2.这里发布订阅消息的名字，必须和另外一边接受消息的名字保持一致response => { PubSub.publish('message', response.data.items) },error => { console.log('error', error.data); }) }
}

3.在接受消息的模块对发布的消息进行接收

import React, { Component } from 'react'
import PubSub from 'pubsub-js'
export default class List extends Component {state = {users: [],}// 订阅消息 在componentDidMount周期里面对订阅消息进行接收componentDidMount() {// 发布消息就执行函数 这里的msg是必须带的，虽然他没啥用//这里的data就是前面的数据   response.data.itemsPubSub.subscribe('message',(msg,data)=> {this.setState({users:data})})}
}

React的消息订阅全过程相关推荐

react 消息订阅-发布机制(解决兄弟组件通信问题)
消息订阅-发布机制工具库: PubSubJS 下载: npm install pubsub-js --save 使用: 1)import PubSub from 'pubsub-js' //引入 2 ...
React消息订阅与转发机制实现兄弟组件传值
1,组件通信在React组件中实现组件之间的通信方式有很多,像父子组件传值,父组件将要传递的参数添加到props 子组件获取props中的值来进行传值子组件传父组件通过父组件传递过来的回调函数 ...
React使用pubsub-js订阅发布和取消订阅
React中父子组件传值有三种形式: 父组件传值给子组件时,通常会使用props传值. 子组件传值给父组件时,通常会子组件中的事件触发一个回调函数,父组件中的对应函数去修改值. 兄弟组件间传值,通常会 ...
深入biztalk消息以及消息订阅发布路由机制（二）－消息订阅【转】
一.消息订阅订阅消息的主体叫订阅服务器,订阅服务器是可以订阅并消费消息的服务,可以作为订阅服务器的服务类型目前有四类,在BizTalkMgmtDb管理数据库中的adm_ServiceClass的Na ...
c# 使用线程方式实现消息订阅
在下程序的时候,经常会碰到这样一种情况: 定义的变量会影响多个控件的数值,当变量有变化的时候,需要更新多个控件,这多个控件可能会在不同的界面中,管理起来非常麻烦,这个时候就要用到消息订阅,下面是详细的 ...
.NetCore Cap 结合 RabbitMQ 实现消息订阅
开源分布式消息框架 Cap 可以在GitHub上拉也可以通过nuget添加上一篇博文写了 Windows RabbitMQ的安装使用 Cap支持事务,通过捕获数据库上下文连接对象实现消息事务,消息 ...
Asp.net Core中SignalR Core预览版的一些新特性前瞻,附源码(消息订阅与发送二进制数据)
前言一晃一个月又过去了,上个月有个比较大的项目要验收上线.所以忙的脚不沾地.现在终于可以忙里偷闲,写一篇关于SignalR Core的文章了. 先介绍一下SignalR吧,如下: ASP.NET S ...
如何订阅MQTT服务器历史消息,MQTT协议之消息订阅
序在MQTT协议中,最重要的就是发布/订阅,下面重点分析下消息订阅. SUBSCRIBE 一般来讲,客户端在成功建立TCP连接之后,发送CONNECT消息,在得到服务器端授权允许建立彼此连接的CON ...
和push的区别_RocketMQ的消息订阅push和pull的区别
RocketMQ消息订阅有两种模式: 一种是Push模式,即MQServer主动向消费端推送: 另外一种是Pull模式,即消费端在需要时,主动到MQServer拉取. 但在具体实现时,Push和Pul ...
ROS学习笔记13（测试一个简单的消息发布和消息订阅）
文章目录 1 运行消息发布 2 运行消息订阅 1 运行消息发布 $ roscore # In your catkin workspace $ cd ~/catkin_ws $ source ./dev ...

React的消息订阅全过程

1.安装pubsub-js

2.在发布消息的模块导入pubsub并进行消息的发布

3.在接受消息的模块对发布的消息进行接收

React的消息订阅全过程相关推荐

最新文章

热门文章