当前位置: 首页 > news >正文

React项目中使用发布订阅模式

React项目中使用发布订阅模式

  • 1.创建发布订阅器
  • 2.在组件中使用发布订阅器
  • 3. 订阅数据

发布订阅模式(也称观察者模式)是一种管理跨组件通信的有效方式,尤其是在不希望直接依赖于特定组件的情况下。这种模式允许一个对象(发布者)通知多个其他对象(订阅者),而不必知道这些对象是谁或他们在哪里。这有助于解耦组件,使得代码更加模块化和可维护。

1.创建发布订阅器

创建一个发布订阅器类,负责管理时间的注册、取消和触发

# js
class PubSub {constructor(){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)}}publish(event,data){if(this.events[event]){this.events[event].forEach(callback => callback(data))}}
}const pubsub = new PubSub()
# tsinterface EventMap {[eventName: string]: any;
}class EventCenter {private listeners = {}constructor(){this.listeners = {}}subscribe<T extends keyof EventMap>(event: T, callback: (data?: EventMap[T]) => void) {if(!this.listeners[event]) {this.listeners[event] = []}this.listeners[event].push(callback)}publish<T extends keyof EventMap>(event: T, data?: EventMap[T]) {const callbacks = this.listeners[event]if(callbacks) {callbacks.forEach(callback => {callback(data)})}}unsubscribe<T extends keyof EventMap>(event: T, callback?: (data: EventMap[T]) => void) {const callbacks = this.listeners[event];if (callbacks) {if (callback) {this.listeners[event] = callbacks.filter(cb => cb !== callback);} else {delete this.listeners[event];}}}
}export default new EventCenter()

2.在组件中使用发布订阅器

在你的React组件中使用这个发布订阅器。例如,一个组件可以订阅事件以接收数据,而另一个组件可以发布事件来发送数据。假设你有一个按钮组件,当点击时,他会触发一个事件发送一些数据

import React from 'react';
import { pubsub } from './pubsub'; // 引入上面定义的PubSub实例class ButtonComponent extends React.Component {handleClick = () => {pubsub.publish('dataUpdated', { message: 'Hello World!' });};render() {return (<button onClick={this.handleClick}>Click me!</button>);}
}

3. 订阅数据

另一个组件可以订阅这个事件,并在接收到数据时执行某些操作

import React, { useEffect, useState } from 'react';
import { pubsub } from './pubsub'; // 引入上面定义的PubSub实例interface DisplayProps {}
interface DisplayState {message: string;
}const DisplayComponent: React.FC<DisplayProps> = () => {const [message, setMessage] = useState('');useEffect(() => {const handleDataUpdate = ({ message }: { message: string }) => {setMessage(message);};pubsub.subscribe('dataUpdated', handleDataUpdate);return () => {pubsub.unsubscribe('dataUpdated', handleDataUpdate);};}, []);return <div>{message}</div>;
};export default DisplayComponent;

相关文章:

React项目中使用发布订阅模式

React项目中使用发布订阅模式 1.创建发布订阅器2.在组件中使用发布订阅器3. 订阅数据 发布订阅模式&#xff08;也称观察者模式&#xff09;是一种管理跨组件通信的有效方式&#xff0c;尤其是在不希望直接依赖于特定组件的情况下。这种模式允许一个对象&#xff08;发布者&…...

buck boost Ldo 经典模型的默写

BUCK: BOOST: LDO: BUCK-BOOST:...

velero v1.14.1迁移kubernetes集群

1 概述 velero是vmware开源的一个备份和恢复工具&#xff0c;可作用于kubernetes集群下的任意对象和应用数据&#xff08;PV上的数据&#xff09;。github地址是https://github.com/vmware-tanzu/velero。 对于应用数据&#xff0c;可分文件级别的复制和块级别的复制。文件级…...

Qt Model/View之Model

在检查如何处理选择之前&#xff0c;您可能会发现检查模型/视图框架中使用的概念很有用。 基本概念 在模型/视图架构中&#xff0c;模型提供了一个标准接口&#xff0c;用于视图和委托访问数据。在Qt中&#xff0c;标准接口由QAbstractItemModel类定义。无论数据项如何存储在…...

如何在 Vue 3 中使用 Element Plus

在 Vue 3 中使用 Element Plus 是一个相对直接的过程&#xff0c;因为 Element Plus 是为 Vue 3 设计的 UI 组件库。以下是在 Vue 3 项目中集成和使用 Element Plus 的基本步骤&#xff1a; 1. 安装 Element Plus 首先&#xff0c;你需要在你的 Vue 3 项目中安装 Element Plu…...

【TVM 教程】在 Relay 中使用 Pipeline Executor

Apache TVM 是一个端到端的深度学习编译框架&#xff0c;适用于 CPU、GPU 和各种机器学习加速芯片。更多 TVM 中文文档可访问 → Apache TVM 中文站​tvm.hyper.ai/ 作者&#xff1a;Hua Jiang 本教程介绍如何将「Pipeline Executor」与 Relay 配合使用。 import tvm from t…...

使用mingw64 编译 QT开发流程

1. 安装QT5 QT5.12.12 安装时选择mingw的开发包 2. 使用qtdesigner 进行ui设计 生成ui文件 3. 将ui文件转换为.h 文件 uic mywindow.ui -o ui_mywindow.h代码中指向生成的 UI 对象的地方 要改成这个Form 4. 编译 创建mainwindow.cpp #include "mainwindow.h"…...

品读 Java 经典巨著《Effective Java》90条编程法则,第3条:用私有构造器或者枚举类型强化Singleton属性

《Effective Java》中的第3条编程法则主要是针对在开发过程如何实现单例模式&#xff0c;作者 Joshua Bloch 在书中给出了3种单例模式的实现方式&#xff1a;私有构造器和公有静态域、私有构造器和公有静态方法、枚举式。 什么是单例模式&#xff1f; 单例模式是一种设计模式…...

如何在Flask中处理表单数据

在Flask中处理表单数据是一个常见的任务&#xff0c;它涉及从客户端接收数据并在服务器端进行解析和处理。Flask本身不直接提供表单验证的功能&#xff0c;但它可以与WTForms等库结合使用来简化表单处理过程。不过&#xff0c;即使没有WTForms&#xff0c;你仍然可以直接通过Fl…...

9月12日的学习

练习 #include "widget.h" #include "ui_widget.h" QListWidgetItem *p; Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget),socket(new QTcpSocket(this))//给客户端指针实例化空间及关联父组件 {ui->setupUi(this);//初始化,ui-…...

Java架构师未来篇大模型

目录 1. 大模型的定义2 大模型相关概念区分3 大模型的发展历程4. 大模型的特点5 大模型的分类6 大模型的泛化与微调7 大模型岗位需求8 理解大模型8.1 生活中的比喻8.2 大模型的定义9 大模型工作9.1 数据的积累9.2 模型的训练9.3 预测和应用10 大模型的实际应用10.1 语言处理10.…...

11.5.软件系统分析与设计-面向对象的程序设计与实现

面向对象的程序设计与实现 设计模式 Java代码 C代码...

中电金信:金融级数字底座“源启”:打造新型数字基础设施 筑牢千行百业数字化转型发展基石

近期&#xff0c;金融级数字底座“源启”登录中国电子《最轻大国重器》融媒体报道。从数字底座到数智底座&#xff0c;从金融行业到千行百业&#xff0c;“源启”用数智化转型的中国电子解决方案&#xff0c;为全球企业转型及安全发展提供强大动能。 立足中国电子科技创新成果&…...

IDEA怎么让控制台自动换行

IDEA怎么让控制台自动换行 操作流程 菜单>File>Settings>Editor>General>Console>勾选Use soft wraps in console 换行效果...

大模型笔记02--基于fastgpt和oneapi构建大模型应用平台

大模型笔记02--基于fastgpt和oneapi构建大模型应用平台 介绍部署&测试部署fastgptoneapi服务部署向量模型m3e和nomic-embed-text测试大模型 注意事项说明 介绍 随着大模型的快速发展&#xff0c;众多IT科技厂商都开发训练了各自的大模型&#xff0c;并提供了各具特色的AI产…...

linux-用户与权限管理-组管理

在 Linux 系统中&#xff0c;用户、组与权限管理是保障系统安全的重要机制。用户和组的管理不仅涉及对系统资源的访问控制&#xff0c;还用于权限的分配和共享。组管理在 Linux 中尤其重要&#xff0c;它能够帮助管理员组织用户并为不同的组分配特定权限&#xff0c;从而控制用…...

Day23_0.1基础学习MATLAB学习小技巧总结(23)——句柄图形

利用空闲时间把碎片化的MATLAB知识重新系统的学习一遍&#xff0c;为了在这个过程中加深印象&#xff0c;也为了能够有所足迹&#xff0c;我会把自己的学习总结发在专栏中&#xff0c;以便学习交流。 参考书目&#xff1a;《MATLAB基础教程 (第三版) (薛山)》 之前的章节都是…...

同步io和异步io

同步 I/O 和异步 I/O 是处理输入输出操作的两种不同策略&#xff0c;它们各有优缺点&#xff0c;适用于不同的场景。下面是它们的主要区别&#xff1a; 同步 I/O 定义&#xff1a;在同步 I/O 模型中&#xff0c;发起 I/O 操作的线程会被阻塞&#xff0c;直到操作完成。换句话说…...

AI基础 L19 Quantifying Uncertainty and Reasoning with Probabilities I 量化不确定性和概率推理

Acting Under Uncertainty 1 Reasoning Under Uncertainty • Real world problems contain uncertainties due to: — partial observability, — nondeterminism, or — adversaries. • Example of dental diagnosis using propositional logic T oothache ⇒ C av ity • H…...

C++ 关于时间的轮子

时间字符串转chrono::system_clock std::chrono::system_clock::time_point parse_date(const std::string& date_str) {std::tm tm {};std::istringstream ss(date_str);ss >> std::get_time(&tm, "%Y-%m-%d"); // 假设日期字符串格式为YYYY-MM-DDr…...

KubeSphere 容器平台高可用:环境搭建与可视化操作指南

Linux_k8s篇 欢迎来到Linux的世界&#xff0c;看笔记好好学多敲多打&#xff0c;每个人都是大神&#xff01; 题目&#xff1a;KubeSphere 容器平台高可用&#xff1a;环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...

第19节 Node.js Express 框架

Express 是一个为Node.js设计的web开发框架&#xff0c;它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用&#xff0c;和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...

【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密

在实际项目中,用户注册、登录、修改密码等操作,都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输,在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...

Qt Widget类解析与代码注释

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码&#xff0c;写上注释 当然可以&#xff01;这段代码是 Qt …...

macOS多出来了:Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用

文章目录 问题现象问题原因解决办法 问题现象 macOS启动台&#xff08;Launchpad&#xff09;多出来了&#xff1a;Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。 问题原因 很明显&#xff0c;都是Google家的办公全家桶。这些应用并不是通过独立安装的…...

【Java_EE】Spring MVC

目录 Spring Web MVC ​编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 ​编辑参数重命名 RequestParam ​编辑​编辑传递集合 RequestParam 传递JSON数据 ​编辑RequestBody ​…...

【OSG学习笔记】Day 16: 骨骼动画与蒙皮(osgAnimation)

骨骼动画基础 骨骼动画是 3D 计算机图形中常用的技术&#xff0c;它通过以下两个主要组件实现角色动画。 骨骼系统 (Skeleton)&#xff1a;由层级结构的骨头组成&#xff0c;类似于人体骨骼蒙皮 (Mesh Skinning)&#xff1a;将模型网格顶点绑定到骨骼上&#xff0c;使骨骼移动…...

selenium学习实战【Python爬虫】

selenium学习实战【Python爬虫】 文章目录 selenium学习实战【Python爬虫】一、声明二、学习目标三、安装依赖3.1 安装selenium库3.2 安装浏览器驱动3.2.1 查看Edge版本3.2.2 驱动安装 四、代码讲解4.1 配置浏览器4.2 加载更多4.3 寻找内容4.4 完整代码 五、报告文件爬取5.1 提…...

Spring是如何解决Bean的循环依赖:三级缓存机制

1、什么是 Bean 的循环依赖 在 Spring框架中,Bean 的循环依赖是指多个 Bean 之间‌互相持有对方引用‌,形成闭环依赖关系的现象。 多个 Bean 的依赖关系构成环形链路,例如: 双向依赖:Bean A 依赖 Bean B,同时 Bean B 也依赖 Bean A(A↔B)。链条循环: Bean A → Bean…...

Yolov8 目标检测蒸馏学习记录

yolov8系列模型蒸馏基本流程&#xff0c;代码下载&#xff1a;这里本人提交了一个demo:djdll/Yolov8_Distillation: Yolov8轻量化_蒸馏代码实现 在轻量化模型设计中&#xff0c;**知识蒸馏&#xff08;Knowledge Distillation&#xff09;**被广泛应用&#xff0c;作为提升模型…...