React中API批量获取数据时如何避免阻塞UI渲染？

核心问题分析 #

你当前用Promise.allSettled一次性发起所有chunk请求，后续一次性合并大量数据并更新Redux的操作会持续占用主线程；再加上组件可能等待全部数据加载完成才渲染内容，导致UI完全阻塞无显示。

具体解决方案 #

1. 串行分批处理请求，给UI留渲染时间

把原来并行发起所有chunk的逻辑改成串行处理，每次处理完一个chunk后，用setTimeout(0)或requestIdleCallback让出主线程，让浏览器先完成UI渲染再继续下一批请求。

示例代码：

async function fetchBatchedData() {
  const totalRecords = 1000; // 替换成你的实际总记录数
  const chunkSize = 10;
  const totalChunks = Math.ceil(totalRecords / chunkSize);

  dispatch(setLoading(true));
  for (let i = 0; i < totalChunks; i++) {
    const start = i * chunkSize;
    const end = start + chunkSize;
    // 发起单个chunk的请求
    const res = await fetch(`/api/records?start=${start}&end=${end}`);
    const chunkData = await res.json();
    // 分批更新Redux，而非等所有数据到齐再合并
    dispatch(addRecords(chunkData));
    // 让出主线程，让UI有机会渲染
    await new Promise(resolve => setTimeout(resolve, 0));
  }
  dispatch(setLoading(false));
}

如果想更高效利用浏览器空闲时间，用requestIdleCallback替代setTimeout：

async function fetchBatchedData() {
  const totalRecords = 1000;
  const chunkSize = 10;
  const totalChunks = Math.ceil(totalRecords / chunkSize);
  let currentChunk = 0;

  dispatch(setLoading(true));
  async function processChunk() {
    if (currentChunk >= totalChunks) {
      dispatch(setLoading(false));
      return;
    }
    const start = currentChunk * chunkSize;
    const end = start + chunkSize;
    const res = await fetch(`/api/records?start=${start}&end=${end}`);
    const chunkData = await res.json();
    dispatch(addRecords(chunkData));
    currentChunk++;
    // 等待浏览器空闲时继续处理下一批
    requestIdleCallback(processChunk);
  }
  requestIdleCallback(processChunk);
}

2. 组件不要等待全部数据，提前渲染基础UI

修改组件逻辑，即使数据还在加载中，先渲染加载提示、骨架屏，并且已加载的分批数据实时渲染出来：

import { useSelector } from 'react-redux';

function RecordList() {
  const records = useSelector(state => state.records.list);
  const isLoading = useSelector(state => state.records.isLoading);

  return (
    <div className="record-container">
      {isLoading && <div className="loading">数据加载中...</div>}
      <ul className="record-list">
        {records.map(record => (
          <li key={record.id} className="record-item">
            {record.title}
          </li>
        ))}
      </ul>
    </div>
  );
}

3. 优化Redux更新逻辑

确保Redux的reducer只做增量更新，避免不必要的深拷贝或大量计算：

// recordsReducer.js
const initialState = {
  list: [],
  isLoading: false
};

export default function recordsReducer(state = initialState, action) {
  switch (action.type) {
    case 'ADD_RECORDS':
      return {
        ...state,
        // 增量合并数据，避免替换整个数组（无需去重时直接用此方式）
        list: [...state.list, ...action.payload]
      };
    case 'SET_LOADING':
      return {
        ...state,
        isLoading: action.payload
      };
    default:
      return state;
  }
}

关键原理 #

浏览器的主线程同时负责UI渲染和JavaScript执行，连续的同步任务会阻塞渲染；setTimeout(0)或requestIdleCallback能让JavaScript任务暂停，优先完成UI渲染。分批更新Redux和渲染数据，既能减少单次更新的计算量，也能让用户看到实时反馈，不会觉得UI完全卡死。

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