React中消息订阅与发布(PubSubJS)——两个组件之间通信

结合案例：github搜索案例

• 结果如下图
  

1.父容器代码

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

2.搜索Search子模块代码(发布消息)

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('atguigu',{
    
    isFirst:false,isLoading:true})
		//发送网络请求
		axios.get(`/api1/search/users?q=${
      
      keyWord}`).then(
			response => {
    
    
				//请求成功后通知List更新状态
				PubSub.publish('atguigu',{
    
    isLoading:false,users:response.data.items})
			},
			error => {
    
    
				//请求失败后通知App更新状态
				PubSub.publish('atguigu',{
    
    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>
		)
	}
}

3.展示Lisi子模块代码(订阅消息)

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('atguigu',(_,stateObj)=>{
    
    
			this.setState(stateObj)
		})
	}

	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((userObj)=>{
    
    
						return (
							<div key={
    
    userObj.id} className="card">
								<a rel="noreferrer" href={
    
    userObj.html_url} target="_blank">
									<img alt="head_portrait" src={
    
    userObj.avatar_url} style={
    
    {
    
    width:'100px'}}/>
								</a>
								<p className="card-text">{
    
    userObj.login}</p>
							</div>
						)
					})
				}
			</div>
		)
	}
}

发布订阅分析

• 在Search子模块中发布消息，用PubSub.publish中进行发布消息，在List子模块中订阅消息，拿到数据进行展示
• 使用步骤
  • 工具库: PubSubJS
  • 下载: npm install pubsub-js --save
  • 使用

    1)import PubSub from 'pubsub-js' //引入
    2)PubSub.subscribe('delete', function(data){ }); //订阅
    3)PubSub.publish('delete', data) //发布消息