React应用中的消息订阅发布模式实践:PubSub库的应用

React应用中的消息订阅发布模式实践:PubSub库的应用

随着React应用的复杂性增加,组件之间的通信变得越来越重要。而消息订阅发布(PubSub)模式提供了一种简洁而灵活的方式来实现组件间的解耦通信。在这篇博客中,我们将探讨如何在React应用中使用PubSub库来实现消息订阅发布模式,以实现组件间的通信。

什么是消息订阅发布模式?

消息订阅发布模式是一种软件设计模式,用于实现组件之间的松耦合通信。在这种模式中,有一个中心化的消息通信系统,组件可以通过订阅和发布消息来进行通信,而不需要直接引用彼此。

在React中使用PubSub库

首先,我们需要安装PubSub库:

npm install pubsub-js

然后,让我们来看一个示例,展示如何在React应用中使用PubSub进行组件间的通信。

发布消息的组件(Search)

// Search.jsx
import React, { Component } from 'react';
import PubSub from 'pubsub-js';export default class Search extends Component {state = {keyword: '',}onChange = (e) => {this.setState({ keyword: e.target.value });}onSearch = () => {const { keyword } = this.state;PubSub.publish('searchKeywordChanged', keyword);}onKeyPress = (e) => {if (e.key === 'Enter') {this.onSearch();}}render() {return (<div className="input-group mb-3"><inputtype="text"className="form-control"placeholder="输入关键字"aria-label="Recipient's username"aria-describedby="basic-addon2"onChange={this.onChange}onKeyPress={this.onKeyPress}/><div className="input-group-append"><buttonclassName="btn btn-outline-secondary"type="button"onClick={this.onSearch}>搜索</button></div></div>)}
}

Search组件中,当用户输入关键字并按下回车或点击搜索按钮时,我们使用PubSub库的publish方法发布了一个名为searchKeywordChanged的主题,并传递了当前关键字作为参数。

订阅消息的组件(Users)

// Users.jsx
import React, { Component } from 'react';
import axios from 'axios';
import PubSub from 'pubsub-js';import User from '../User';export default class Users extends Component {token = nullstate = {users: [],}componentDidMount() {// 默认先获取一次用户this.fetchUsers();this.token = PubSub.subscribe('searchKeywordChanged', (_, keyword) => {this.fetchUsers(keyword);});}componentWillUnmount() {PubSub.unsubscribe(this.token);}fetchUsers = async (keyword) => {const res = await axios.get(`/api/github/search/users?q=${keyword || 'h'}`);if (res && res.data) {this.setState({ users: res.data.items || [] });}}render() {const { users } = this.state;return (<div className="row row-cols-4 g-4">{users.map(user => <User key={user.node_id} user={user} />)}</div>)}
}

Users组件中,我们使用PubSub库的subscribe方法订阅了名为searchKeywordChanged的主题。当这个主题的消息被发布时,我们会触发回调函数,重新获取相应的用户信息并更新UI。

通过这种消息订阅发布的模式,我们可以实现组件之间的解耦,使得它们能够独立地进行通信,而不需要直接引用彼此。这样的设计模式有助于提高代码的可维护性和可扩展性,使得应用程序更易于理解和维护。

参考

  • React应用中的消息订阅发布模式实践:PubSub库的应用
  • 完整代码
  • PubSubJS

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

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

相关文章

20240307-1-前端开发校招面试问题整理JavaScript

前端开发校招面试问题整理【1】——JavaScript 1、JavaScript 基础 Q&#xff1a;介绍 js 的基本数据类型&#xff1f; 基本类型&#xff08;值类型&#xff09;&#xff1a;String&#xff0c;Number&#xff0c;Boolean&#xff0c;Null&#xff0c;Undefined&#xff0c;S…

Android获取图片缩略图尺寸问题

1.概述 在选择图片的功能实现中&#xff0c;发现某些图片存在缩略图过于小&#xff0c;因而展示模糊的问题。经分析确认确实查询到的图片尺寸特别小。 2.代码 获取缩略图 fun getImageThumbnail(context: Context, id: Int, int width, int height): Bitmap? {return try …

WinSCP下载安装并结合内网穿透实现固定公网TCP地址访问本地服务器

文章目录 1. 简介2. 软件下载安装&#xff1a;3. SSH链接服务器4. WinSCP使用公网TCP地址链接本地服务器5. WinSCP使用固定公网TCP地址访问服务器 1. 简介 ​ Winscp是一个支持SSH(Secure SHell)的可视化SCP(Secure Copy)文件传输软件&#xff0c;它的主要功能是在本地与远程计…

FFmpeg教程(干货快速上手)

什么是FFmpeg&#xff1f; FFmpeg是一款免费、开源的跨平台多媒体处理工具&#xff0c;它支持几乎所有的视频格式和编码标准。FFmpeg包含了一系列的子项目和工具&#xff0c;如ffmpeg命令行工具用于转码和处理视频和音频文件&#xff0c;ffplay用于播放多媒体内容&#xff0c;…

穿越牛熊,股市的春天还有多远?

2023年&#xff0c;资本市场的严冬令无数投资者和机构投资者都感受到了前所未有的压力。VC/PE、公募基金、股权投资类公司等机构&#xff0c;在这一年里业绩普遍不佳&#xff0c;寒意弥漫。VC/PE机构的营业收入普遍呈现负增长&#xff0c;公募基金更是历史上首次连续两年亏损&a…

LeetCode 刷题 [C++] 第3题.无重复字符的最长子串

题目描述 给定一个字符串 s &#xff0c;请你找出其中不含有重复字符的 最长子串 的长度。 题目分析 可以使用滑动窗口加哈希表来实现&#xff1a; 使用start和end两个变脸来表示滑动窗口的头部位置和尾部位置&#xff0c;两者开始均为0&#xff1b;借助哈希表来记录已经遍…

redis数据结构类型

文章目录 数据结构特殊的数据结构bitmap 1.string命令1.单值缓存2.对象缓存3.分布式锁4.计数器 2.Hash常用命令应用场景应用场景 4.Set5.Sorted Setzset为什么不用红黑树和用B树 合理的数据编码扩容机制 数据结构 string&#xff1a;最基本的数据类型&#xff0c;二进制安全的…

Unity 给刚体一个力或速度

创建平面和小球&#xff0c;给力或给速度让其弹起 给小球挂载刚体&#xff08;Rigibdody&#xff09;和脚本 &#xff08;力是累计或者衰减的&#xff0c;直接给速度就是赋值&#xff0c;但如果速度就和力类似了&#xff09; using System.Collections; using System.Collect…

解决 ucore lab3 无法触发 page fault 的问题

问题描述 完成清华大学操作系统实验课 ucore(x86) lab3 时&#xff0c;发现无法触发 page fault 异常&#xff0c;具体来说时 check_pgfault() 函数会在执行如下代码时报错 static void check_pgfault(void) {// ......uintptr_t addr 0x100;assert(find_vma(mm, addr) vma…

three.js 射线Ray,三维空间中绘制线框

效果&#xff1a; 代码&#xff1a; <template><div><el-container><el-main><div class"box-card-left"><div id"threejs"></div> <div>{{ res1 }}</div> <div>{{ res2 }}</div><…

serial库串口通讯

前言 Python的pyserial库允许与不同的设备进行通信。 安装 python > 3.4 pip install pyserial 基本流程 import serial# 1. 打开串口 ser serial.Serial()# 2. 设置串口参数&#xff08;例如波特率、数据位、校验位、停止位&#xff09; ser.port /dev/ttyS0 # 这是一…

CDN介绍

概念介绍 CDN Content Delivery Network&#xff0c;缩写&#xff1a;CDN&#xff09;是一种提供更快互联网访问的服务&#xff0c;通过在网络的边缘或核心交换区域部署内容代理服务器来实现。这些服务器利用全局负载调度机制来分发内容&#xff0c;从而构建了一个覆盖范围广…

nRF52832——GPIOTE与外部中断

这里写目录标题 GPIOTE 原理分析GPIOTE 输入事件应用GPIOTE 事件寄存器应用GPIOTE 事件组件的应用&#xff08;库函数&#xff09;GPIOTE PORT 事件应用 GPIOTE 任务应用GPIOTE 任务触发 LED 寄存器操作组件方式进行任务配置 GPIOTE 原理分析 GPIO 任务和时间&#xff08;GPIO…

仿牛客网项目---Elasticsearch分布式搜索引擎

1.什么是ElasticSearch分布式搜索引擎&#xff1f; Elasticsearch是一个开源的分布式搜索引擎&#xff0c;提供实时的、高可用性的搜索和分析解决方案。它支持快速索引和搜索大规模数据&#xff0c;具有分布式架构、RESTful API、基于JSON的查询语言等功能&#xff0c;适用于各…

windows下搭建虚拟机

Windows下搭建虚拟机 安装Linux虚拟机 下载&安装VirtualBox&#xff1a;https://www.virtualbox.org/&#xff0c;点击 download virtualbox 6.x&#xff0c;选择对应平台的版本&#xff1a;Windows hosts → https://download.virtualbox.org/virtualbox/6.1.38/Virtual…

蓝桥杯集训·每日一题2024 (二分,双指针)

前言&#xff1a; 开学了&#xff0c;平时学习的压力也逐渐大起来了&#xff0c;不过还算可以接受&#xff0c;等到后面阶段考的时候就不一样了&#xff0c;我目前为了转专业退选了很多课&#xff0c;这些课我都需要花时间来刷绩点&#xff0c;不然保研就没有竞争力了。我自己会…

【 深度学习相关的线性代数知识点】

深度学习相关的线性代数知识点 在机器学习和深度学习中&#xff0c;线性代数的知识点主要包括标量、向量、矩阵和张量。 线性代数在机器学习和深度学习中扮演着基础且关键的角色。它不仅涉及到算法的设计和优化&#xff0c;而且对于数据的表示、处理和分析都至关重要。例如&a…

洛谷: P1531 I Hate It(线段树)

记录一道线段树单点修改题目。 创建线段树的时间复杂度为O(n),每次查找和修改的时间复杂度均为O(logn) 代码: #include <bits/stdc.h> using namespace std; const int maxn 1e6 10; int arr[maxn], tree[maxn], n, m; void build(int node, int start, int end) {/…

OpenCASCADE+Qt创建建模平台

1、建模平台效果 2、三维控件OCCWidget 将V3d_View视图与控件句柄绑定即可实现3d视图嵌入Qt中&#xff0c;为了方便也可以基于QOpenGLWidget控件进行封装&#xff0c;方便嵌入各种窗体使用并自由缩放。 #ifndef OCCTWIDGET_H #define OCCTWIDGET_H#include <QWidget> #i…

javaWebssh药品进销存信息管理系统myeclipse开发mysql数据库MVC模式java编程计算机网页设计

一、源码特点 java ssh药品进销存信息管理系统是一套完善的web设计系统&#xff08;系统采用ssh框架进行设计开发&#xff09;&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为TOM…