react环境下利用发布-订阅模式实现兄弟组件之间传值

首先，要写一个事件代理类作为发布者和订阅者的中介：

const eventProxy = {
  onObj: {},
  oneObj: {},
  on: function(key, fn) {
    if(this.onObj[key] === undefined) {
      this.onObj[key] = [];
    }
    const args = [].concat(Array.prototype.slice.call(arguments, 1));
    for(let i = 0; i < args.length ; i++) {
      this.onObj[key].push(args[i]);
    } 
  },
  one: function(key, fn) {
    if(this.oneObj[key] === undefined) {
      this.oneObj[key] = [];
    }

    this.oneObj[key].push(fn);
  },
  off: function(key) {
    this.onObj[key] = [];
    this.oneObj[key] = [];
  },
  trigger: function() {
    let key, args;
    if(arguments.length == 0) {
      return false;
    }
    key = arguments[0];
    args = [].concat(Array.prototype.slice.call(arguments, 1));
    if(this.onObj[key] !== undefined
      && this.onObj[key].length > 0) {
      for(let i in this.onObj[key]) {
        this.onObj[key][i].call(null, args[i]);
      } 
    }
    if(this.oneObj[key] !== undefined
      && this.oneObj[key].length > 0) {
      for(let i in this.oneObj[key]) {
        this.oneObj[key][i].apply(null, args);
        this.oneObj[key][i] = undefined;
      }
      this.oneObj[key] = [];
    }
  }
};

export default eventProxy;

上述代码段中，on 和 one 都是订阅者监听事件，不同的是 on 可以监听一个事件的多个方法，且可触发多次；one 只能监听一个事件的一个方法且只触发一次；trigger 是发布者发布事件，触发使用 one 与 on 进行订阅的函数；off 解除所有订阅了某个事件的所有函数。

其次，在其中一个兄弟组件Child1中监听事件

import React, {Component} from 'react'
import eventProxy from './eventProxy'

class Child1 extends Component {
  constructor(props) {
    super(props)
    this.state = {
      msg: 'start',
      title: 'aaa'
    }
  }
  componentDidMount() {
    eventProxy.on('msg', msg => {
      this.setState({msg})
    }, title => {
      this.setState({title})
    })
  }
  componentDidUpdate() {
    console.log('Child_1 update');
  }
  render() {
    console.log(this.state.title)
    return(<div>
      Child1 component: {this.state.msg} {this.state.title}
    </div>)
  }
}
export default Child1

再在另一个组件Child2中发布事件

import React, {Component} from 'react'
import eventProxy from './eventProxy'

class Child2 extends Component {

  componentDidMount() {
    setTimeout(() => {
      eventProxy.trigger('msg', 'end', 'bbb')
    }, 1000)
  }
  componentDidUpdate() {
    console.log('Child_2 update');
  }
  render() {
    return(<div>
      Child2
    </div>)
  }
}
export default Child2

最后，在他们的父组件中调用这两个子组件

至此，即可实现兄弟组件之间的传值了！