消息订阅-发布机制（PubSubJs）

用法：

1. 工具库: PubSubJS
2. 下载: npm install pubsub-js --save
3. 使用:
   1. import PubSub from 'pubsub-js' //引入
   2. PubSub.subscribe('delete', function(data){ }); //订阅
   3. PubSub.publish('delete', data) //发布消息

例子

可以实现任意组件的通信

比如A组件想给B组件发送消息，B组件用PubSub.subscribe订阅一个名为UpdateList的事件，并且当这个事件被发布的时候会调用PubSub.subscribe的第二个参数的函数：

• 第一个参数是订阅的事件
• 第二个参数是别人发布了订阅以后执行的函数，接收的meg是时间名字UpdateList,data是别人发布订阅传递过来的数据

componentDidMount() {
  this.token = PubSub.subscribe('UpdateList', (meg, data) => {
    this.setState({ ...data });
  })
}

//第一个参数是订阅的事件

//第二个参数是别人发布了订阅以后执行的函数
//接收的meg是时间名字UpdateList,data是别人发布订阅传递过来的数据

这个时候假设A想传新数据给B，A组件利用PubSub.publish发布UpdateList这个事件，并且把需要穿过去的数据放在第二个参数中：

PubSub.publish('UpdateList', { users: response.data.items, Loading: false });

当B组件要卸载的时候，记得取消订阅

  componentWillUnmount() {
    PubSub.unsubscribe(this.token)
  }

图解：

•     设计状态时要考虑全面，例如带有网络请求的组件，要考虑请求失败怎么办。 
•     ES6小知识点：解构赋值+重命名

          let obj = {a:{b:1}}

          const {a} = obj; //传统解构赋值

          const {a:{b}} = obj; //连续解构赋值

          const {a:{b:value}} = obj; //连续解构赋值+重命名

•     消息订阅与发布机制

          1.先订阅，再发布（理解：有一种隔空对话的感觉）

          2.适用于任意组件间通信

          3.要在组件的componentWillUnmount中取消订阅

•     fetch发送请求（关注分离的设计思想）

          try {

            const response= await fetch(`/api1/search/users2?q=${keyWord}`)

            const data = await response.json()

            console.log(data);

          } catch (error) {

            console.log('请求出错',error);

          }

参考链接：

尚硅谷2021版React技术全家桶全套完整版（零基础入门到精通/男神天禹老师亲授）_哔哩哔哩_bilibili