首页 > 其他分享 >React学习笔记22-订阅发布模式

React学习笔记22-订阅发布模式

时间:2023-11-08 10:34:07浏览次数:47  
标签:订阅 函数 22 list 笔记 React 发布 发布者 回调

1.订阅发布模式的定义

订阅发布模式简单来说就是订阅者进行订阅,发布者进行发布,发布者发布时会通过调度中心通知到每一个订阅者。订阅者根据发布的内容选择是否进行对应的操作。

2.实现一个最简单的订阅发布

订阅发布模式的核心就是调度中心。一个最简单的调度中心里面应该具有三个要素

订阅方法,发布方法,回调方法数组。

订阅方法用来给订阅者进行订阅。在订阅时订阅者至少应该传递一个回调函数,用来在收到消息时进行对应的操作。在订阅方法收到回调函数式会将其存储到回调方法数组中。

发布方法用来给发布者进行发布。在发布时发布者可以传递一个参数作为消息,用来传递给订阅者。发布方法在被调用时,会遍历回调函数数组,若函数存在就执行函数并将发布者传递的信息传入。

回调方法数组用来存储订阅者的订阅时传入的回调函数

import React, { Component } from 'react'

export default class App extends Component {
    render() {
        return (
            <div>App</div>
        )
    }
}

var bus = {
    list: [],
    //订阅
    subscribe(callback) {
        this.list.push(callback)
        console.log(this.list)
    },
    //发布
    publish(text) {
        //遍历所有list,将回调函数执行
        this.list.forEach((item, index) => {
            item && item(text)
        })
    }
}
//订阅者注册
bus.subscribe((value) => {
    console.log(111, value);
})
bus.subscribe((value) => {
    console.log(222, value);
})

//发布
bus.publish('男人看了沉默')

/* 
   Redux 基于发布订阅
*/

 Redux 就是基于发布订阅模式实现的

 

标签:订阅,函数,22,list,笔记,React,发布,发布者,回调
From: https://www.cnblogs.com/SadicZhou/p/17816809.html

相关文章

  • React学习笔记21-非父子通信(状态提升)
    1.状态提升(中间人模式)的定义React中的状态提升概括来说,就是将多个组件需要共享的状态提升到它们最近的父组件上.在父组件上改变这个状态然后通过props分发给子组件。2.状态提升的使用简单讲解一下下面的代码,下面模拟了一个电影列表和详情页面。进行通信的是列表的item和详......
  • React学习笔记20-父子通信(子传父)
    在React中子组件给父组件传参通过回调函数来进行。父组件给子组件传递一个回调函数作为属性。子组件在需要传递参数的地方调用父组件传递的回调函数即可。importReact,{Component}from'react'classNavbarextendsComponent{render(){return(......
  • 笔记本不接电源屏幕色彩失真
    win+Q,直接搜:“英特尔显卡控制中心” 把功率下的电源设置关闭即可。  翻译搜索复制......
  • React前后端如何同构,防止重复渲染
    什么叫前后端同构?为了解决某些问题(比如SEO、提升渲染速度等)react提供了2个方法在服务端生成一个HTML文本格式的字符串。在得到了这个HTML格式的字符串之后,通常会将其组装成一个页面直接返回给用户的浏览器。到这里,服务端的活已经干完了,然后就是浏览器这边干活。浏览器拿到HTML......
  • 【专题】2022年中国制造业数字化转型研究报告PDF合集分享(附原数据表)
    报告链接:http://tecdat.cn/?p=32145本文中所说的制造业数字化转型,指的是在制造企业的设计、生产、管理、销售及服务的每一个环节中,将新一代信息技术应用到制造企业的设计、生产、管理、销售及服务的每一个环节中,并可以以每一个环节中产生的数据为基础,展开控制、监测、检测、预测......
  • C++基础随笔记录
    函数-值传递函数调用时,实参传递给形参。值传递时,形参改变,不会改变实参函数-4种形式无参无返有参无返无参有返有参有返函数-声明作用:告诉编译器函数名称以及如何调用函数。函数的主体可以单独定义。函数可以多次被声明,但是函数的定义只有一......
  • 笔记本安装打印程序
    1.输入网址:https://www.hp.com/2.点击支持-->软件与驱动程序3.点击打印机4.输入型号5.选择相应的6.7.8.9.直接点击下一步10.选好型号之后点击下一步11.之后把打印机开机连接到电脑就ok了......
  • 实验三_OOP_张文瑞_202213260018
    任务1源代码:11#pragmaonce2233#include<iostream>44usingstd::cout;55usingstd::endl;6677classPoint{88public:99Point(intx0=0,inty0=0);1010~Point()=default;11111212intget_x()......
  • 《信息安全系统设计与实现》第十周学习笔记
    第六章信号和信号处理信号和中断“中断”是从I/O设备或协处理器发送到CPU的外部请求,它将CPU从正常执行转移到中断处理。与发送给CPU的中断请求一样,“信号”是发送给进程的请求,将进程从正常执行转移到中断处理。进程:一个“进程”就是一系列活动广义的“进程”包括:从事日常......
  • Vitis IDE2022 打开之前已经开过的项目文件
    【File】-【Import...】-【Eclipseworkspaceorzipfile】-【next】-【Browse】-【Finish】......