react eventemitter

React中的EventEmitter是一个事件触发器，用于在组件之间传递和处理事件。它是通过React的事件系统来实现的。下面是一个使用EventEmitter的示例：

1. 首先，你需要导入React和EventEmitter：

import React from "react";
import { EventEmitter } from "events";

2. 创建EventEmitter的实例：

const DemoEvent = new EventEmitter();

3. 在需要触发事件的组件中，使用EventEmitter的emit方法触发事件：

DemoEvent.emit("eventName", eventData);

其中，"eventName"是事件的名称，eventData是传递给事件处理函数的数据。

4. 在需要监听事件的组件中，使用EventEmitter的on方法来注册事件处理函数：

DemoEvent.on("eventName", eventHandler);

其中，"eventName"是要监听的事件的名称，eventHandler是事件处理函数。

5. 当事件被触发时，注册的事件处理函数将被调用，并且可以访问传递给事件的数据。

下面是一个完整的示例：

// 导入React和EventEmitter
import React from "react";
import { EventEmitter } from "events";

// 创建EventEmitter实例
const DemoEvent = new EventEmitter();

// 触发事件的组件
const TriggerComponent = () => {
  const handleClick = () => {
    DemoEvent.emit("customEvent", "Hello, World!");
  };

  return <button onClick={handleClick}>触发事件</button>;
};

// 监听事件的组件
const ListenerComponent = () => {
  const handleEvent = (data) => {
    console.log(data); // 输出：Hello, World!
  };

  React.useEffect(() => {
    DemoEvent.on("customEvent", handleEvent);

    return () => {
      DemoEvent.off("customEvent", handleEvent);
    };
  }, []);

  return <div>监听事件的组件</div>;
};

// 在父组件中使用TriggerComponent和ListenerComponent
const App = () => {
  return (
    <div>
      <TriggerComponent />
      <ListenerComponent />
    </div>
  );
};

export default App;

这个示例中，当点击"触发事件"按钮时，会触发名为"customEvent"的事件，并传递字符串"Hello, World!"作为数据。监听事件的组件会接收到这个数据并将其打印到控制台上。