React Native网络监听组件useEffect内存泄漏及清理方案咨询

你遇到的警告是因为组件卸载后，之前发起的NetInfo.fetch()异步请求或NetInfo状态监听器仍在执行，试图更新已卸载组件的状态，进而导致内存泄漏。以下是具体的修复方法：

修复步骤 #

1. 取消网络状态监听器订阅：NetInfo.addEventListener会返回一个取消订阅的函数，需在组件卸载时调用它移除监听器。
2. 添加组件挂载状态守卫：用状态变量标记组件是否处于挂载状态，确保只有组件挂载时才执行状态更新操作。

修复后的完整代码 #

import { useState, useEffect } from 'react';
import { View, Text } from 'react-native';
import NetInfo from '@react-native-community/netinfo';

export default function InternetCheck() {
  const [isConnected, setIsConnected] = useState(false);
  const [mounted, setMounted] = useState(true);

  useEffect(() => {
    // 订阅网络状态变化，保存取消订阅函数
    const unsubscribeNetInfo = NetInfo.addEventListener(state => {
      // 组件挂载时才更新状态
      if (mounted) {
        setIsConnected(state.isInternetReachable);
      }
    });

    // 获取初始网络状态
    NetInfo.fetch().then(state => {
      if (mounted) {
        setIsConnected(state.isInternetReachable);
      }
    });

    // 组件卸载时执行清理逻辑
    return () => {
      // 标记组件已卸载，阻止后续状态更新
      setMounted(false);
      // 移除网络状态监听器，避免内存泄漏
      unsubscribeNetInfo();
    };
  }, []);

  // 渲染离线提示
  return (
    !isConnected && (
      <View style={{ backgroundColor: '#ff4444', paddingVertical: 12, alignItems: 'center' }}>
        <Text style={{ color: '#fff', fontSize: 14 }}>网络已断开，请检查连接</Text>
      </View>
    )
  );
}

代码说明 #

• 清理函数：useEffect返回的函数会在组件卸载时自动执行，这里完成两个关键操作：
  • 调用unsubscribeNetInfo()：终止NetInfo的状态监听，避免后续网络变化触发无效回调。
  • 设置mounted为false：让异步请求的回调知道组件已卸载，不再执行setIsConnected。
• 挂载状态守卫：在NetInfo.fetch()的回调和监听器回调中，先判断mounted是否为true，只有组件挂载时才更新状态，彻底避免“更新已卸载组件状态”的警告。
• 空依赖数组：确保useEffect只在组件挂载时执行一次订阅逻辑，不会重复触发。

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