消息订阅-发布机制(方便组件之间的数据传递)

Posted 2022-02-14 So istes immer

目录

1.安装PubSubJS库

npm i pubsub-js

详细用法

可以用PubSubJS库实现消息订阅-发布机制
消息订阅-发布机制，简单说，就是：publisher发布不同主题的消息，subscriber可以接收已订阅主题的消息。不同subscriber订阅相同主题的话接收的信息相同。
利用该机制可以方便组件之间传递数据

2.改造github用户搜索框案例

原案例地址

/public/index.html、/src/index.js和/src/components/List/index.css不变
除了已经安装的库，记得安装 PubSubJS
显然在这里，我们在List组件中订阅消息，在Search组件中发布消息

/src/App.js

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>
    )
  

/src/components/Search/index.jsx

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

export default class Search extends Component 
  search = ()=>
    const keyWordElement:value:keyWord = this  //获取用户的输入内容
    //发送请求前通知List更新状态
    PubSub.publish('updateState',isFirst:false,isLoading:true)
    //发送网络请求
    axios.get(`http://api.github.com/search/users?q=$keyWord`).then(
      response => 
        //请求成功后通知List更新状态
        PubSub.publish('updateState',isLoading:false,users:response.data.items)
      ,
      error => 
        //请求失败后通知List更新状态
        PubSub.publish('updateState',isLoading:false,err:error.message)
      
    )
  
  render() 
    return (
      <section className="jumbotron">
        <h3 className="jumbotron-heading">Search Github Users</h3>
        <div>
          <input ref=c => this.keyWordElement = c type="text" placeholder="enter the name you search"/>&nbsp;
          <button onClick=this.search>Search</button>
        </div>
      </section>
    )
  

/src/components/List/index.jsx

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

export default class List extends Component 
  state = 
    users:[],        //存放用户数据
    isFirst:true,    //是否为第一次打开页面
    isLoading:false, //标识是否处于加载中
    err:''           //存储请求相关的错误信息
  
  componentDidMount()
    this.token = PubSub.subscribe('updateState',(msg,stateObj)=>
      this.setState(stateObj)
    )
  
  componentWillUnmount()
    PubSub.unsubscribe(this.token)
  
  render() 
    const users,isFirst,isLoading,err = this.state
    return (
      <div className="row">
        
          isFirst ? <h2>Welcome!</h2> : 
          isLoading ? <h2>Loading...</h2> :
          err ? <h2 style=color:'red'>err</h2> :
          users.map((userObj)=>
            return (
              <div key=userObj.id className="card">
                <a rel="noreferrer" href=userObj.html_url target="_blank">
                  <img alt="profile_picture" src=userObj.avatar_url style=width: '100px'/>
                </a>
                <p className="card-text">userObj.login</p>
              </div>
            )
          )
        
      </div>
    )