React中的消息订阅与发布

原创 已于 2022-08-30 17:09:09 修改 · 1.8k 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#react.js #javascript #前端

于 2022-08-30 17:08:03 首次发布
本文介绍了一种在React应用中实现跨组件通信的方法——消息订阅与发布机制。该方法使用pubsub-js库来简化组件间的通信流程，避免了通过父组件传递函数或层层传递的状态管理难题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

消息订阅与发布：使用此方式的好处是，兄弟组件间通信不必再像使用props那种通过父组件创建函数来进行通信，多层组件之间通信也不必再一层层的进行传递， 直接在触发事件的组件中发布消息 ，监听组件中订阅消息即可；

此内容大致分为以下五步：

（1）先利用npm install pubsub-js --save下载pubsub-js库。

（2）再利用import PubSub from 'pubsub-js'引入pubsub-js库。

（3）订阅：利用componentDidMount钩子将PubSub.subscribe函数挂载，从而在需要订阅的组件进行消息的订阅。

（4）发布：利用PubSub.publish在进行发布的组件中发布消息。

（5）取消：在刚才订阅的组件中，利用componentWillUnmount钩子将PubSub.unsubscribe挂载将此组件中的订阅进行取消。

React中发布与订阅消息
jieweiwujie的博客
10-11 90
3 子组件header发布消息。3 子组件list订阅消息。2 父页面 放2个组件。
发布订阅模式的应用：解决react中复杂层级的数据交互
qq_38719039的博客
02-02 558
这种情况往往是不知道跨越多少不同层级的情况。以自定义事件为调度中心，创建一个。：商品加入购物车的操作。
react案例之使用消息订阅与发布实现github搜索案例
qq_65010070的博客
05-27 349
记录学习React的过程
React消息订阅与发布
mantou_riji的博客
10-24 1329
之前我们只会父子之间传递消息，所以两个兄弟组件之间传递消息的时候我们不得不使用父子组件通信的方式进行消息的传递，这样无疑是麻烦的。使用消息的订阅与发布机制可以实现兄弟组件之间的通信。子传父：父亲定义带参数的函数，传递给子组件，子组件调用该方法就可以在父组件获取子组件的参数。需要数据的组件订阅消息，拥有数据的组件发布消息， 两者以共同的消息名来发送和获取数据。List 和 Search是兄弟组件现需要实现两组间之间的通信。订阅与发布不仅仅适用于兄弟组件之间，而是适用于。
React组件通信——发布订阅（pub/sub）
最新发布
anxinbuxinan的博客
06-15 256
PubSubJS 是一个轻量级的发布-订阅(publish-subscribe)模式库，可以在 React 应用中实现组件间的松耦合通信，特别适合非父子组件或远房组件间的消息传递。通信双方不需要知道彼此存在一对多的消息分发需求需要降低系统耦合度需要支持未来未知的订阅者跨团队/跨模块协作开发。
react消息的发布于订阅
u014496893的博客
12-27 291
导入 importPubSubfrom"pubsub-js"; 订阅端： import React, { Component } from "react"; import PubSub from 'pubsub-js' import "./index.css"; export default class index extends Component { state = { users: [], isFirst: true, isLoading: false, ...
React 订阅与发布
zgh472365411的博客
09-14 2288
如果在使用react中觉得父子组件,兄弟组件之间的通信非常麻烦。可以使用react订阅与发布，可以快速解决你的烦恼
React消息订阅与发布机制
火星基地
04-13 412
1. 安装并引入模块 npm install pubsub-js import PubSub from 'pubsub-js'; // or when using CommonJS const PubSub = require('pubsub-js'); 2. 基本使用 先订阅，再发布 适用于任意组件间通信 要在组件的componentWillUnmount中取消订阅 // 创建订阅的回调函数 var mySubscriber = function (msg, data) { console
react学习——21react中消息的订阅与发布
ChenJin_2的博客
07-02 325
react学习——21react中消息的订阅与发布
use-react-router：使用React Router的React Hook进行发布订阅行为
02-03
预计非发布订阅的React Hook最终会包含在react-router包本身中。 安装 您必须使用react-router和react-router-dom v5.0.0或更高版本。 npm install use-react-router或 yarn add use-react-router 利用 导入...
React消息订阅与发送
ChuanyangChen的博客
04-19 326
React消息订阅与发送 需要用到的库： https://github.com/mroderick/PubSubJS 发送方 export default class Search extends Component { xxxx = () => { // 发送网络请求 axios.get(`.../users?q=${value}`).then( (response) => { // 消息的发送 PubSub.publish("订
react的消息发布订阅
weixin_45880538的博客
11-25 780
react的消息发布订阅 采用pubsub-js 包， 可用于不同组件之间的传值 安装pubsub-js 包 npm i pubsub-js --save 导入pubsub-js 包 //导入包 import PubSub from 'pubsub-js' 发布消息 PubSub.publish('changeListState', 'hello word') //消息名是 changeListState， 订阅消息必须用这个名字， 传递的值是 hello word 接收消息 //token 用于组件
react学习——19react获取input的值（连续解构赋值+重命名）
ChenJin_2的博客
06-28 234
react学习——19react获取input的值（连续解构赋值+重命名）
react的消息发布与订阅
h周杰偷的博客
08-15 681
subscribe 和 publish的介绍 消息发布与订阅是用来解决我们的兄弟之间的一个通信方式我们可以把消息订阅发布机制简单的理解为事件（发布，通过相同的名字找到订阅的函数） 引入第三方库PubSubJS，就能直接在触发事件的组件中发布消息，监听组件中订阅消息来实现兄弟组件的通信： subscribe 和 publish的使用 使用方法如下： 工具库: PubSubJS GitHub 我们百变不离其宗的就是先下载 下载: npm install pubsub-js --save 然后是使用 impor
React中组件通信02——消息订阅与发布、取消订阅以及卸载组件时取消订阅
@素素~的博客
09-18 1266
React中组件通信02——消息订阅与发布、取消订阅以及卸载组件时取消订阅
React 消息订阅与发布机制
今天的我还菜嘛
01-15 3347
在React中，父子组件可以通过props和回调函数进行通信； 但是，兄弟组件之间通信并没有提供现成的方法，如果要实现兄弟组件之间的通信，就需要在多层组件之间一层一层传递，将信息传给共同的父组件，然后父组件传递给子组件的方式； 这样非常繁琐和不利于维护； 引入第三方库PubSubJS，就能直接在触发事件的组件中发布消息，监听组件中订阅消息来实现兄弟组件的通信： 使用方法如下： 工具库: PubSubJS GitHub 下载: npm install pubsub-js --save 使用方法: impo
React学习笔记---消息订阅与发布机制
丑小鸭变黑天鹅的博客
12-22 1184
消息订阅与发布机制一、没有用消息订阅与发布机制的案例二、使用消息订阅与发布机制的案例三、fetch发送请求四、总结 一、没有用消息订阅与发布机制的案例 如果没有使用消息订阅与发布机制，兄弟组件想互相通信智能通过他们的父组件来进行管理，看一个github搜索案例 项目结构 index.js //引入react核心库 import React from 'react' //引入ReactDOM import ReactDOM from 'react-dom' //引入App import App from '
react 消息订阅-发布机制
weixin_44722237的博客
04-10 738
工具库: PubSubJS 下载: npm install pubsub-js --save 使用:在存储state的组件里面订阅消息，在发送更改的状态值组件里面设置消息发布 1)import PubSub from 'pubsub-js' //引入 2)PubSub.subscribe('delete', function(data){ }); //订阅 3)PubSub.publish('delete', data) //发布消息 优点： 1）观察者和被观察者是抽象耦合的。 2）建立一套触发机.
React - 订阅和发布
weixin_46398446的博客
06-17 603
React中，只有父子组件之前可以通过props进行通信，兄弟组件之间若想通信需要通过父子组件之间的关系一层一层传递，将信息传给共同的父组件，进而实现通信 这样做是非常繁琐的！！ 因而 消息订阅和发布机制可以实现兄弟组件的通信，使用的库是PubSubJS 具体使用方法如下： yarn add pubsub-js 或者npm安装pubsub-js 在页面中引入PubSub import PubSub from 'pubsub-js' 发布消息 PubSub.publish(message,data)
React Native集成Red5 Pro: 发布与订阅指南
5. **发布者示例和订阅者示例**：提供了关于如何在React Native应用中实现视频流发布的代码示例和如何接收并显示视频流的代码示例。 6. **Red5 Pro快速入门**：这部分可能是针对新手的快速上手指南，指导如何注册、...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值