react项目中使用消息订阅(subscribe)-发布(publish)机制

可以解决的问题：在无法使用全局变量和组件传值的情况下，需要拿到其他页面的数据

好处：订阅(subscribe)-发布(publish) 使用这种方式的好处是，兄弟组件间通信不必再像使用props那种通过父组件来通信，多层组件之间通信也不必在一层一层的传递，直接在触发事件的组件中发布消息监听组件中订阅消息即可；（类似Vue的$emit）。

使用方法：

工具库: PubSubJS
下载: npm install pubsub-js --save
使用:
import PubSub from ‘pubsub-js’ //引入
PubSub.publish(‘delete’, data) //发布消息
PubSub.subscribe(‘delete’, function(data){ }); //订阅
PubSub.publish(‘isScreenFull’, (‘isScreenFull’, data));//发布

 PubSub.subscribe('isScreenFull', (msg, data) => {console.log('订阅====》', data);setIsScreenFull(data)})

加粗样式页面销毁时要销毁订阅，否则可能会造成内存溢出

  PubSub.unsubscribe(searchShow, isAnimate,isScreenFull)

react项目中使用消息订阅(subscribe)-发布(publish)机制相关推荐

小程序中消息订阅与发布
注:小程序中最好不要在开发工具里面使用命令行安装,最好使用外部的 1)首先要在项目中初始化一个package.json用来存放包 npm init 2)下载安装要使用的包,这里是要使用消息订阅与发布 ...
切换上下首音乐功能的实现（消息订阅与发布的使用）
切换上下首音乐思路: 切换歌曲,实际上是切换歌曲的id,歌曲的详情页只有当前播放歌曲的id,所以要想更新音乐的id得去每日推荐的列表页更新,切换歌曲有两种情况,一个是上一首,一个是下一首,可以绑定在 ...
Vue（组件间通信：props、自定义事件、全局事件总线、消息订阅与发布）
一.props props不仅可以实现父给子传递信息,还可以进行子给父传递信息 1.父给子传递信息: 父组件中给子组件实例传递信息子组件利用props进行接收组件传递信息(接收方式有三种:数组.对象 ...
Vue学习之--------消息订阅和发布、基础知识和实战应用（2022/8/24）
文章目录 1.基础知识 2.代码实例 2.1 main.js 2.2 School.vue 2.3 Student.vue 2.4 App.vue 3.全局事件总线通信改为消息的订阅和发布 3.1 核 ...
mqttnet+emqx实现消息订阅与发布
mqttnet+emqx实现消息订阅与发布 1 在Windows操作系统下使用EMQX 1.1 部署前准备首先进入官网https://www.emqx.io/zh/downloads?os=Wind ...
React 项目中使用Echarts
直接上代码吧: react 项目中添加Echarts 相关模块 npm install echarts --save 代码: import React from 'react' import * as ...
react项目中使用mocha结合chai断言库进行单元测试
react项目中使用mocha结合chai断言库进行单元测试 git地址:https://github.com/yancekang/... 如果对你有所帮助,感谢start 项目搭建 create-r ...
优雅的在React项目中使用Redux
概念首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与React没有任何关系,其他UI框架也可以使用Redux react-redux React插件,作用:方便在 ...
如何优雅地在React项目中使用Redux
前言或许你当前的项目还没有到应用Redux的程度,但提前了解一下也没有坏处,本文不会安利大家使用Redux 概念首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与 ...
中使用js修改变量值_谈一谈css-in-js在React项目中的使用
一.什么是css-in-js 参考:[css in js 简介] 简单来说,传统的前端方案推崇"关注点分离"原则,HTML.CSS.JavaScript 应该各司其职,进行分离. ...

react项目中使用消息订阅(subscribe)-发布(publish)机制

react项目中使用消息订阅(subscribe)-发布(publish)机制相关推荐

最新文章

热门文章