跨组件事件通讯
- 通过
context我们已经能够实现跨组件通讯 - 但是通过
context我们只能实现从上往下传递 - 不能实现
从下往上传递或者同级之间的传递的问题
经过博主前面的介绍我们知道, 子父组件之间通讯, 是通过回调函数的方式实现的，兄弟组件之间通讯, 也是通过父组件, 通过回调函数的方式，但是如果通过回调函数, 传统的方式我们需要一层一层的传递, 比较复杂，所以我们可以借助一个第三方库 (events) 来实现跨组件事件通讯。
使用 events 库实现跨组件通讯
安装 events 库
npm install events
- 创建
EventEmitter对象：eventBus 对象 - 监听事件：
eventBus.addListener("事件名称", 监听函数); - 移除事件：
eventBus.removeListener("事件名称", 监听函数); - 发出事件：
eventBus.emit("事件名称", 参数列表);
- 在全局创建一个全局的事件管理器对象
import {EventEmitter} from 'events'; const eventBus = new EventEmitter();
兄弟组件通讯
假如说我们现在要实现一个兄弟之间的组件通讯，那么该如何利用 events 进行实现呢，代码如下：
import React from 'react'; import {EventEmitter} from 'events'; const eventBus = new EventEmitter(); class B extends React.Component { render() { return ( <div> <p>B</p> <button onClick={() => { this.btnClick() }}>B按钮 </button> </div> ) } btnClick() { eventBus.emit('say', 'yangbuyiya', 18); } } class A extends React.Component { componentDidMount() { eventBus.addListener('say', this.aFn.bind(this)); } render() { return ( <div> A </div> ) } aFn(name, age) { console.log(name, age); } } class App extends React.Component { render() { return ( <div> <A/> <B/> </div> ) } } export default App;
如上当中有一个新的知识点，在 A 组件当中，我利用了一下 React 当中的生命周期方法，在 A 组件被渲染也就是创建的时候，这个方法不用我们手动调用, React 会自动帮我们调用，当前组件被渲染到界面上的时候, React 就会自动调用。
父子通讯
如上介绍的是兄弟之间的通讯，接下来来看一波父子之间的通讯：
import React from 'react'; import {EventEmitter} from 'events'; const eventBus = new EventEmitter(); class Son extends React.Component { render() { return ( <div> <p>son</p> <button onClick={() => this.btnClick()}>Son按钮</button> </div> ) } btnClick() { eventBus.emit('say', 'yangbuyiya', 18); } } class Father extends React.Component { render() { return ( <div> <Son/> </div> ) } } class App extends React.Component { componentDidMount() { eventBus.addListener('say', this.appFn.bind(this)); } componentWillUnmount() { eventBus.removeListener('say', this.appFn.bind(this)); } render() { return ( <div> <Father/> </div> ) } appFn(name, age) { console.log(name, age); } } export default App;
如果通过 events 来实现跨组件的通讯，那么为了性能考虑, 应该在组件卸载的时候移除掉对应的事件, 可以通过 componentWillUnmount 来实现，该方法也是 React 组件的一个生命周期方法, 这个生命周期方法我们不用手动调用, React 会自动调用, 当前组件被卸载的时候, React 就会自动调用。
最后
本期结束咱们下次再见👋~
🌊 关注我不迷路，如果本篇文章对你有所帮助，或者你有什么疑问，欢迎在评论区留言，我一般看到都会回复的。大家点赞支持一下哟~ 💗
