如何将事件进行全局响应？

通过引入events 包进行全局事件响应

全局事件响应的好处

可处理深层次组件传值，以及兄弟组件传值等

兄弟组件传参

bus文件:

import { EventEmitter } from 'events';
const eventBus = new EventEmitter();
export default eventBus;

需创建个文件夹形式，存放实例化的事件总线，再进行导出，精简代码，减少冗余

App组件：


import React, { PureComponent } from 'react'
import Header from './components/Header'
import './App.css'
import  Menu from './components/Menu'
export default class App extends PureComponent {
  constructor(props){
    super(props);
    this.state={
       wyVal:0,
      wyList:[
        {
          id:1,
          name:'发现音乐人',
        },
        {
          id:2,
          name:'我的音乐'
        },
        {
          id:3,
          name:'关注'
        },
        {
          id:4,
          name:'商城'
        },
        {
          id:5,
          name:'音乐人'
        },
        {
          id:6,
          name:'下载客户端'
        }
      ],

    } 
  }
  render() {
    return (
      <div>
        <Header 
         wyHeaderVal= { val=>this.wyHeaderVal(val) }
                val={ this.state.wyVal }
                list={ this.state.wyList }
        
        />
        <Menu / >
      </div>
    )
  }
}

在当前App组件中，引入当前Header 组件和Menu组件使其成为兄弟

header组件：

import React, { PureComponent } from 'react';
import propTypes from 'prop-types';
import './Header.css';
import eventBus from '../../bus'
export default class Header extends PureComponent {
    static propTypes={
        list:propTypes.array.isRequired,
        val:propTypes.number,
        subNav:propTypes.element,
        wyHeaderVal:propTypes.func.isRequired
    }
    static defaultProps={
        val:0
    }
    constructor(props){
        super(props)
        this.state={
            navVal:0,
            navList:['推荐','排行榜','歌单','主播电台','歌手','新歌上架']
        }
    };
    render() {
        const { navList,navVal }=this.state;
        const homeDom=(
            <ul className="navMenu">
                {
                     navList.map((item,index)=>{
                        return (
                            <li key={ index }>
                                <span 
                                onClick={ ()=>this.handleNav(item,index) }
                                 className={ navVal===index&&'active' } >
                                     { item }
                                     </span>
                            </li>
                        )
                    })
                }
            </ul>
        )
        console.log('这是头部')
        const { val,list,wyHeaderVal,subNav } = this.props;
        return (
            <header>
                <div className="top-container">
                        <h1>网易云音乐</h1>
                        <ul>
                            {
                                list.map((item,index)=>{
                                    return (
                                        <li className={ val===index && 'active' }  
                                        onClick={ ()=>wyHeaderVal(index) }
                                        key={item.id}>
                                            {item.name}
                                        </li>
                                    )
                                })
                            }
                        </ul>
                </div>
                <div className="subNav">{  val?subNav:homeDom }</div>
            </header>
        )
    }
    handleNav(item,index){
        console.log('当前正在传输') 
        this.setState({
            navVal:index
        })
        eventBus.emit('handleNav',item)
          
    }
   
}

引入eventBus ，通过内置的emit函数传递方法及变量。
eventBus.emit('handleNav',item)
emit函数，第一个参数为当前传递事件名称，除了第一个参数外，后面可进行多个参数传递

Menu组件：

import React, { PureComponent } from 'react'
import './index.css';
import eventBus from '../../bus'
export default class Menu extends PureComponent {
    constructor(props){
        super(props);
        this.state={
            info:'这是默认信息'
        }
    }
    componentDidMount(){
        eventBus.addListener('handleNav',this.getHeadInfo.bind(this))
        //运行该bus事件
    }
    componentWillUnmount(){
        eventBus.removeListener('handleNav',this.getHeadInfo.bind(this))
        //清除该bus事件
    }
    render() {
        const { info } = this.state;
        return (
            <div className="menu-container">
                    { info }
            </div>
        )
    }
    getHeadInfo(row){
        this.setState({
            info:row
        })
        console.log('接收到head事件车传输过来的值',row)
    }
   
}

eventBus.addListener('handleNav',this.getHeadInfo.bind(this))通过addListener监听当前函数事件获取事件内部参数，回调getHeadInfo方法，通过绑定外部this，实现改变内部状态