如何在 Reactjs 中为 eventEmitters 使用 npm 的“事件”模块答案

【问题标题】：How to use npm's 'events' module in Reactjs for eventEmitters如何在 Reactjs 中为 eventEmitters 使用 npm 的“事件”模块
【发布时间】：2019-08-06 19:42:36
【问题描述】：

我想在我的 React 应用程序中使用 npm 的“事件”模块。我有一个用 phaserjs 开发的游戏，它也有关卡编辑器。 “事件”将用于与游戏模块进行通信。根目录的文件夹结构

客户端
- 源
  - App.js
  - index.js
  - 组件/游戏视图
  - 组件/关卡创建者视图
游戏
服务器

有人做过同样的事情，但角度不同—— 在它的 app.js 中

const eventEmitter = require('events').EventEmitter();
window.eventEmitter = eventEmitter;
eventEmitter.on('loaded', () => { console.log('\n\ncreator loaded\n\n') })

在他的 Angular 应用程序的其他状态下，他会采取 --

const eventEmitter = window.eventEmitter;
eventEmitter.emit('start game');

Here's the link to that project, 查看浏览器模块、app.js 以及 browser/states/createlevel

我想做同样的事情，我的项目类似但游戏逻辑不同。

游戏模块具有所有必要的事件发射器和侦听器设置

我尝试在我的 index.js 中设置 window.eventsEmitter() 并在其他组件中使用它。问题从这里开始，我如何在 React 类或函数中使用它，应该在构造函数中还是应该在生命周期方法中设置它，还是应该将它放在完全不同的 js 文件中并包含它？我尝试了最多（最后一个除外）但失败了。

我还搜索了如何做到这一点，但没有得到我想要的东西。任何建议都会非常有帮助。提前致谢。

【问题讨论】：

标签： reactjs npm events phaser-framework

【解决方案1】：

EventEmitter 的语法似乎不起作用。我在这里使用了 npm 页面中的示例（并且有效）- https://www.npmjs.com/package/events

将此添加到 App.js：

const eventEmitter = require('events');
window.ee = new eventEmitter();
ee.on('loaded', () => { console.log('\n\ncreator loaded\n\n') })
ee.on('test', () => { console.log('\n\ntest fired\n\n') })

然后从任何组件构造函数（或 componentdidmount 等）：

constructor( props ) {
    super( props );
    ee.emit('test', 'asdf')
}

【讨论】：

这是迄今为止实现 React JS 组件通信最简单的方法 ?

【解决方案2】：

另一种方法是创建一个文件eventEmitter.tsx（如果您使用的是打字稿）：

import { EventEmitter } from 'events'

const eventEmitter = new EventEmitter()

export default eventEmitter

然后您可以在任何其他文件中包含此内容。

import eventEmitter from './eventEmitter'

const Hello = () => {
  const someFunction = () => {}
  useEffect(() => {
    eventEmitter.on('your-event', someFunction)
    return () => {
      eventEmitter.off('your-event', someFunction)
    }
  })
}

【讨论】：