react的通信方式eventEmitter

新建eventBus.js

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

发布组件

import Bus from '../../EventBus';
<Button type='primary' onClick={ () => { Bus.emit('changeSiblingsData', count) }}>提交</Button>

订阅组件

import Bus from '../../EventBus';
Bus.addListener('changeSiblingsData', (count)=> {
    alert(count); 
});

--------------------------------这是一条神奇的分割线--------------------------------

自定义事件，类比vue里的pubsub.开发订阅者模式
使用说明：
import { EventEmitter } from ‘events’;
eventEmitter = new EventEmitter();
发布：eventEmitter.emit(‘事件名’,回调函数)
订阅：eventEmitter.on(‘事件名’,回调函数) 或者 eventEmitter.addListener(‘事件名’,回调函数)
取消订阅：eventEmitter.off(‘事件名’,函数) 或者 eventEmitter.removeListener(‘事件名’,回调函数)
全部取消：eventEmitter.removeAllListener(‘事件名’)

      注：
      失效的几种情况：
      1、不能通过箭头函数来订阅和取消订阅。因为每个箭头函数指向的地址不一样，因此无法取消。
      2、在函数式组件里，直接写函数名eventEmitter.off('事件名',函数名)，也是没用的。因为函数组件重新加载会导致回调函数的更新。指向的不再是同一个。因此无法取消了。
    
      解决办法：
      1、函数式组件里，用removeAllListener('事件名')。全部取消。
      2、用类式组件   这样回调函数就不会更新，地址一直是同一个
      
      补充：on 和 addListener作用相同。off 和 removeListener作用相同

函数式组件

export default function Test2() {
    const [event_params, setevent_params] = useState(500);
//指定的回调函数
    function getFriut(mes) {
        setevent_params(mes);
    }
    useEffect(() => {
    //订阅
        eventEmmiter.addListener('friut', getFriut);
    }, []);

    return (
        <div style={{ border: '2px solid red', height: '400px' }} id={'Test2'}>
            我是2号子组件,接收消息
            {event_params}
            <br />
            <button
                onClick={() => {
                //取消订阅  ----无效方法
                // 我们声明的 getFriut 是直接定义了一个方法，这也就导致只要是父组件重新渲染（状态或者props更新）就会导致这里声明出一个新的方法，新的方法和旧的方法尽管长的一样，但是依旧是两个不同的对象,同理，箭头函数也是如此
                    eventEmmiter.removeListener('friut', getFriut);
              //全部取消 ----解决方案1
                    // eventEmmiter.removeAllListeners('friut');
                }}
            >
                点击取消订阅
            </button>
        </div>
    );
}

类组件

export default class Test2 extends Component {
    state = {
        event_params: 'lalal',
    };
    //指定的回调函数
    getFriut = (mes) => {
        this.setState({ event_params: mes });
    };
    componentDidMount() {
    //订阅
        eventEmmiter.addListener('friut', this.getFriut);
    }
    render() {
        return (
            <div style={{ border: '2px solid red', height: '400px' }} id={'Test2'}>
                我是2号子组件,接收消息
                {this.state.event_params}
                <br />
                <button
                    onClick={() => {
                    //取消订阅  -----解决方案2
                        eventEmmiter.removeListener('friut', this.getFriut);
                        
                    }}
                >
                    点击取消订阅
                </button>

            </div>
        );
    }
}