前言

在使用前端各大框架时，多多少少会使用过或听说过发布订阅模式，本篇文章将使用原生JS实现一个简单的发布订阅模式，并演示其在React中进行跨组件通信的作用

一、发布订阅模式是什么？

简单来说发布-订阅模式其实是一种对象间一对多的依赖关系，当一个对象的状态发送改变时，所有依赖于它的对象都将得到状态改变的通知。

订阅者把自己想订阅的事件处理函数注册到统一的调度中心中，当发布者向调度中心发布数据时，由调度中心统一调用订阅者注册到调度中心的事件处理函数。

在这里插入图片描述

二、使用步骤

1.创建调度中心

代码如下：

const bus = {list: [],//订阅subscribe(cb) {this.list.push(cb);},//发布publish(arg) {this.list.forEach((cb) => {cb && cb(arg);});},
};

代码解释：

bus对象即是我们创建的调度中心，里面含有两个函数，一个是订阅函数（subscribe），一个是发布函数（publish），并含有一个存放订阅者事件处理函数的数组（list）。

发布订阅模式过程：

订阅者调用subscribe函数，并将自己对数据处理的事件函数传入其中
调度中心将订阅者订阅的事件处理函数统一存放到list数组中
发布者调用publish函数，并可将发布的数据传入其中
调度中心遍历list数组，依次执行订阅者订阅的事件处理函数，并将发布者发布的数据传入其中

2.实际操作

代码如下：

 //订阅者bus.subscribe((arg) => {//订阅者收到数据变化后进行的一些操作console.log("1111", arg);});bus.subscribe((arg) => {console.log("2222", arg);});//发布者bus.publish("我是发布者发布的参数");

控制台打印结果：

该处使用的url网络请求的数据。

注意顺序，订阅者要先订阅，发布者再发布才会有效果
联想一下公众号，一个公众号就是一个发布者，关注它的人都是订阅者，只有在我们关注了它之后，它发布的信息我们才能收到通知

3. React中的应用

利用发布订阅模式进行React中跨组件通信：

import React, { Component } from "react";/*** 利用发布订阅模式进行组件通信* 由B组件向A组件传递数据*/// 调度中心
const bus = {list: [],//订阅subscribe(cb) {this.list.push(cb);},//发布publish(arg) {this.list.forEach((cb) => {cb && cb(arg);});},
};// 订阅者
class A extends Component {constructor() {super();this.state = {info: "",};//在组件初始化时开始订阅bus.subscribe((info) => {//订阅的事件处理//根据发布者发布的信息修改状态this.setState({info: info,});});}render() {return (<div><h1> 列表参数：{this.state.info}</h1></div>);}
}// 发布者
class B extends Component {render() {return (<div>{/* 发布数据 */}<button onClick={() => bus.publish(this.props.item)}>{this.props.item}</button></div>);}
}export default function App() {return (<div><A></A>{[1, 2, 3, 4].map((item) => (<B key={item} item={item}></B>))}</div>);
}