React 事件总线EventBus,实现全局事件响应

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

通过引入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 (
      

        
this.wyHeaderVal(val) }
                val={ this.state.wyVal }
                list={ this.state.wyList }
        
        />
        
      
    )
  }
}

在当前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=(
            

                {
                     navList.map((item,index)=>{
                        return (
                            

                                this.handleNav(item,index) }
                                 className={ navVal===index&&'active' } >
                                     { item }
                                     
                            
                        )
                    })
                }
            
        )
        console.log('这是头部')
        const { val,list,wyHeaderVal,subNav } = this.props;
        return (
            

                

                        
网易云音乐
                        

                            {
                                list.map((item,index)=>{
                                    return (
                                        
wyHeaderVal(index) }
                                        key={item.id}>
                                            {item.name}
                                        
                                    )
                                })
                            }
                        
                
                
{  val?subNav:homeDom }
            
        )
    }
    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 (
            

                    { info }
            
        )
    }
    getHeadInfo(row){
        this.setState({
            info:row
        })
        console.log('接收到head事件车传输过来的值',row)
    }
   
}

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

引入eventBus ，通过内置的addListener内置方法通过传递的事件名称获取当前事件内部的参数从而实现改变内部状态

---

运行后呈现

image.png

image.png

image.png