Expo开发React Native应用遇网络请求失败及OOM崩溃问题

从你的报错栈和问题描述来看，核心问题是未终止的网络请求堆积导致内存占用持续上升，加上Flipper/Expo Network Inspect的请求克隆逻辑加剧内存消耗，最终触发OutOfMemoryError；而之前的TypeError: Network request failed可能是请求堆积后网络资源耗尽或超时导致的。结合你提到的过度渲染和状态清理思路，以下是具体可落地的解决步骤：

1. 强制清理组件卸载后的网络请求 #

组件卸载后未取消的请求会继续占用内存，甚至重复触发状态更新，这是内存泄漏的常见原因。使用AbortController（Expo完全支持）在组件卸载时终止请求：

import { useEffect, useState } from 'react';
import { Text, View } from 'react-native';

const DataFetchingComponent = () => {
  const [apiData, setApiData] = useState(null);

  useEffect(() => {
    const abortController = new AbortController();
    const signal = abortController.signal;

    const fetchApiData = async () => {
      try {
        const response = await fetch('https://your-api-endpoint.com/data', { signal });
        if (!response.ok) throw new Error('Request failed');
        const data = await response.json();
        setApiData(data);
      } catch (err) {
        // 忽略主动取消的请求错误
        if (err.name !== 'AbortError') {
          console.error('API Error:', err);
        }
      }
    };

    fetchApiData();

    // 组件卸载时取消请求
    return () => abortController.abort();
  }, []);

  return (
    <View>
      {apiData ? <Text>{JSON.stringify(apiData)}</Text> : <Text>Loading...</Text>}
    </View>
  );
};

export default DataFetchingComponent;

2. 用useCallback+useMemo避免过度渲染触发重复请求 #

过度渲染会导致请求被多次调用，加剧内存压力。通过useCallback缓存请求函数，useMemo缓存计算结果，配合React.memo包裹纯组件，减少不必要的重渲染：

import { useEffect, useState, useCallback, memo } from 'react';

// 用React.memo包裹纯组件，避免父组件重渲染时重复渲染
const DataDisplay = memo(({ data }) => {
  return <Text>{JSON.stringify(data)}</Text>;
});

const DataFetchingComponent = () => {
  const [apiData, setApiData] = useState(null);

  // 用useCallback缓存请求函数，依赖为空时仅创建一次
  const fetchApiData = useCallback(async (signal) => {
    try {
      const response = await fetch('https://your-api-endpoint.com/data', { signal });
      const data = await response.json();
      setApiData(data);
    } catch (err) {
      if (err.name !== 'AbortError') console.error(err);
    }
  }, []);

  useEffect(() => {
    const controller = new AbortController();
    fetchApiData(controller.signal);
    return () => controller.abort();
  }, [fetchApiData]); // 依赖缓存后的请求函数，避免重复触发

  return (
    <View>
      {apiData ? <DataDisplay data={apiData} /> : <Text>Loading...</Text>}
    </View>
  );
};

3. 排查Flipper/Expo Network Inspect的内存开销 #

从报错栈可以看到FlipperOkhttpInterceptor和ExpoNetworkInspectOkHttpAppInterceptor参与了请求处理，开发环境下的这些调试工具会克隆请求体，大量请求时会快速消耗内存。可以临时禁用它们验证是否解决问题：

• 禁用Flipper：在app.json中添加配置：

  {
    "expo": {
      "android": {
        "flipper": false
      },
      "ios": {
        "flipper": false
      }
    }
  }
  

• 关闭Expo Network Inspect：在Expo DevTools的"Network"面板中，点击右上角的关闭按钮，停止网络请求监控。

4. 内存泄漏排查工具 #

用Expo自带的工具定位内存泄漏点：

• 打开Expo DevTools，切换到"Memory"面板，记录内存快照，对比组件卸载前后的内存变化，找出未被回收的对象。
• 使用React Native Debugger的"Profiler"面板，查看组件渲染次数，定位过度渲染的组件。

5. 额外优化点 #

• 对频繁触发的请求（比如搜索框输入）添加防抖/节流，避免短时间内发起大量请求。
• 检查状态更新逻辑，避免不必要的状态变更（比如不要在渲染函数中更新状态）。
• 如果请求返回大体积数据，考虑分页加载或流式处理，避免一次性加载过多数据到内存。

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