React+pubsub-js事件订阅

最新推荐文章于 2025-06-15 11:13:50 发布
最新推荐文章于 2025-06-15 11:13:50 发布
阅读量654 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/LIUHONGLIAN915/article/details/86484278

react组件化，组件之间嵌套太深，进行传值非常麻烦，可以使用pubsub-js发布订阅模式为组件间通信更便捷

react导入库

npm install pubsub-js --save

页面引入

import PubSub from 'pubsub-js'

使用方法

  1. 发送消息：PubSub.publish(名称,参数)
  2. 订阅消息：PubSub.subscrib(名称,函数)
  3. 取消订阅：PubSub.unsubscrib(名称)

使用监听传参

子页面使用PubSub.publish发布消息并传第信息

父页面使用PubSub.subscribe订阅指定消息

使用PubSub.unsubscribe取消订阅消息

reactjs中使用PubSub监听机制传参
zfan520的博客
11-23 6678
1、PubSub使用方式 react导入库 npm install pubsub-js --save react 页面引入pubsubjs import PubSub from 'pubsub-js' pubsubjs使用 发送消息：PubSub.publish(名称,参数) 订阅消息：PubSub.subscrib(名称,函数) 取消订阅：PubSub.unsubscri
react 中 websocket 结合 pubsub 实现数据通信
浮生离梦的博客
04-09 2078
一、react 中 websocket 结合 pubsub 实现数据通信 在 react 中使用 websocket，创建 websocket.js 文件，需要下载 websocket 和 pubsub-js，可以通过 npm i websocket pubsub-js -s 命令进行下载，引入 websocket 中 w3cwebsocket 进行创建连接，引入 pubsub-js 中 PubSub 进行消息通信， 代码如下所示： import { w3cwebsocket as W3CWebSock
react-订阅在线离线事件的ReactHook
08-15
订阅在线/离线事件的React Hook
react使用pubsub事件订阅，组件间通信
weixin_30614109的博客
03-22 836
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.u...
React组件通信——发布订阅（pub/sub）
最新发布
anxinbuxinan的博客
06-15 257
PubSubJS 是一个轻量级的发布-订阅(publish-subscribe)模式库，可以在 React 应用中实现组件间的松耦合通信，特别适合非父子组件或远房组件间的消息传递。通信双方不需要知道彼此存在一对多的消息分发需求需要降低系统耦合度需要支持未来未知的订阅者跨团队/跨模块协作开发。
pubsub-js react中事件订阅怎么用
lx_9119的博客
10-15 240
//下载模块 // cnpm i pubsub-js --save //发布引入 import pubsub from "pubsub-js" //发送事件 pubsub .publish("msg","我是发送的数据") //订阅引入 import pubsub from "pubsub-js" //发送事件，第二个参数是订阅到的数据 pubsub .subscribe("msg",(...
react pubsub-js
qq_43613029的博客
06-11 718
订阅者--发布者模式 订阅者是接收数据，发布者是把自己的数据分享出去，然后碰到订阅者接收数据。 1、安装
shreaddy-pubsub-client:Shreaddy的pubsub的JS客户端
04-12
2. **JavaScript编程**：作为客户端库，它使用JavaScript编写，这意味着开发者可以轻松地在Web浏览器或Node.js环境中使用它，与各种前端框架（如React、Vue、Angular）或后端服务集成。 3. **事件驱动编程**：在...
前端零依赖的pubsub-js发布/订阅库
- pubsub.js：核心的JavaScript发布/订阅功能实现文件。 - readme.md：文档文件，通常包含如何安装、配置和使用该库的信息。 - package.json：如果是使用npm管理的项目，该文件会包含库的依赖和脚本命令。 - /tests/...
开源项目-qneyrat-web-pubsub-example.zip
09-03
6. **前端实现**: 客户端部分可能使用了HTML5、CSS3和JavaScript（可能包括现代框架如React或Vue.js）来构建用户界面，并通过WebSocket API与服务器建立连接，订阅感兴趣的主题，并显示接收到的数据。 7. **后端...
react-gbus：用于react（pubsub）的全局事件总线挂钩
02-16
React全球事件总线 用于响应的全局事件总线挂钩 :wrench: 安装 npm install --save react-gbus :sparkles: 特征 :loudspeaker: 从任何地方广播（发射）（不限于React组件） :leaf_fluttering_in_wind: 不到1KB的超轻量级 :victory_hand: 用TypeScript编写 :package: 用法 import React , { useState } from "react" ; import BusProvider , { useListener , emit } from "react-gbus" ; const FRUIT_CHANGE = "fch" ; function FruitViewer ( ) { const [ Fruit , setFruit ] = useState ( "Choose your Fruit" ) ; useListener ( setFruit , [ FRUIT_CHAN
react 中发布订阅模式使用
weixin_34034670的博客
11-29 1765
react 中发布订阅模式使用 场景 怎么能将设计模式应用到我们的 React 项目中？以前一直在思考这个问题。 场景一 模块 A 模块 B 需要用到同一个数据 data，A 和 B 都会修改这份数据，且这两个模块会同时存在；这时我们如何做到数据公用与各个模块的更新？ 方案一： 将这份数据作为公共的数据 data，A B 模块同时使用并...
react中使用 PubSubJS（发布和订阅）实现任意组件通信
想好了再写！
04-20 779
PubSubJS可以实现任意组件通信，再也不用担心多层组件嵌套传参的问题啦 1.安装： npm install pubsub-js 2.引入: import PubSub from 'pubsub-js' 3.使用 在需要的组件中调用 App.jsx Header.jsx List.jsx 重要代码说明： //发布消息 PubSub.publish('发布的名称','发布的值') //订阅消息 PubSub.subscribe('订阅的名称', (_, data) => {console.log
react组件传值-------------------发布-订阅机制
杜杜的博客
07-22 755
理解事件的发布-订阅机制 早期最广泛的应用在浏览器的DOM事件中， target.addEventListener(type, listener, useCapture) 通过调用addEventListener 方法，创建一个事件监听器，这个动作就是 ‘ 订阅 ’。例如下面这个最简单的发布-订阅案例： // 监听 click (点击)事件，click事件被触发时，事件就会被发布出去，进而触发监听这个事件的func函数。 el.addEventListener("click", func, fals
web3 React dapp进行事件订阅
weixin_45966674的博客
11-13 781
你会惊奇的发现 我们dapp的监听事件触发了 就是 不一定是当前界面触发的 其他地方创建了订单 或者取消 填充订单 我们订阅了他 事件就会触发 有点实时通讯的味道了哈。这里 我们就可以看到 我们订单 从 5条 变成了 4条 无需我们自己刷新 数据就更新了 控制台也输出了 我们的事件类型 和 信息。这里 我们通过全局对象 WebData 拿到我们交易所的智能合约对象 Exchange 并分别监听了 我们刚才说的三个事件。也是一样 我们整体更新的事件触发了。他们分别来记录我们的三种事件。
React组件通信方式-PubSubJs
qq_27324469的博客
08-14 496
React组件通信方式1通过props传递2消息订阅和发布机制用到的库使用方法 1通过props传递 2消息订阅和发布机制 用到的库 PubSubJs 使用方法 下载 npm install --save pubsub-js 在用户搜索中，需要在兄弟组件Search和Main之间通信，可以用到PubSubJs 在Search组件中发布消息，类似于绑定监听，发布消息需要指定消息名和数据，订阅消息需要指定消息名和回调函数 导包 import PubSubJs from "pubsub-js" 在Sea
react组件传参 pubsub-js库的使用
weixin_38222276的博客
04-15 256
pubsub发布订阅机制 1.先订阅，再发布（理解：有一种隔空对话的感觉） 2.适用于热议组件间通信 3.要在组件的componetntWillUmount中取消订阅 import PubSub from 'pubsub-js' // or when using CommonJS const PubSub = require('pubsub-js'); //订阅消息 var token = PubSub.subscribe('MY TOPIC', (_,data)=>{ console.log(da
react兄弟组件传值之事件发布与订阅PubSubJS
yeee1128的博客
04-11 258
1.安装 npm i pubsub-js 2.引入 import PubSub from 'pubsub-js' 3使用 //组件a-发布消息 PubSub.publish('one','hello') //两个参数 第一个为传递的消息名，第二个为传递的信息 //组件b-订阅消息(一般在组件挂载完成进行订阅) componentDidMount(){ this.a = PubSub.subscrib('one',(msg,data)=>{ console.log(msg)
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值