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

合集 - React学习记录(23)

1.React学习笔记01-React的基本认识2023-10-162.React学习笔记02-创建React项目2023-10-163.React学习笔记03-编写第一个react应用程序2023-10-164.React学习笔记04-JSX语法2023-10-175.React学习笔记05-类组件2023-10-196.React学习笔记06-函数式组件2023-10-197.React学习笔记07-组件嵌套2023-10-198.React学习笔记08- 组件的样式2023-10-199.React学习笔记09- 事件处理2023-10-2010.React学习笔记10- Ref的应用2023-10-2011.React学习笔记11-状态(state)2023-10-2012.React学习笔记12-循环渲染2023-10-2013.React学习笔记13-小案例toList(状态,状态维护,条件渲染渲染)2023-10-2114.React学习笔记14-dangerousSetinnerHtml指令2023-10-2115.React学习笔记15-setState同步异步问题2023-10-3116.React学习笔记16-属性props2023-11-0317.React学习笔记17-属性VS状态2023-11-0318.React学习笔记18-非受控组件2023-11-0419.React学习笔记19-受控组件2023-11-0420.React学习笔记20-父子通信(子传父)2023-11-0821.React学习笔记21-非父子通信(状态提升)2023-11-08

22.React学习笔记22-订阅发布模式2023-11-08

23.React学习笔记23-非父子通信(订阅发布模式)2023-11-08

收起

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 就是基于发布订阅模式实现的