React通过events通讯

1.跨组件事件通讯

• 通过context我们已经能够实现跨组件通讯，但是通过context我们只能实现从上往下传递，不能实现从下往上传递或者同级之间传递

• 经过我们前面的学习我们知道, 子父组件之间通讯, 是通过回调函数的方式，兄弟组件之间通讯, 也是通过父组件, 通过回调函数的方式

• 但是如果通过回调函数, 传统的方式我们需要一层一层的传递, 比较复杂，所以我们可以借助一个第三方库(events)来实现跨组件事件通讯
  步骤

1. 安装events库
   npm install events

2. 如何使用events库实现跨组件通讯
   2.1 安装events库, npm install events
   2.2创建EventEmitter对象：eventBus对象；
   2.3监听事件：eventBus.addListener("事件名称", 监听函数)；
   2.4移除事件：eventBus.removeListener("事件名称", 监听函数)；
   2.5发出事件：eventBus.emit("事件名称", 参数列表);
   3.创建全局events事件管理器对象
   4.通过events.emit调用函数

import React from 'react';
import {EventEmitter} from 'events';// 1.在全局创建一个全局的事件管理器对象
const eventBus = new EventEmitter();class Son extends React.Component{render(){return (
son
{this.btnClick()}}>按钮)}btnClick(){eventBus.emit('say', 'sjl', 20);}
}
class Father extends React.Component{render(){return ()}
}
class App extends React.Component{componentDidMount() {eventBus.addListener('say', this.appFn.bind(this));}// componentWillUnmount也是React组件的一个生命周期方法// 这个生命周期方法我们不用手动调用, React会自动调用// 当前组件被卸载的时候, React就会自动调用componentWillUnmount() {eventBus.removeListener('say', this.appFn.bind(this));}appFn(name, age){console.log(name, age);}render(){return ()}
}
export default App;

注意点: 如果通过events来实现跨组件的通讯，那么为了性能考虑, 应该在组件卸载的时候移除掉对应的事件，代码如下：

 componentWillUnmount() {eventBus.removeListener('say', this.appFn.bind(this));}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！