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

第二十九章 使用消息订阅发布实现组件通信

PubSubJS库介绍

如果你想在React中使用第三方库来实现Pub/Sub机制,PubSubJS是一个不错的选择。它是一个轻量级的库,可以在浏览器和Node.js环境中使用。

PubSubJS提供了一个简单的API,可以让你在应用程序中订阅和发布消息。你可以使用npm来安装它:

npm install pubsub-js

1-引入使用

import PubSub from 'pubsub-js'

2-首先订阅消息

PubSub.subscribe('List',function(msg, data){ console.log(msg, data)})

用于接收发布的信息。

3-发布消息

PubSub.publish('List',data)

4-取消订阅消息

PubSub.unsubscribe(this.token)

案例使用

现在有一个页面,有两个兄弟组件

  • Search组件获取输入的关键字,然后交给List组件去网络请求。
  • List组件展示github的用户列表

1-App组件代码

import React, { Component } from 'react'
import Search from './components/Search'
import List from './components/List'export default class App extends Component {render() {return (<div className="container"><Search/><List/></div>)}
}

2-Search组件代码

import React, { Component } from 'react'
import PubSubJs from 'pubsub-js'export default class Search extends Component {searchHandle = () => {const {KeyVal:{value}} = thisPubSubJs.publish('getSearchVal',value)}render() {return (<section className="jumbotron"><h3 className="jumbotron-heading">Search Github Users</h3><div><input ref={c=>this.KeyVal = c} type="text" placeholder="关键字"/><button onClick={this.searchHandle}>Search</button></div></section>)}
}

3-List组件代码

import React, { Component } from 'react'
import PubSubJs from 'pubsub-js'
import axios from 'axios'
import './index.css'
export default class List extends Component {state = {users: [],isFirst: true,isLoading: false,err: '',}getSearchFunc = (msg, data) => {console.log('接收的信息', data)this.setState({ users: [], isFirst: false, isLoading: true })axios.get(`https://api.github.com/search/users?q=${data}`).then((res) => {this.setState({ users: res.data.items, isFirst: false, isLoading: false })console.log('请求成功了', res.data)},(err) => {console.log('请求失败了', err)this.setState({isFirst: false, isLoading: false,err:err.message })}).catch(() => {})}componentDidMount() {this.token = PubSubJs.subscribe('getSearchVal', this.getSearchFunc)}componentWillUnmount() {PubSubJs.unsubscribe(this.token)}render() {const { users, isFirst, isLoading, err } = this.statereturn (<div className="row">{isFirst ? (<h2>欢迎搜索</h2>) : isLoading ? (<h2>Loading...</h2>) : err ? (<h3>{err}</h3>) : (users.map((userObj) => {return (<div className="card" key={userObj.id}><a href={userObj.html_url} target="_blank" rel="noreferrer"><imgalt="头像"src={userObj.avatar_url}style={{ width: '100px' }}/></a><p className="card-text">{userObj.login}</p></div>)}))}</div>)}
}

4-效果展示

在这里插入图片描述


总结

1- 设计状态时要考虑全面,例如有网络请求的时候要考虑网络延迟和请求失败的状态处理。

2- ES6小知识点:解构赋值 + 重命名

let obj = {a:{b:1}}
const { a } = obj // 传统的解构赋值
const { a:{b} } = obj // 连续的解构赋值
const { a:{b:value} } = obj // 连续解构赋值 + 重命名

3- 消息订阅与发布机制

I. 先订阅,再发布 (一种隔空对话的感觉)

II. 适用于任意组件的通信

III. 要在组件componentWillUnmount生命钩子中取消订阅

4- 扩展fetch发送请求(关注分离的设计思想)

async func () {try {const res = await fetch('url')const data = await res.json()console.log(data)} catch(error) {console.log(error)}
}

相关文章:

第二十九章 使用消息订阅发布实现组件通信

PubSubJS库介绍 如果你想在React中使用第三方库来实现Pub/Sub机制&#xff0c;PubSubJS是一个不错的选择。它是一个轻量级的库&#xff0c;可以在浏览器和Node.js环境中使用。 PubSubJS提供了一个简单的API&#xff0c;可以让你在应用程序中订阅和发布消息。你可以使用npm来安…...

Transformer的位置编码

1. 什么是位置编码&#xff0c;为什么要使用位置编码 简单来说位置编码就是给一个句子中的每个token一个位置信息&#xff0c;通过位置编码可以明确token的前后顺序关系。 对任何语言来说&#xff0c;句子中词汇的顺序和位置都是非常重要的。它们定义了语法&#xff0c;从而定…...

Python学习简记

做题时遇到的不知道的知识点会更新在此&#xff1a; python中的int()函数可以用于进制转换 该函数最为常见的使用是用于强制类型转换&#xff0c;实际上&#xff0c;它可以有两个参数 值得强调的是当传入两个参数时第一个参数一定要是字符串类型 字符串方法&#xff1a; lower(…...

windows搭建一个FTP服务器超详细

一.场景&#xff1a; 在开发过程中需要FTP文件上传下载功能&#xff0c;需要在本地或者服务器上搭建一个FTP服务器。 二.详细步骤&#xff1a; 1. 安装FTP服务器支持和配置IIS web服务器 打卡“启动关闭Window功能” 控制面板>程序>启动或关闭Windows功能 或者选择快…...

u01使用率100%报错归档满的问题

今天下午客户报数据库无法连接了&#xff0c;我也立刻登录查看 因为显示orcl1归档满了&#xff0c;我就登录查看磁盘组的空间&#xff0c;发现空间空余很多 就sqlpus登录了&#xff0c;发现u01使用率满了 [oracledb1 ~]$ sqlplus / as sysdba SQL*Plus: Release 11.2.0.4.0 …...

Packet Tracer - 配置扩展 ACL - 场景 2

Packet Tracer - 配置扩展 ACL - 场景 2 拓扑图 地址分配表 设备 接口 IP 地址 子网掩码 默认网关 RTA G0/0 10.101.117.49 255.255.255.248 不适用 G0/1 10.101.117.33 255.255.255.240 不适用 G0/2 10.101.117.1 255.255.255.224 不适用 PCA NIC 10.101…...

最近面了12个人,发现这个测试基础题都答不上来...

一般面试我都会问一两道很基础的题目&#xff0c;来考察候选人的“地基”是否扎实&#xff0c;有些是操作系统层面的&#xff0c;有些是 python语言方面的&#xff0c;还有些… 深耕IT行业多年&#xff0c;我们发现&#xff0c;对于一个程序员而言&#xff0c;能去到一线互联网…...

JAVA基于Springboot框架的停车场管理系统开发实践和实现【附源码】

运行环境: jdk1.8idea/eclipsemaven3mysql5.6 项目技术: Java,Springboot,mybatis,mysql,jquery,html 该系统为停车场管理人员提供了对停车场中车辆&#xff0c;车位和财务的管理。操作员可以灵活地使用相关权限开展工作。在车位管理&#xff0c;车辆的停放和驶离、缴费&a…...

[230501] 4月29日考试真题第一篇|Temporary Pools

题目来源&#xff1a;http://t.csdn.cn/goCDT 正确率&#xff1a;6/10 目录​​​​​​​ Temporary Pools 题目 Temporary Pools Paragraph 1: Temporary pools are freshwater habitats that retain water for only three to four months of the year or even shorter pe…...

Qt中QString, int等数据转换以及Qt与Halcon联编程序打包

一、Qt中QString, int等数据转换 在QT中,数值类型转为字符串类型,一般是可以使用 QString::number(); 示例: int num = 65; QString ab = QString::number(num); 其实还可以转为不同的进制字符串,比如 int num = 65; QString ab = QString::number(num,10); //十进…...

Android FlexboxLayout布局

FlexboxLayout 布局 一、简介二、使用三、功能详解FlexboxLayout属性flexWrapflexDirectionalignItemsjustifyContentalignContentdividerDrawableHorizontal、showDividerHorizontaldividerDrawableVertical、showDividerVerticaldividerDrawable、showDividermaxLine Flexbox…...

GNU编码标准(七)发布过程 相关内容摘录

仅对第7章The Release Process的内容进行摘录。 文章目录 7 发布过程7.1 configure应该如何工作7.2Makefile公约7.2.1 Makefile的一般公约7.2.2 Makefiles中的实用程序7.2.3 指定命令的变量7.2.4 DESTDIR&#xff1a;支持分阶段安装7.2.5 安装目录的变量7.2.6 用户标准目标7.2…...

DX算法还原

早在之前作者就写过一篇关于顶象的滑块验证&#xff0c;潦潦草草几句话就带过了。 出于互相学习的想法&#xff0c;给了一个大学生&#xff0c;奈何不讲武德把源码甩群里了&#xff0c;虽然在大佬们眼里不难&#xff0c; 不过拿着别人的东西乱传还是不太好。自认倒霉&#xf…...

多媒体API

私人博客 许小墨のBlog —— 菜鸡博客直通车 系列文章完整版&#xff0c;配图更多&#xff0c;CSDN博文图片需要手动上传&#xff0c;因此文章配图较少&#xff0c;看不懂的可以去菜鸡博客参考一下配图&#xff01; 系列文章目录 前端系列文章——传送门 后端系列文章——传送…...

免费矢量图标网站有哪些?

图标作为UI设计的必要元素&#xff0c;矢量图标是质量的保证。据说完美的用户体验应该从灵活性开始 。在响应设计盛行的当下&#xff0c;灵活矢量图标的重要性不言而喻。在这种情况下&#xff0c;风格齐全、质量上乘的矢量图标网站堪称设计宝藏。在这篇文章中&#xff0c;我们…...

基于Redis的分布式限流详解

前言 Redis除了能用作缓存外&#xff0c;还有很多其他用途&#xff0c;比如分布式锁&#xff0c;分布式限流&#xff0c;分布式唯一主键等&#xff0c;本文将和大家分享下基于Redis分布式限流的各种实现方案。 一、为什么需要限流 用最简单的话来说&#xff1a;外部请求是不可…...

权限提升:漏洞探针.(Linux系统)

权限提升&#xff1a;漏洞探针. 权限提升简称提权&#xff0c;由于操作系统都是多用户操作系统&#xff0c;用户之间都有权限控制&#xff0c;比如通过 Web 漏洞拿到的是 Web 进程的权限&#xff0c;往往 Web 服务都是以一个权限很低的账号启动的&#xff0c;因此通过 Webshel…...

python-11-多线程模块threading

python使用多线程实例讲解 1 进程和线程 1.1 进程和线程的概念 进程(process)和线程(thread)是操作系统的基本概念。 进程是资源分配的最小单位&#xff0c;线程是CPU调度的最小单位。 线程是程序中一个单一的顺序控制流程&#xff0c;进程内一个相对独立的、可调度的执行单…...

动态gif图片如何在线做?轻松实现图片在线生成gif

常见的jpg、png格式的静态图片想要变成gif格式的动态图片时&#xff0c;要怎么办呢&#xff1f;有没有什么简单实用的gif制作工具呢&#xff1f; 一、什么工具能够在线制作gif&#xff1f; GIF中文网作为一款专业的gif制作&#xff08;https://www.gif.cn/&#xff09;工具&a…...

浅谈联网汽车安全漏洞

​“智能网联汽车存在内生共性问题&#xff0c;即软硬件的漏洞后门&#xff0c;基于此进行的网络攻击可以直接带来勒索、盗窃、大规模车辆恶意操控风险&#xff0c;还有数据泄露等网络安全事件。如果内生的漏洞后门问题不解决&#xff0c;系统自身难保&#xff0c;很难谈系统安…...

PyLink 实战技巧:从基础连接到高级调试

1. PyLink入门&#xff1a;从零搭建调试环境 第一次接触PyLink时&#xff0c;我也被各种专业术语弄得晕头转向。后来才发现&#xff0c;只要掌握几个关键步骤&#xff0c;就能快速搭建起嵌入式调试环境。PyLink本质上是个Python库&#xff0c;它像翻译官一样&#xff0c;把我们…...

Zrlog面试问答及问题解决方案

面试问答 结合 ZrLog 部署&#xff08;Maven 构建 环境配置 服务部署&#xff09;的全流程&#xff0c;整理排查 / 运维 / 开发三类高频问题&#xff0c;覆盖场景、原因、解答思路&#xff0c;可直接用于沟通或故障定位&#xff1a; 一、环境准备阶段高频问题 1. 执行 jav…...

ViGEmBus虚拟控制器驱动完全指南:从技术原理到场景落地的突破方案

ViGEmBus虚拟控制器驱动完全指南&#xff1a;从技术原理到场景落地的突破方案 【免费下载链接】ViGEmBus Windows kernel-mode driver emulating well-known USB game controllers. 项目地址: https://gitcode.com/gh_mirrors/vi/ViGEmBus 价值定位&#xff1a;重新定义…...

Go语言HTTP服务开发:从标准库到框架

Go语言HTTP服务开发&#xff1a;从标准库到框架 作为一个写了十几年代码的Go后端老兵&#xff0c;我在HTTP服务开发上踩过不少坑。今天就来分享一下Go语言HTTP服务开发的实践经验&#xff0c;从标准库到框架。 一、标准库net/http 1. 基本用法 package mainimport ("fmt&q…...

HunyuanVideo-Foley实战指南:FFmpeg后处理添加混响/均衡/压缩提升商用质量

HunyuanVideo-Foley实战指南&#xff1a;FFmpeg后处理添加混响/均衡/压缩提升商用质量 1. 引言&#xff1a;为什么需要音效后处理 在视频制作领域&#xff0c;专业级音效是提升作品质量的关键因素。HunyuanVideo-Foley生成的原始音效虽然已经具备良好的基础&#xff0c;但通过…...

Cesium 视角控制全攻略:禁用鼠标交互的多种方法

1. 为什么需要禁用Cesium鼠标交互&#xff1f; 在开发基于Cesium的三维地理信息系统时&#xff0c;我们经常会遇到需要限制用户视角操作的场景。比如在展示固定路线的飞行演示时&#xff0c;如果允许用户随意旋转地图&#xff0c;可能会打乱预设的动画效果&#xff1b;在嵌入式…...

终极M3U8下载神器:3步轻松掌握全网视频流保存技巧

终极M3U8下载神器&#xff1a;3步轻松掌握全网视频流保存技巧 M3U8 Downloader是一款强大的m3u8视频在线提取工具&#xff0c;专为流媒体下载设计&#xff0c;提供桌面客户端支持Windows和Mac系统。无论是在线课程、直播回放还是精彩影视内容&#xff0c;只需简单几步&#xf…...

SDMatte开源大模型部署教程:supervisor托管+自动恢复,企业级稳定性保障

SDMatte开源大模型部署教程&#xff1a;supervisor托管自动恢复&#xff0c;企业级稳定性保障 1. SDMatte模型介绍 SDMatte是一款专注于高质量图像抠图的AI模型&#xff0c;特别擅长处理复杂边缘和半透明物体的提取任务。无论是电商商品图、设计素材还是专业摄影作品&#xf…...

央国企稳岗扩岗新举措解读

近日&#xff0c;国家层面再次强调了就业优先战略的重要性&#xff0c;并推动相关政策措施进一步升级。在这一宏观背景下&#xff0c;中央企业和国有企业作为国民经济的重要支柱&#xff0c;其在稳就业、扩岗位方面的举措备受关注。一系列新的行动方案正陆续出台&#xff0c;旨…...

ClearerVoice-Studio语音处理效率实测:1分钟音频平均处理耗时18秒

ClearerVoice-Studio语音处理效率实测&#xff1a;1分钟音频平均处理耗时18秒 1. 测试背景与工具介绍 ClearerVoice-Studio是一个开箱即用的语音处理工具包&#xff0c;集成了多种先进的AI语音处理功能。这个工具最大的特点就是简单易用&#xff0c;不需要用户具备深度学习背…...