NetInfo connectionChange监听器无法解绑，如何在componentWillUnmount移除？

这个问题我之前也碰到过，核心原因是你用了匿名函数作为监听器回调——每次创建的匿名函数都是独立的引用，调用removeEventListener时如果不传和添加时完全相同的函数引用，就没法成功解绑。下面是具体的解决步骤和修改后的代码：

解决思路 #

• 将监听器的回调逻辑抽成组件的类方法，保证函数引用固定不变；
• 在componentDidMount中用这个类方法作为回调添加监听器；
• 在componentWillUnmount中传入同一个类方法引用，完成精准解绑。

修改后的完整代码 #

class SplashScreen extends React.Component {
  // 把回调逻辑抽成类方法，确保引用唯一
  handleFirstConnectivityChange = ({ networkType }) => {
    // 这里写你的网络状态处理逻辑
    console.log('当前网络类型:', networkType);
  };

  componentDidMount() {
    // 使用固定引用的类方法添加监听器
    NetInfo.addEventListener('connectionChange', this.handleFirstConnectivityChange);
  }

  componentWillUnmount() {
    // 传入同一个类方法引用完成解绑
    NetInfo.removeEventListener('connectionChange', this.handleFirstConnectivityChange);
    // 可选：给notificationListener加上可选链，避免空值报错
    this.notificationListener?.remove();
  }

  // 其他组件代码...
}

额外提醒 #

• 如果你之后切换到函数组件，可以用useEffect的清理函数来做类似操作，逻辑是一致的——添加监听器和移除监听器必须使用同一个函数引用；
• 类组件里一定要避免用匿名函数作为监听器回调，不然大概率会出现这种解绑失效的内存泄漏问题。

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