react-组件通信

一、子传给父

父组件

子组件

二、父传给子

父组件

子组件

三、兄弟之间的通信，也适用于任何组件通信（消息订阅-发布机制（PubSubJs））

1. 工具库: PubSubJS

下载:

• npm install pubsub-js --save

使用:

• import PubSub from ‘pubsub-js’ //引入
• PubSub.subscribe(‘delete’, function(data){ }); //订阅
• PubSub.publish(‘delete’, data) //发布消息

2.可以实现任意组件的通信

比如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)
  }

3.总结

• 设计状态时要考虑全面，例如带有网络请求的组件，要考虑请求失败怎么办。

• 消息订阅与发布机制
  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);

         }