React Native模态UI场景：Promise与NativeEventEmitter的客观选型指南

React Native文档中提到了两种原生向JS层传递数据的方式：

• Promise

const onSubmit = async () => {
  try {
    const eventId = await CalendarModule.createCalendarEvent();
    // 处理返回结果
  } catch (error) {
    // 处理错误
  }
};

• NativeEventEmitter

import { NativeEventEmitter, NativeModules } from 'react-native';

const eventEmitter = new NativeEventEmitter(NativeModules.MyBridgeEventEmitter);
const eventListener = eventEmitter.addListener('my event', (result) => {
  // 处理原生传递的数据
});

// 组件卸载时移除监听器
useEffect(() => {
  return () => {
    eventListener.remove();
  };
}, []);

文档并未明确二者的适用场景，除主观偏好外，是否存在客观依据决定选型？

具体业务场景 #

• React Native调用原生模块启动一个模态UI，该UI并非快速关闭的对话框，用户可能需要进行长时间操作（如选择照片、编辑笔记）；
• 用户关闭原生UI后，需向React Native传递总大小不超过10KB的字符串数组。

选型分析 #

初步倾向：NativeEventEmitter

理由如下：

1. 启动UI到接收结果的间隔时间较长，使用NativeEventEmitter无需长时间挂起JS函数，避免因函数长期挂起可能引发的潜在问题（如JS线程阻塞风险、内存泄漏隐患）；
2. NativeEventEmitter的监听器生命周期完全由React Native侧掌控，可在组件卸载时及时移除；而Promise需由原生桥接持有引用直至UI操作完成，JS侧无法主动中断或取消该等待过程。

Promise的显著优势

1. 语义更贴合单次请求-响应场景：该场景是典型的"调用原生操作→等待操作完成→获取结果"的单次交互，Promise的async/await语法更符合这种同步化的逻辑表达，代码可读性更高，错误处理也更集中（通过try/catch统一处理）；
2. 无需手动管理监听器生命周期：使用Promise不需要额外编写监听移除逻辑，避免因忘记移除监听器导致的内存泄漏；
3. 数据传递更直接：Promise的返回值直接对应操作结果，无需通过事件名匹配，减少了事件名拼写错误等人为失误的可能；
4. 原生侧实现更简洁：原生侧只需在操作完成后resolve或reject Promise即可，无需维护事件发射器的实例和事件分发逻辑。

结论 #

在该场景下，两种方案均能满足需求，但存在明确的客观选型依据：

• 若更关注JS侧对异步流程的可控性（如需要在组件卸载时中断等待），优先选择NativeEventEmitter；
• 若更看重代码的可读性、简洁性以及语义贴合度，优先选择Promise。

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