react 事件总线解决的问题:跨组件之间的事件传递
如何实现
借助第三方库 events
来实现 传送门
常见的 api
- 创建EventEmitter对象:eventBus对象
- 发出事件:eventBus.emit(“事件名称”, 参数列表)
- 监听事件:eventBus.addListener(“事件名称”, 监听函数)
- 移除事件:eventBus.removeListener(“事件名称”, 监听函数)
使用前需要先安装,下面两种方式任选一个
npm install events
yarn add events
注意,通常在 componentDidMount 生命周期函数中监听事件,在 componentWillUnmount 生命周期函数中移除事件
举例
Home 组件通过事件总线展示 Main 组件传过来的数据
import React, {
PureComponent} from 'react';
// 导入 EventEmitter 对象
import {
EventEmitter } from 'events';
// 创建 EventEmitter 对象
const eventBus = new EventEmitter();
class Home extends PureComponent {
constructor(props) {
super