React Native函数组件如何在useEffect中正确使用事件监听器

你遇到的「仅首次挂载时能收到事件、后续触发无响应」的核心诱因 #

• 缺失useEffect清理逻辑导致的监听器错位
  你当前写的useEffect仅执行了addListener的注册逻辑，没有返回对应的清理函数。这种写法下，组件卸载时不会自动移除绑定的监听器，不仅会造成内存泄漏，还会随着组件的重挂载、场景切换，在同一个事件名上堆积多个过期的旧监听器——这些旧监听器持有第一次渲染时的闭包上下文，会提前拦截事件触发，导致后续新绑定的业务逻辑根本拿不到事件信号。
• 闭包捕获了过期的函数引用
  即使你尝试用useCallback封装broadcastReciever，如果没有把broadcastReciever加入useEffect的依赖数组，React会始终使用第一次渲染时捕获的旧函数引用完成绑定。这个旧引用内部捕获的所有state、props都是组件初始渲染时的快照值，当后续组件状态更新后，旧引用的逻辑无法同步最新的上下文，看起来就像事件根本没有被触发。
• 小概率疏漏：事件注册和触发的名称不匹配，比如注册时监听'event'，实际触发时用了拼写不一致的事件名，不过结合你“首次能收到事件”的现象，这个问题的发生概率极低。

符合React函数式组件规范的正确实现 #

完整的事件监听逻辑需要覆盖三个核心环节，避免闭包和引用失效问题：

1. 用useCallback封装广播处理函数，明确标注函数依赖的所有state、props，生成稳定的函数引用
2. 在useEffect内部完成事件注册，将稳定的广播处理函数作为useEffect的依赖项传入
3. 在useEffect的清理函数中调用订阅实例的remove方法，组件卸载时主动移除监听，避免内存泄漏和监听器堆积

参考可直接复用的实现代码：

import {useEffect, useCallback} from 'react';
import {DeviceEventEmitter, View} from 'react-native';

const BusinessComponent = () => {
  // 根据实际业务补充依赖项，保证引用稳定
  const broadcastReciever = useCallback((intent) => {
    // 此处编写具体的事件处理逻辑，可正常读取最新的state、props
    console.log('接收到广播事件', intent);
  }, [/* 填写回调内用到的所有响应式变量 */]);

  useEffect(() => {
    // 注册事件监听
    const eventSubscription = DeviceEventEmitter.addListener('event', broadcastReciever);

    // 返回副作用清理函数，组件卸载时自动移除绑定
    return () => {
      eventSubscription.remove();
    };
  }, [broadcastReciever]);

  return <View />;
};

补充说明：你已知悉DeviceEventEmitter的弃用标识是非常合理的，后续项目迭代过程中可以逐步将其替换为官方推荐的事件通信方案，降低后续版本升级的兼容风险。

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