1.跨组件事件通讯
通过context我们已经能够实现跨组件通讯,但是通过context我们只能实现从上往下传递,不能实现从下往上传递或者同级之间传递
经过我们前面的学习我们知道, 子父组件之间通讯, 是通过回调函数的方式,兄弟组件之间通讯, 也是通过父组件, 通过回调函数的方式
但是如果通过回调函数, 传统的方式我们需要一层一层的传递, 比较复杂,所以我们可以借助一个第三方库(events)来实现跨组件事件通讯
步骤
安装events库
npm install events
如何使用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 (
<div>
<p>son</p>
<button onClick={()=>{this.btnClick()}}>按钮</button>
</div>
)
}
btnClick(){
eventBus.emit('say', 'sjl', 20);
}
}
class Father extends React.Component{
render(){
return (
<div>
<Son/>
</div>
)
}
}
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 (
<div>
<Father/>
</div>
)
}
}
export default App;
注意点: 如果通过events来实现跨组件的通讯,那么为了性能考虑, 应该在组件卸载的时候移除掉对应的事件,代码如下:
componentWillUnmount() {
eventBus.removeListener('say', this.appFn.bind(this));
}