react中兄弟组件之间的通信——消息订阅与发布

一、前言

前面我们学到兄弟组件之间传递消息，都是依靠父组件做中间件完成的
但是这样太麻烦了，那么有没有能够让兄弟组件能够直接通信的方法呢？
这就是我们今天学习的一个工具库 PubSubJS

二、PubSubJS

2.1.介绍（官方说法）：
PubSubJS是一种JavaScript库，用于实现发布-订阅设计模式。它允许不同部分之间的松 散耦合，提高代码的可重用性和可维护性。通过在应用程序中使用事件，PubSubJS可以帮助开发人员处理复杂的异步代码流，并简化跨组件通信。PubSubJS支持多个订阅者和多个发布者，使其成为一个非常灵活和可扩展的库。
简而言之：就是能让两个没有联系的组件实现通信

2.2、PubSubJS下载

 npm install pubsub-js --save

2.3、PubSubJS的使用
PubSub.subscribe() 接收两个参数，一个是消息头，一个是回调函数
回调函数接收两个参数：第一个不重要用 _ 占位，第二个是传递回来的数据

PubSub.subscribe('消息头',("发布消息的消息体","传递回来的数据"))

发布消息与订阅消息的消息头要一致

2.3.1、在List组件中订阅消息

  //初始化状态
    state = {
        users: [], //请求回来的数据
        isFirst: true, //是否第一次打开页面
        isLoading: false, //数据是否加载完成
        err: '', //存储请求相关的错误信息
    }

    componentDidMount(){
        //订阅消息
    this.token = PubSub.subscribe('gystt',(_,data)=>{
            this.setState(data)
        })
    }

    componentWillUnmount(){
        //取消订阅
        PubSub.unsubscribe(this.token)
    }

2.3.2、在Search组件中发布消息

  //发送请求前通知List更新状态
       PubSub.publish('gystt',{isFirst:false,isLoading:true})

个人博客：余生的学习笔记