React Native 0.70.6：API请求时UI冻结问题求助

开发者阿泽

2026-7-24

React Native 0.70.6：网络请求阻塞UI导致交互无响应的解决方案

你的问题核心是JS线程被同步阻塞了——React Native的JS环境是单线程的，如果在useEffect里串行等待多个API请求，或者API函数本身是同步实现，会占满JS线程，导致UI交互（按钮点击、导航）无法被处理，直到所有请求完成。

以下是具体解决方法：

并行发起所有API请求，而非串行等待
把原来的串行await改成Promise.all，让所有请求同时发起，JS线程会在等待响应时释放，处理UI事件：

useEffect(() => {
  const fetchAllData = async () => {
    try {
      // 并行执行所有API请求
      await Promise.all([
        getCollaborations(),
        getCreatorXP(),
        getDeals(0),
        getTrending(),
        getProfile()
      ]);
    } catch (err) {
      // 统一处理请求错误
      console.error('数据加载失败:', err);
    }
  };
  fetchAllData();
}, []);

检查API函数的异步实现
确保所有getXXX函数都是基于Promise的异步函数，避免同步阻塞。比如用fetch或axios封装：

// 正确的异步API封装示例
const getProfile = async () => {
  const res = await fetch('https://your-api-domain/profile');
  if (!res.ok) throw new Error('请求失败');
  return res.json();
};

拆分请求优先级，延迟非核心数据加载
如果部分数据不是页面初始渲染必须的，可以延迟加载，进一步减轻初始加载的线程压力：

useEffect(() => {
  // 先加载核心数据（比如用户信息、协作列表）
  const fetchCriticalData = async () => {
    await Promise.all([getProfile(), getCollaborations()]);
  };
  // 非核心数据延迟500ms加载，给UI交互留时间
  const fetchNonCriticalData = () => {
    setTimeout(async () => {
      await Promise.all([getCreatorXP(), getDeals(0), getTrending()]);
    }, 500);
  };

  fetchCriticalData();
  fetchNonCriticalData();
}, []);