React学习笔记---消息订阅与发布机制

一、没有用消息订阅与发布机制的案例

如果没有使用消息订阅与发布机制，兄弟组件想互相通信智能通过他们的父组件来进行管理，看一个github搜索案例

项目结构

index.js

//引入react核心库
import React from 'react'
//引入ReactDOM
import ReactDOM from 'react-dom'
//引入App
import App from './App'

ReactDOM.render(<App/>,document.getElementById('root'))

App.jsx

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

export default class App extends Component {
   

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

	//更新App的state
	updateAppState = (stateObj)=>{
   
		this.setState(stateObj)
	}

	render() {
   
		return (
			<div className="container">
				<Search updateAppState={
   this.updateAppState}/>
				<List {
   ...this.state}/>
			</div>
		)
	}
}

setupProxy.js

const proxy = require('http-proxy-middleware')

module.exports = function(app){
   
	app.use(
		proxy('/api1',{
    //遇见/api1前缀的请求，就会触发该代理配置
			target:'http://localhost:5000', //请求转发给谁
			changeOrigin:true,//控制服务器收到的请求头中Host的值
			pathRewrite:{
   '^/api1':''} //重写请求路径(必须)
		})
	)
}

Search下的index.jsx

import React, {
    Component } from 'react'
import axios from 'axios'

export default class Search extends Component {
   

	search = ()=>{
   
		//获取用户的输入(连续解构赋值+重命名)
		const {
   keyWordElement:{
   value:keyWord}} = this
		//发送请求前通知App更新状态
		this.props.updateAppState({
   isFirst:false,isLoading:true})
		//发送网络请求
		axios.get(`/api1/search/users?q=${
     keyWord}`).then(
			response => {
   
				//请求成功后通知App更新状态
				this.props.updateAppState({
   isLoading:false,users:response.data.items})
			},
			error => {
   
				//请求失败后通知App更新状态
				this.props.