React学习12（消息订阅与发布--任意组件通信）

准备工作

1.工作库：PubSubJS

2.下载：npm i pubsub-js --save

3.使用

        1）import PubSub from 'pubsub-js' //引入

        2）PubSub subScribe('事件名称, （_, data) =>{}） //订阅

        3）PubSub publish('事件名', data) // 发布消息

注意：在PubSub subScribe的函数中使用_主要是起到占位的作用

代码示例

App.jsx

import React, { Component } from 'react'
import Search  from './components/Search'
import List from './components/List'

export default class App extends Component {
 
  render() {
    return (
      <div className="container">
        <Search/>
        <List/>
      </div>
    )
  }
}

发布信息的组件

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

export default class Search extends Component {

  search = () => {
    //获取用户的输入（连续结构赋值的写法）
    const {keyWordElement: {value:keyWord}} = this

   //发送请求前通知App更新状态
     PubSub.publish('xiaojian',{isFirst:false, isLoading:true})
    //发送请求
    axios.get(`http://localhost:3000/api1/search/users?q=${keyWord}`).then(
      response => {
        //请求成功后通知App更新状态
        PubSub.publish('xiaojian',{isLoading:false, users:response.data.item})
      },
      error => {
        //请求失败后通知App更新状态 
        PubSub.publish('xiaojian',{isLoading:false, err:error.message})
      }
    )
  }
  render() {
    return (
      <section className="jumbotron">
        <h3 className="jumbotron-heading">搜索gitHub用户</h3>
        <div>
          <input ref= {(c) => {this.keyWordElement = c}} type="text" placeholder="输入关键词点击搜索"/>&nbsp;
          <button onClick= {this.search}>搜索</button>
        </div>
    </section>
    )
  }
}

接收信息的组件

import React, { Component } from 'react'
import PubSub from 'pubsub-js'
import './index.css'

export default class List extends Component {
   //初始化状态
   state = {
    users:[], //users初始值为空数组
    isFirst:true, // 是否第一次打开页面
    isLoading:false, //标识是否处于加载中
    err:'' // 存储请求相关的错误信息
  } 

  componentDidMount() {
    this.token = PubSub.subscribe('xiaojian', (_,data) => { // _,表示占位
      // console.log(data)
      this.setState(data)
    })
  }

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

  render() {
    const {users, isFirst, isLoading, err} = this.state
    return (
      <div className="row">
       {
         isFirst ? <h2>欢迎使用，输入关键字，随后点击搜索</h2> :
         isLoading ?<h2>Loading....</h2> :
         err ? <h2 style= {{color:'red'}}>{err}</h2> :
         users.map((usersObj) => {
          return (
            <div className="card" key= {usersObj.id}>
            <a  rel="noreferrer" href={usersObj.html_url} target="_blank">
              <img alt = 'head_protrait' src={usersObj.avatar_url} style={{width:'100px'}}/>
            </a>
            <p className="card-text">{usersObj.login}</p>
          </div>
          )
         })
       }
      </div>
    )
  }
}