React 非父子组件通信 中央事件管理器

一、前言

• React 非父子组件通信可以用中央事件管理器 ,实际上就是发布订阅模式.

二、定义中央事件管理器

• Bus.js文件

let map = {}

const bus = {
  /**
   * 订阅事件,监听事件
   * @param {String} eventName 事件的名字
   * @param {Function} callback 回调函数
   */
  subscribe: (eventName, callback) => {
    //如果map对象[eventName]key 没有值的话,就赋值一个空数组
    if (!map[eventName]) {
      map[eventName] = []
    }
    //如果map对象[eventName]key 有值的话,就把回调函数推进数组
    map[eventName].push(callback)
  },
  /**
   * 触发事件,发布消息
   * @param {String} eventName 事件的名字
   * @param {*} payload 触发事件传递的参数
   */
  dispatch: (eventName, payload) => {
    //如果map对象[eventName]key 没有值的话,就结束
    if (!map[eventName]) {
      return
    }
    //如果map对象[eventName]key 有值的话,就遍历,执行数组中的每个回调函数,payload是回调函数
    map[eventName].forEach((cb) => cb(payload))
  }
}

export default bus

三、非父子组件----订阅者

• Brother2.js

import React from 'react'
import bus from './Bus.js'//引入定义的中央事务管理器模块
export default class Brother2 extends React.Component {
  state = {
    isShow: true
  }
  //在react挂载完成后订阅
  componentDidMount() {
    bus.subscribe('abc', (payload) => {
      this.setState({
        isShow: payload
      })
    })
  }

  render() {
    let { isShow } = this.state
    return (
      <div>
        {isShow ? (
          <div
            style={{ width: '200px', height: '200px', background: 'green' }}
          />
        ) : null}
      </div>
    )
  }
}

四、非父子组件----发布者

• Brother1.js

import React, { Component } from 'react'
import bus from './Bus.js'
export default class Brother1 extends Component {
  state = {
    is: true
  }
  render() {
    return <button onClick={this.isHandle}>显示/隐藏</button>
  }
  isHandle = () => {
    this.setState(
      {
        is: !this.state.is
      },
      console.log(this.state.is)
    )
    bus.dispatch('abc', this.state.is)
  }
}