react消息订阅-发布机制（兄弟组件传值）

最新推荐文章于 2023-07-10 15:37:05 发布
最新推荐文章于 2023-07-10 15:37:05 发布
阅读量119 收藏
点赞数
文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46918498/article/details/116754631
版权

订阅消息：
1、消息名
2、发布消息

消息订阅-发布机制
1.pubSubJS , PubSub 模式，是 Publish/Subscribe 的缩写，意为“发布/订阅”模式。
使用步骤：
（1）npm i pubsub-js
（2）在使用的组件中引入 ：import PubSub from ‘pubsub-js’
（3）this.token = PubSub.subscrible(‘test’, (_, data)=> { }) // 订阅
（4）PubSub.publish(‘test’, data) // 发布消息
（5）PubSub.unsubscribe(this.token) // 取消订阅

weixin_46918498
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React消息传递
MIR_zhang的博客
03-30 803
React消息传递 在React中，数据流动是单向的(单向数据流)，父组件通过props将数据传递到子组件，子组件根据父组件传递来的属性和组件内部状态来确定如何渲染。因为单向数据流的特性，父组件向子组件传递数据是很容易的，即通过props传递数据，且子组件不能修改自己的props；父组件向孙子组件或者后代组件传递数据同样可以利用props进行层层传递。但是，开发过程中我们会遇到各种各样的情况，譬...
react-cornerstone-viewport:React的基础医学图像视口组件
05-06
react-cornerstone-viewport React的基础医学图像视口组件 文档和示例： : 安装# # NPMnpm install --save react-cornerstone-viewport# # Yarnyarn add react-cornerstone-viewport用法import React , { Component ...
use-react-router：使用React Router的React Hook进行发布订阅行为
02-03
useReactRouter useReactRouter是一个React Hook，它为react-router提供pub-sub行为。 与withRouter高阶组件不同， useReactRouter会在位置更改时重新呈现您的组件！ useReactRouter()返回一个对象，该对象包含HOC将作为props传递的history ， location和match属性。 可以在Medium： 上找到有关该程序包设计和开发的教程。 为什么选择Pub-Sub？ 发布-订阅行为是对react-router包的常见请求（通常被拒绝）。 对于那些热衷于使用pub-sub行为而不是react-router的建议替代方法的用户，此软件包提供了一个解决方案。 预计非发布订阅的React Hook最终会包含在react-router包本身中。 安装 您必须使用react-router和react-router-dom v5.0.0或更高版本。 npm install use-react-router或 yarn add use-react-router 利用 导入useReactRo
react-订阅在线离线事件的ReactHook
08-15
订阅在线/离线事件的React Hook
【React进步系列】万能通信之发布订阅
weixin_42900858的博客
07-10 563
发布-订阅模式是一种软件设计模式，其中发布者和订阅者之间存在一种松散的耦合关系。发布者负责发布（或广播）事件或消息，而订阅者则负责订阅并接收这些事件或消息。这样，发布者和订阅者之间不直接进行通信，而是通过一个称为事件总线（Event Bus）或消息队列（Message Queue）的中介来进行通信发布-订阅模式为React应用程序中的组件通信提供了一种灵活且解耦的机制。通过事件或消息队列，组件可以在不直接耦合的情况下进行通信。这种模式在处理复杂的应用程序结构或多个组件之间的交互时非常有用。
react-notification-center:React的通知中心组件
05-05
通知中心 组件说明在这里 演示与范例 现场演示： 要在本地构建示例，请运行： npm install npm start 然后在浏览器中打开 。 安装 使用react-notification-center的最简单方法是从NPM安装它，并将其包含在您自己的React构建过程中（使用 ， 等）。 您还可以通过在页面中包含dist/react-notification-center.js来使用独立版本。 如果使用它，请确保已经包含React，并且它可以作为全局变量使用。 npm install react-notification-center --save 用法 在此说明用法 var NotificationCenter = require('react-notification-center'); <NotificationCenter>Example</Notification
react-confirm-alert:React组件确认对话框
05-08
v.1.xx的文档，入门使用NPM安装： $ npm install react-confirm-alert --save选项const options = { title : 'Title' , message : 'Message' , buttons : [ { label : 'Yes' , onClick : ( ) => alert (...
react-split-pane：React拆分窗格组件
02-05
React拆分窗格 ...npm install react-split-pane # or if you use yarn yarn add react-split-pane # # Example Usage ` ` ` jsx < /SplitPane > < SplitPane split = " vertical " minSize =
react-smooth-dnd：React包装器组件以实现smooth-dnd
02-05
React顺畅 快速和轻量级的拖放式可排序库，用于React，具有许多配置选项，涵盖许多d＆d场景。...import { Container , Draggable } from ' react-smooth-dnd ' ; class SimpleSortableList extends Compon
react-side-pane:React组件-侧窗格
03-26
npm i react-side-pane yarn add react-side-pane 并通过以下方式将其导入您的组件中 import SidePane from "react-side-pane" ; 用法 react-side-pane使用引擎盖下的和来处理过渡。 SidePane应该占据所有屏幕，并且...
17. React消息订阅与发布 pubsub-js
人无远虑,必有近忧.
04-12 160
1.React脚手架引入pubsub-js yarn add pubsub-js 2. pubsub-js的使用 2.1 消息的订阅方和消息的发布方 消息发布方 定义消息名，和要发布的消息数据 消息订阅方 接受消息名，和消息数据 2.2 pubsub-js代码实现 2.2.1 发布消息(发布方) 代码格式如下： PubSub.publish(消息名,消息数据) import PubSub from "pubsub-js" //在需要传递数据给其他组件的js方法中发布消息 pubsub_f
react消息订阅与发布机制-兄弟组件间通信
qq_39840183的博客
08-02 210
用途： 可用于组件间的通信，数据传递。 工具库： PubSubJS 下载： npm install pubsub-js --save 使用： 订阅消息 需要在componentDidMount， componentWillUnmount,两个生命周期函数中。用于订阅消息和取消订阅。 //订阅消息 componentDidMount(){ this.token = PubSub.subscribe('消息名',function(msg,data){}) } //取消订...
react多层级组件通讯跨组件通讯，传参，react hooks使用pubsub（发布订阅）
qq_35233052的博客
09-09 2062
在react中跨多层级组件通讯通过传参太麻烦了，所以我就采用了发布订阅模式来跨组件通讯，选用的pubsub-js 在react直接使用pubsub是有问题的，一不小心就会重复订阅，导致多次执行，这肯定不是我们想要的效果 所以在pubsub-js的基础上封装了个PubSub hook，下面看代码 新建一个usePubSub.js的文件 import PubSub from 'pubsub-js'; export function useSubscribe (msg, callback) { .
React消息订阅与发布机制
qq_44850230的博客
06-07 610
React消息订阅与发布机制
React 中的发布订阅模式
weixin_50828895的博客
03-03 3252
发布订阅模式
5款 React 实时消息提示通知(Message/Notification)组件推荐与测评
蒋川@卡拉云
06-04 3531
React 消息提示通知组件（Message / Notification）是我们日常开发中经常使用的组件，它可用作与用户交互的反馈提示，信息提交成功、错误、操作警告等场景使用。原生JavaScript 提供了alert、prompt、confirm 等方法，这三个方法的不支持定制化，使用场景严重受限，特别是 alert 在浏览器外弹窗，体验非常糟糕。因此要想给用户提供良好的使用体验，我们需要封装一个定制化较好的 React 消息提示组件，这种组件看似简单，但也存在非常多深坑要小心，例如遮罩层、消失时间、点
React中的消息订阅与发布
m0_66870951的博客
08-30 1768
消息订阅与发布：使用此方式的好处是，兄弟组件间通信不必再像使用props那种通过父组件创建函数来进行通信，多层组件之间通信也不必再一层层的进行传递， 直接在触发事件的组件中发布消息 ，监听组件中订阅消息即可；（5）取消：在刚才订阅的组件中，利用componentWillUnmount钩子将PubSub.unsubscribe挂载将此组件中的订阅进行取消。（3）订阅：利用componentDidMount钩子将PubSub.subscribe函数挂载，从而在需要订阅的组件进行消息的订阅。......
react环境下利用发布-订阅模式实现兄弟组件之间传值
sinat_38757616的博客
01-03 2267
首先，要写一个事件代理类作为发布者和订阅者的中介： const eventProxy = { onObj: {}, oneObj: {}, on: function(key, fn) { if(this.onObj[key] === undefined) { this.onObj[key] = []; } const args = [].conc...
四、React中利用发布订阅机制（PubSub）来解决组件之间的数据传递
jcodery的博客
02-23 603
一、关于父子组件之间的通信 父组件给子组件传递数据：利用props 子组件给父组件传递数据：父组件先通过props 给子组件传递一个函数，要求子组件执行这个函数，同时传递一个参数，此时父组件中的函数可以拿到这个参数 存在问题： 操作数据的部分全部放在共同的父组件中 兄弟之间传递数据需要借助共同的父组件，过于繁琐 二、发布订阅机制 用途：适用于任何组件之间的通信，避免了借助共同父组件 用法：在需要接受数据的组件中订阅消息，传递数据的组件中发布消息（先订阅，再发布）。当订阅者和发布者订阅的消息名一
react兄弟组件传值
最新发布
08-16
在 React 中，兄弟组件之间的传值可以通过共同的父组件来实现。有几种方式可以实现兄弟组件之间的传值： 1. 状态提升（Lifting State Up）：将需要共享的状态提升到它们的共同父组件中，然后再分别传递给兄弟组件。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值