Node.js api : events的简单使用:

284 阅读1分钟

events是事件触发器,它用来发布事件,也用来订阅事件,举例来说在不同的React组件中,可以在当前组件通过发布事件并传递值,在另外组件中可订阅该事件获取到值,这样就实现了数据的传递

如何去做:

先在项目中暴露一个全局的触发器实例对象,events无需另外下载:

// emitter.js
import { EventEmitter } from 'events';
export default new EventEmitter();

在组件A中导入并在一个按钮上绑定鼠标点击事件,点击时发布一个newFriend事件,传递一个对象出去:

import emitter from './emitter';

handleClick = () => {    eventEmitter.emit('newFriend', {name: 'lq', age: 21})    console.log('eventEmitter send done');}

组件B中订阅newFriend事件:

componentDidMount () {    eventEmitter.on('newFriend', res => {        console.log('组件B获取到newFriend: ', res);    })}

组件C中订阅newFriend事件:

componentDidMount () {    eventEmitter.on('newFriend', res => {        console.log('组件C获取到newFriend: ', res);    })}

当组件A中点击后newFriend事件被发布出去,其他组件导入的该emitter(事件触发器实例对象)就会订阅到,执行监听函数,最终结果:


注意:

不同的组件可以订阅同一个事件,所以有先后执行顺序,这里是看组件B和组件C在父组件中被调用的顺序,当捕捉到订阅的newFriend事件后会执行对应的方法,当所有监听方法被执行完则那些方法退栈,执行了console.log('eventEmitter send done');

更多:

在某个导入了事件触发器的组件被卸载时将所有的订阅事件清空即可:

componentWillMount () {    eventEmitter.removeAllListeners();}

其实用到的并不多,我要不是用到才不学:)