React Native 仅在JS栈内收发事件且不经过RN桥的最优方案

NativeEventEmitter 是否会经过 RN 桥的解答 #

你提到的 NativeEventEmitter 继承自 RN 内部纯JS实现的 EventEmitter 基类，仅当你将实例绑定原生模块、调用JS-原生通信相关API时才会走RN桥。如果仅在JS侧调用addListener、emit、removeListener这些基础事件方法，完全不会触及原生栈，也不会有数据通过桥传输。

不过NativeEventEmitter本身是为JS-原生通信场景设计的，纯JS场景下有更轻量、更纯粹的实现方案： #

最优纯JS栈事件收发方案 #

方案1：复用RN内置的纯JS EventEmitter #

RN 内部自带了完全纯JS实现的事件发射器，没有任何原生相关逻辑，直接使用即可：

// 1. 全局注册单例事件总线
import EventEmitter from 'react-native/Libraries/vendor/emitter/EventEmitter';
export const jsEventBus = new EventEmitter();

// 2. 订阅事件
const eventSubscription = jsEventBus.addListener('user_logout', (data) => {
  // 处理事件逻辑
  console.log('收到退出登录通知', data);
});

// 3. 发送事件
jsEventBus.emit('user_logout', { timestamp: Date.now() });

// 4. 销毁订阅（组件卸载/不需要时必须调用，避免内存泄漏）
eventSubscription.remove();

方案2：自研无依赖极简事件总线 #

如果你不想依赖RN内部未公开导出的模块，可以自己实现一个纯JS事件总线，完全不会和RN桥、原生栈产生任何关联：

class PureJSEventBus {
  constructor() {
    this.eventMap = new Map();
  }

  // 订阅事件，返回取消订阅的方法
  on(eventName, callback) {
    if (!this.eventMap.has(eventName)) {
      this.eventMap.set(eventName, []);
    }
    this.eventMap.get(eventName).push(callback);
    return () => this.off(eventName, callback);
  }

  // 发送事件
  emit(eventName, ...payload) {
    if (!this.eventMap.has(eventName)) return;
    this.eventMap.get(eventName).forEach(cb => cb(...payload));
  }

  // 取消订阅
  off(eventName, callback) {
    if (!this.eventMap.has(eventName)) return;
    const filteredCallbacks = this.eventMap.get(eventName).filter(cb => cb !== callback);
    this.eventMap.set(eventName, filteredCallbacks);
  }
}

// 导出全局单例使用
export const pureJsEventBus = new PureJSEventBus();

额外注意点 #

• 所有事件订阅必须在不需要时手动移除，避免内存泄漏
• 事件总线仅适合低耦合的通知类场景（比如退出登录、全局弹窗触发等），如果是需要跨组件同步的状态，优先用React Context、状态管理库等方案，会更易维护。

内容的提问来源于stack exchange，提问作者Manish Waran