React第十一节 组件之间通讯之发布订阅模式(自定义发布订阅器)

组件之间通讯常用方案
1、通过props
2、通过context
3、通过发布订阅模式
4、通过Redux 后面会有专栏介绍

什么情况下使用发布订阅模式

a、当我们想要兄弟组件之间通讯,而共同的父组件中又用不到这些数据时候;
b、当多个毫无相关的组件之间想要进行数据的传递时候,我们可以使用这种模式,当然可以使用 Redux 进行状态管理
c、当我们使用的是通用型组件,组件中只有通用功能,而不用关注各个组件之间的业务代码逻辑时候;

什么是发布订阅模式?

发布订阅模式(也称观察者模式)是一种管理跨组件通讯的方案,特别是在不想直接依赖于特定组件的时候。这种模式允许一个对象(发布者)通知多个其他对象(订阅者),而不必知道这些对象是谁或他们在哪里。
这种方案有助于组件之间解耦,可以提高代码模块化和可维护性。

1、自定义发布订阅类

利用类自身的特性,写通用的订阅事件、发布事件、取消订阅事件

// myComPubsuh 文件import { Component } from "react";export default class MyComPubsuh extends Component {constructor(props) {super(props);this.events = {}}subscribe(event, callback) {// 添加订阅事件if (!this.events[event]) {this.events[event] = []}this.events[event].push(callback)}unsubscribe(event, callback) {// 卸载订阅事件if (this.events[event])  {this.events[event] = this.events[event].filter(cb => cb !== callback)}}pubilsh(event, data) {// 发布事件并执行订阅事件的回调函数if (this.events[event])  {this.events[event].forEach(callback => callback(data));}}
}export  const myPubsh = new MyComPubsuh()

2、子组件A发布消息事件

使用 myPubsh 中的 publish 方法进行消息的发布;

// ChildA 文件
import {useState} from 'react'
import { myPubsh } from './myComPubsuh'
export default function ChildA() {const [message, setMessage] = useState('躺平')// 通过按钮发布消息const handlePubilsh = () => {myPubsh.pubilsh('onabortMessage', message)}const handleInputChange = (e) => {setMessage(e.target.value)// 通过input 自身change 事件触发发布消息// 调用 发布订阅类中的 pubilsh 方法myPubsh.pubilsh('onabortMessage', message)}return (<div><h3>组件A</h3><p>发布消息:{message}</p><input type="text" value={message} onChange={handleInputChange} /><button onClick={handlePubilsh}>发布</button></div>)
}

3、子组件B订阅发布的消息

利用useEffect() Hook 自身的特性,

二个参数为空时候:
a、渲染完成时候,会加载执行一次;
b、组件中任何属性更新时候,都会执行一次;

内部有return 函数,代表组件卸载时候会执行;

// ChildB 组件
import { useEffect, useState } from 'react'
import { myPubsh } from './myComPubsuh'
export default function ChildB() {const [message, setMessage] = useState('')// 利用useEffect() hookuseEffect(() => {const onHandleMsg = (data) => {setMessage(data)}// 订阅 消息myPubsh.subscribe('onabortMessage', onHandleMsg)return () => {// 回调函数执行卸载myPubsh.unsubscribe('onabortMessage', onHandleMsg)}}, [])return (<div><h3>组件B</h3><p>订阅,组件A发布的信息</p><p>{message}</p></div>)
}

4、父组件中 调用两个 子组件

import ChildA from './childA'
import ChildB from './childB'
export default function index() {return (<><ChildA></ChildA><hr /><ChildB></ChildB></>)
}

如图效果:

这种发布订阅模式,可以在任意组件中使用,不会局限于兄弟组件,父子组件,祖孙组件,多层级组件都可以实现应用;
优点
a、组件之间解耦,组件之间不需要彼此引用,可以通过定义的发布订阅类进行通讯;
b、简化状态管理,组件只需要关注自己本身的业务,其他事件由发布订阅类进行处理;
c、异步通信:发布-订阅模式通常支持异步消息传递,这可以提高系统的响应性和效率
d、灵活性:订阅者可以根据自己的需求选择订阅或取消订阅某个主题或频道。
e、扩展性:由于发布者和订阅者是解耦的,所以可以容易地增加更多的发布者或订阅者,而不需要对现有系统进行大的修改。
缺点
a、内存泄漏,使用的发布订阅方法,在组件卸载时候,没有进行注销,会导致事件越来越多;
b、状态跟踪不清晰,复杂的业务场景下,难以追踪状态的变更;
c、复杂性:随着订阅者数量的增加,管理和维护订阅关系可能会变得复杂。
d、安全性:由于发布者不直接与订阅者交互,所以可能需要额外的机制来确保消息的安全性和完整性
e、消息积压和延迟:如果订阅者无法及时处理收到的消息,可能会导致消息在某处积压,从而引发延迟或其他相关问题。

qiong yao qushi

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/888656.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

渗透测试之Web基础之Linux病毒编写——泷羽sec

声明&#xff1a; 学习视频来自B站UP主泷羽sec,如涉及侵权马上删除文章。本文只涉及学习内容,其他的都与本人无关,切莫逾越法律红线,否则后果自负 泷羽sec的个人空间-泷羽sec个人主页-哔哩哔哩视频 (bilibili.com)https://space.bilibili.com/350329294 导读&#xff1a; 时刻…

macos上设置windsurf命令行启动

解决方案 1. 在/usr/local/bin 目录下创建软链 sudo ln -s /Applications/Windsurf.app/Contents/Resources/app/bin/windsurf /usr/local/bin/windsurf 2. 执行source source ~/.zshrc

基于神经网络的弹弹堂类游戏弹道快速预测

目录 一、 目的... 1 1.1 输入与输出.... 1 1.2 隐网络架构设计.... 1 1.3 激活函数与损失函数.... 1 二、 训练... 2 2.1 数据加载与预处理.... 2 2.2 训练过程.... 2 2.3 训练参数与设置.... 2 三、 测试与分析... 2 3.1 性能对比.... 2 3.2 训练过程差异.... 3 四、…

Xlsxwriter生成Excel文件时TypeError异常处理

在使用 XlsxWriter 生成 Excel 文件时&#xff0c;如果遇到 TypeError&#xff0c;通常是因为尝试写入的值或格式与 XlsxWriter 的限制或要求不兼容。 1、问题背景 在使用 Xlsxwriter 库生成 Excel 文件时&#xff0c;出现 TypeError: “expected string or buffer” 异常。此…

MATLAB期末复习笔记(下)

目录 五、数据和函数的可视化 1.MATLAB的可视化对象 2.二维图形的绘制 3.图形标识 4.多子图绘图 5.直方图的绘制 &#xff08;1&#xff09;分类 &#xff08;2&#xff09;垂直累计式 &#xff08;3&#xff09;垂直分组式 &#xff08;4&#xff09;水平分组式 &…

操作系统学习

问题&#xff1a; 因为想用傲梅来给系统盘扩容&#xff0c;导致无法进入操作系统&#xff0c;报错如下&#xff1a; 无法加载应用程序或操作系统&#xff0c;原因是所需文件丢失或包含错误. 文件:Windowslsystem32lwinload.efi错误代码: 0xc000007b 你需要使用恢复工具。如果…

【环境搭建】Python、PyTorch与cuda的版本对应表

一个愿意伫立在巨人肩膀上的农民...... 在深度学习的世界里&#xff0c;选择合适的工具版本是项目成功的关键。CUDA、PyTorch和Python作为深度学习的三大支柱&#xff0c;它们的版本匹配问题不容忽视。错误的版本组合可能导致兼容性问题、性能下降甚至项目失败。因此&#xff0…

No.26 笔记 | 信息收集与工具实践指南

渗透测试的第一步&#xff1a;信息收集背后的“侦察艺术” 在网络安全的世界里&#xff0c;信息就是武器。 无论是追踪隐藏的漏洞&#xff0c;还是找到不被注意的入口&#xff0c;信息收集就像一场现代化的“谍战片”。而作为渗透测试的开场白&#xff0c;信息收集不仅考验技…

Netty 概述与基本原理

在现代的网络编程中&#xff0c;性能与扩展性成为了构建高效网络应用的核心需求。Netty 是一个用于构建高性能网络应用的异步事件驱动框架&#xff0c;具备高吞吐量、低延迟的特点&#xff0c;被广泛应用于各种需要处理海量连接的场景&#xff0c;例如游戏服务器、即时通讯、分…

mysql为什么用B+树,不用B树和hash

B树每个节点都存储数据和指针&#xff0c;所有节点组成树&#xff0c;叶子结点指针为null&#xff0c;因为每个节点存放数据&#xff0c;而每一页的大小是固定的&#xff0c;这样就会导致存储的键值减少&#xff0c;指针也减少。 哈希索引只支持等值匹配&#xff0c;不支持范围…

HTML5系列(12) 内联式多媒体嵌入指南

前端技术探索系列&#xff1a;HTML5 内联式多媒体嵌入指南 &#x1f3a5; 致读者&#xff1a;探索多媒体嵌入的艺术 &#x1f44b; 前端开发者们&#xff0c; 今天我们将深入探讨 HTML5 的多媒体嵌入技术&#xff0c;学习如何创建灵活、高效且兼容性良好的多媒体内容。 高级…

计算机网络 第5章 运输层

计算机网络 &#xff08;第8版&#xff09; 第 5 章 传输层5.4 可靠传输的原理5.4.1 停止等待协议5.4.2 连续ARQ协议 5.5 TCP报文段的首部格式5.6 TCP可靠传输的实现5.6.1 以字节为单位的滑动窗口5.6.2 超时重传时间的选择 5.7 TCP的流量控制5.7.1 利用滑动窗口实现流量控制 5.…

股指期货基差的影响因素有哪些?

在股指期货交易中&#xff0c;有一个重要的概念叫做“基差”。简单来说&#xff0c;基差就是股指期货价格与其对应的现货价格之间的差异。比如&#xff0c;我们现在有IC2401股指期货&#xff0c;它挂钩的是中证500指数。如果IC2401的价格是5244&#xff0c;而中证500指数的价格…

<!DOCTYPE html>的作用是什么

一、背景 从今天开始会不定时的发布一些前端的常见面试题&#xff0c;供大家参考。今天要发布的内容是关于html的面试题的作用是什么。接下来就一起讨论以下吧 二、概念 DOCTYPE 是html5中一种标准通用标记语言的文档类型的声明&#xff0c;它的目的就是为了告诉浏览器应该以…

智能社区服务小程序+ssm(lw+演示+源码+运行)

摘要 随着信息技术在管理上越来越深入而广泛的应用&#xff0c;管理信息系统的实施在技术上已逐步成熟。本文介绍了智能社区服务小程序的开发全过程。通过分析智能社区服务小程序管理的不足&#xff0c;创建了一个计算机管理智能社区服务小程序的方案。文章介绍了智能社区服务…

用人话讲计算机:Python篇!(十一)相对路径与绝对路径

目录 一、计算机中的路径 &#xff08;1&#xff09;什么叫路径 &#xff08;2&#xff09;绝对路径 &#xff08;3&#xff09;相对路径 二、Python中的路径 &#xff08;1&#xff09;绝对路径 &#xff08;2&#xff09;相对路径 &#xff08;3&#xff09;总结 一、…

基于VTX356语音识别合成芯片的智能语音交互闹钟方案

一、方案概述 本方案旨在利用VTX356语音识别合成芯片强大的语音处理能力&#xff0c;结合蓝牙功能、APP或小程序&#xff0c;打造一款功能全面且智能化程度高的闹钟产品。除了基本的时钟显示和闹钟提醒功能外&#xff0c;还拥有正计时、倒计时、日程安排、重要日提醒以及番茄钟…

MFC图形函数学习13——在图形界面输出文字

本篇是图形函数学习的最后一篇&#xff0c;相关内容暂告一段落。 在图形界面输出文字&#xff0c;涉及文字字体、大小、颜色、背景、显示等问题&#xff0c;完成这些需要系列函数的支持。下面做简要介绍。 一、输出文本函数 原型&#xff1a;virtual BOOL te…

【CANoe示例分析】Basic UDP Multicast(CAPL)

1、工程路径 C:\Users\Public\Documents\Vector\CANoe\Sample Configurations 16.6.2\Ethernet\Simulation\UDPBasicCAPLMulticast 在CANoe软件上也可以打开此工程:File|Sample Configurations|Ethernet - Simulation of Ethernet ECUs|Basic UDP Multicast(CAPL) 2、示例目…

【23种设计模式】工厂模式:理论剖析与Java实践

文章目录 工厂模式&#xff1a;理论、Java 实现与实践应用一、工厂模式概述二、简单工厂模式&#xff08;一&#xff09;理论介绍&#xff08;二&#xff09;代码实现&#xff08;三&#xff09;关键步骤&#xff08;四&#xff09;流程图 三、工厂方法模式&#xff08;一&…