React17中利用 第三方events 实现跨组件通讯
import React from "react";
import EventEmitter from "events";
// 论如何使用 实现第三方组件通讯的events
// 1.安装evens npm install events --save
// 2.导入events import {EventEmitter} from 'events' ;
// 3.在全局建立事件对象 const eventBus = new EventEmitter();
// 4.eventBus.add('say',fn);添加或者叫注册事件事件名称，回调函数
// 5.eventBus.emitter('say',数据,数据,数据,数据 -----)触发事件，传递数据
const eventBus = new EventEmitter();
class A extends React.Component{
constructor(){
super();
this.state={
eat:'凉皮凉面'
}
}
componentDidMount(){
eventBus.addListener('say',this.fuA.bind(this));
}
// 注意点： 如果通过events 来实现跨组件传递数据，那么为了性能考虑 应当在组件被卸载时移除掉对应的事件
componentWillUnmount(){
eventBus.rawListeners('say',this.fuA.bind(this));
}
render(){
return (
<section>
这是A模块{this.state.eat}
</section>
);
}
fuA(eat){
this.setState({
eat
})
}
}
class News extends React.Component{
render(){
return (
<section>
这是新闻模块
<button onClick={()=>{
this.tnuv();
}}>点击利用events通信</button>
<A></A>
</section>
);
}
tnuv(){
eventBus.emit('say','牛肉丸子')
}
}
export default News;
页:
[1]