2022-03-06 学习记录--React-实现兄弟组件间的通信（还可实现所有组件间的通信）

一、前言

我以前的一篇博文里讲述了 父子之间的通信方法，那。。。假如兄弟之间想要相互传递数据，那该怎么办呢？🤷‍

或许有机智的小萝卜儿🥕会说：“既然父子组件之间可以通信，那么我们可以借助父组件这个中间力量，就可以实现子组件之间的通信啦~🤭”

这个方法确实可以解决有共同父组件的子组件之间的通信，But，那。。。没有共同父组件滴该怎么办呢❓ 除此以外，一直依靠共同父组件的力量，岂不是有些繁琐，是不是可以有更好的解决方法呢？

那么 请继续往下看吧~✌

二、消息订阅-发布机制

1、简介

【没错👍，我们可以通过 消息订阅-发布机制 来实现兄弟组件间的通信，不仅如此👀，其实所有组件间的通信，都可以通过它来实现哟~】

• 1、工具库：PubSubJS
• 2、下载：npm install pubsub-js --save
• 3、使用：
  • 1）import PubSub from ‘pubsub-js’; // 引入PubSub
  • 2）PubSub.subscribe(‘delete’, function(msg,data) {}); // 订阅 （这儿的delete是自定义的消息名）
  • 3）PubSub.publish(‘delete’,data); // 发布消息 （这儿的delete对应订阅时自定义的消息名）

import PubSub from 'pubsub-js'; // 引入PubSub

// 订阅 （这儿的`delete`是自定义的消息名）【接收数据data，并对其进行处理】
PubSub.subscribe('delete', function(msg, data) {
	console.log('消息名',msg);
	console.log('订阅的数据',data);
}); 

// 发布消息 （这儿的`delete`对应订阅时自定义的消息名）【传递数据data】
PubSub.publish('delete', data);

简单解释下✨，就是：若你想获取数据，就可以订阅你需要滴数据，并取个唯一的消息名（表明这是你订阅滴数据）；然后 传递数据的那方 就向该消息名发布数据。

简而言之👇

1. 接收数据那方：订阅消息（并取唯一的消息名）【要在组件的componentWillUnmount中取消订阅】；
2. 发送数据那方：发布消息（对应好订阅时的消息名）

2、详情

第一步、在github里面搜索PubSubJs，见下图：

第二步、点击下图红色框框里的内容

第三步、进入页面后，向下滑，就会有对应的使用方法

3、案例📚

1）、安装pubsub-js

安装方法：npm i pubsub-js 或者yarn add pubsub-js

2）、List接收数据，所以需要订阅消息【要在组件的componentWillUnmount中取消订阅】

3）、Search发送数据，所以就需要发布消息；且点击Search里的搜索按钮后，可以在List里打印出 从Search传到List里的数据

补充：若不想使用 消息订阅-发布机制 实现所有组件间的通信 ，也可通过 JS里的原生方法 来实现哦~详情请查看我的另一篇博文。

These are bilibili尚硅谷React学习视频的 学习笔记~