前言:
最近在react项目中,遇到了这样一个场景,首页有很多组件,地图组件,侧边栏,图层管理,甚至图层管理还有子组件。这样父/子/孙,甚至没有任何关系的组件都要能拿到首页的一些状态。一开始想要用redux但是为了这么小的地方搭建繁琐的redux显然不明智。(redux当然也可以实现)。其实我这里更推荐react+dva(这个是react轻量级框架把redux内置里面了不用自己搭建redux)。当然还有更简单的方法那就是node.js的eventEmitter。
一、eventEmitter的作用和介绍
event模块是node.js中的一个模块。events 模块只提供了一个对象: events.EventEmitter。EventEmitter 的核心就是事件触发与事件监听器功能的封装。(node event模块详细说明及介绍)这里我就不过多的介绍了。因为是node中的模块不光react可以使用vue中也可以使用且步骤相同
二、react中使用步骤(当然vue中也可以使用)
1.下载event模块:运行cnpm install events --save.
2.创建一个文件event.js.
import {EventEmitter} from 'events';//引入events模块
export default new EventEmitter();//导出
3.在需要监听或者传参的地方声明一个监听事件。
1.)引入刚才创建的event.js(以自己项目的为准)
import emitter from '../../utils/event';//引入event文件。当然这个路径根据你自己项目中创建的为准
2).监听事件
this.eventEmitter=emitter.addListener("change",(msg)=>{//msg为传的参数
console.log(msg)
})
emitter.addListener("change",(msg)=>{})。第一个参数是监听事件的名字(用来区分不同的事件)。第二个参数是一个函数可以处理一些情函数的参数就是要穿的值。
3).定义触发函数.先引入event.js.
emitter.emit("change","首页")
emitter.emit("change","首页")。第一个参数为事件名,第二个为传的值。emiter是提交,就是想要改变的时候调用比如我需要改变其它组件的状态,当点击的时候emitter一个事件把传的值放进去(比如点击按钮让,没有关系的组件打印传的值)。
三、示例
1. 监听事件
import emitter from '../../../src/utils/event';//引入events文件
class MapTools extends React.Component {
componentDidMount(){
this.eventEmitter=emitter.addListener("change",(msg)=>{
console.log(msg)//这里结果为首页
})
}
return(<div>
我是组件
</div>)
}
2.触发事件
import emitter from '../../../src/utils/event';//引入events文件
class Map extends React.Component {
change(){
emitter.emit("change","首页")
}
}
return(<div>
<button onClick={this.change}>点击传参</button>
</div>)
}
这个emitter这个不光可以传参,其实也可以用来监听一个值的变换做一些相对应的改变(我的理解类似于vue中的watch监听一个值是否发生变化做一些处理)。比如:我要我有个需求一离开首页,其他组件要做一些回应就可以在首页组件卸载生命周期emitter一个事件,在要改变的页面监听一下即可。