React的消息订阅全过程

1.安装pubsub-js

yarn add pubsub-js --save 或者
npm i pubsub-js --save

2.在发布消息的模块导入pubsub并进行消息的发布

import React, { Component } from 'react'
import PubSub from 'pubsub-js'
import axios from 'axios'

export default class Search extends Component {
  search = () => {
    const { value:keyWords} = this.Element
    //发起axios请求
    axios.get(`/api1/search/users2?q=${keyWords}`).then(
      // 通知list更新状态 response.data.items
        //1.在这里进行消息的发布，注意发布时PubSub.publish
        //2.这里发布订阅消息的名字，必须和另外一边接受消息的名字保持一致
      response => { PubSub.publish('message', response.data.items) },
      error => { console.log('error', error.data); }
    ) 
  }
}

3.在接受消息的模块对发布的消息进行接收

import React, { Component } from 'react'
import PubSub from 'pubsub-js'
export default class List extends Component {
  state = {
    users: [],
  }
  // 订阅消息 在componentDidMount周期里面对订阅消息进行接收
  componentDidMount() {
    // 发布消息就执行函数 这里的msg是必须带的，虽然他没啥用
      //这里的data就是前面的数据   response.data.items
    PubSub.subscribe('message',(msg,data)=> {
      this.setState({users:data})
    })
  }
}