利用 `useTransition` 实现“长任务分片”：将千万级数据导出的计算量拆分到 100 帧执行

利用 useTransition 实现千万级数据导出长任务分片：保持 UI 响应

各位同仁，大家好。今天我们将深入探讨一个在前端开发中常见的性能瓶颈问题：如何处理计算密集型的“长任务”而不阻塞用户界面。具体来说，我们将以一个典型的场景——“千万级数据导出”为例，利用 React 18 引入的 useTransition Hook，将一个可能导致浏览器卡死的计算量，巧妙地拆分到 100 帧中逐步执行，从而实现一个流畅、响应迅速的用户体验。

一、长任务的困境：为什么前端会“卡死”？

想象一下，你的用户需要从前端导出1000万条数据。这听起来可能有点夸张，但在某些业务场景下并非不可能。当用户点击“导出”按钮时，如果你的代码尝试在单次事件循环中处理所有数据（例如，循环1000万次构建一个巨大的字符串或数组），会发生什么？

1. 主线程阻塞： JavaScript 是单线程的。这意味着当一个耗时操作在执行时，浏览器的主线程就被完全占用，无法响应用户的任何交互，例如点击、滚动、输入。UI 更新也会被暂停。
2. 页面无响应： 用户会看到页面“卡住”，鼠标指针变成加载状态，甚至浏览器会弹出“页面未响应”的警告。
3. 糟糕的用户体验： 这种体验无疑是灾难性的，用户会感到沮丧，甚至可能放弃使用你的产品。

传统的解决方案，比如使用 setTimeout(..., 0) 来分批执行，或者更复杂的 Web Workers，都有其适用场景和局限性。setTimeout 的调度不够精确，且容易导致状态管理混乱；Web Workers 虽然能将计算任务移出主线程，但带来了额外的线程通信开销和代码组织复杂性。

React 18 引入的 useTransition 提供了一种更优雅、更“React 式”的解决方案，尤其适用于在主线程内进行任务分片，同时保持 UI 响应。它让我们可以将某些状态更新标记为“非紧急”的，从而允许 React 优先处理紧急的UI更新和用户交互。

二、useTransition 核心机制解析

useTransition 是 React 的并发特性之一。它允许我们将某些状态更新标记为“过渡”（transition），这意味着这些更新是可中断的，并且优先级较低。当用户有更紧急的操作（如输入、点击）时，React 会优先响应这些紧急操作，而不是立即完成过渡更新。

其基本用法如下：

import { useTransition, useState } from 'react';

function MyComponent() {
  const [isPending, startTransition] = useTransition();
  const [count, setCount] = useState(0);

  const handleClick = () => {
    // 紧急更新，立即执行
    setCount(c => c + 1);

    // 非紧急更新，在过渡中执行
    startTransition(() => {
      // 这里的状态更新会被标记为非紧急
      // React 可能会延迟执行或中断它，以响应更紧急的交互
      setCount(c => c + 100);
    });
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick} disabled={isPending}>
        Increment and Start Transition
      </button>
      {isPending && <p>Loading new data...</p>}
    </div>
  );
}

• isPending: 一个布尔值，指示当前是否有正在进行的过渡。这对于向用户提供反馈（例如显示加载指示器或禁用按钮）非常有用。
• startTransition: 一个函数，它接受一个回调函数。在 startTransition 回调函数中执行的任何状态更新都将被标记为过渡更新。

useTransition 的魔力在于，它不阻塞主线程。即使 startTransition 中的任务很重，React 也会将其分解成小块，在每次浏览器帧空闲时执行一小部分，同时确保高优先级的UI更新（如用户输入）能立即得到响应。这正是我们实现“长任务分片”所需要的核心能力。

三、长任务分片：将大象装进冰箱，分三步走

将千万级数据导出这样的“大象”装进“100帧”这个“冰箱”，核心思想就是“分而治之”。

1. 定义“片”（Slice）：将总的数据量（例如1000万条记录）分成若干个小批次。如果目标是100帧，那么每帧处理1000万 / 100 = 10万条记录。
2. 逐片处理：在每次 startTransition 调用中，处理一个或多个这样的“片”。
3. 状态驱动：利用 React 的状态更新机制，驱动整个分片过程的迭代。每次处理完一个片，更新进度状态，触发下一次渲染，并在下一次渲染中继续处理下一个片。

我们的目标：

• 总数据量：10,000,000 条记录。
• 总执行帧数：100 帧。
• 每帧处理记录数：10,000,000 / 100 = 100,000 条。
• 导出文件格式：CSV（逗号分隔值）。

为了简化，我们假设每条记录都是一个简单的 JavaScript 对象，导出时将其转换为 CSV 格式的字符串。

四、实现步骤与代码详解

我们将构建一个 ExportComponent 组件，它包含一个按钮、一个进度条以及一些状态来管理导出过程。

4.1 准备工作：模拟数据和工具函数

首先，我们需要一个函数来模拟生成大量的假数据。同时，为了方便，我们还需要一个函数来触发文件下载。

utils.js

// utils.js

/**
 * 模拟生成大量数据
 * @param {number} count 要生成的记录数
 * @returns {Array<Object>} 包含模拟数据的数组
 */
export const generateLargeData = (count) => {
  console.log(`开始生成 ${count} 条模拟数据...`);
  const data = [];
  for (let i = 0; i < count; i++) {
    data.push({
      id: i + 1,
      name: `User ${i + 1}`,
      email: `user${i + 1}@example.com`,
      age: Math.floor(Math.random() * 60) + 18,
      city: `City ${String.fromCharCode(65 + (i % 26))}`, // A, B, C...
      occupation: `Occupation ${i % 10}`,
      timestamp: new Date().toISOString(),
      // 增加一些冗余字段以模拟更真实的数据大小
      description: `This is a long description for user ${i + 1}. It contains some random text to make the data larger and more realistic.`,
      notes: `Additional notes for user ${i + 1}. This field can be quite long.`,
      status: i % 2 === 0 ? 'active' : 'inactive',
      version: Math.floor(Math.random() * 5) + 1,
    });
  }
  console.log(`生成 ${count} 条模拟数据完成。`);
  return data;
};

/**
 * 将数据下载为文件
 * @param {string} filename 文件名
 * @param {string} text 要写入文件的文本内容
 * @param {string} mimeType MIME 类型
 */
export const downloadFile = (filename, text, mimeType = 'text/csv;charset=utf-8;') => {
  const blob = new Blob([text], { type: mimeType });
  const link = document.createElement('a');
  link.href = URL.createObjectURL(blob);
  link.download = filename;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  URL.revokeObjectURL(link.href); // 释放URL对象
};

/**
 * 将对象数组转换为 CSV 格式的字符串
 * @param {Array<Object>} data 待转换的数据
 * @returns {string} CSV 格式的字符串
 */
export const convertToCsv = (data) => {
  if (!data || data.length === 0) {
    return '';
  }

  const headers = Object.keys(data[0]);
  const headerRow = headers.map(header => `"${header.replace(/"/g, '""')}"`).join(',');

  const rows = data.map(row => {
    return headers.map(header => {
      let value = row[header] === undefined || row[header] === null ? '' : String(row[header]);
      // 如果值中包含逗号、双引号或换行符，则需要用双引号包裹，并对内部的双引号进行转义
      if (value.includes(',') || value.includes('"') || value.includes('n')) {
        value = `"${value.replace(/"/g, '""')}"`;
      }
      return value;
    }).join(',');
  });

  return [headerRow, ...rows].join('n');
};

4.2 核心组件：ExportComponent.jsx

现在，我们来构建 ExportComponent。

// ExportComponent.jsx
import React, { useState, useTransition, useCallback, useEffect, useRef } from 'react';
import { generateLargeData, downloadFile, convertToCsv } from './utils';

const TOTAL_RECORDS_TO_EXPORT = 10_000_000; // 千万级数据
const SLICES_COUNT = 100; // 拆分到 100 帧执行
const RECORDS_PER_SLICE = TOTAL_RECORDS_TO_EXPORT / SLICES_COUNT;

function ExportComponent() {
  const [isPending, startTransition] = useTransition();
  const [progress, setProgress] = useState(0); // 导出进度 (0-100)
  const [isExporting, setIsExporting] = useState(false); // 是否正在导出
  const [currentSliceIndex, setCurrentSliceIndex] = useState(0); // 当前处理到第几片

  // 使用 useRef 存储累积的 CSV 内容，避免在每次渲染时重新构建巨大的字符串
  const csvContentRef = useRef('');
  const allDataRef = useRef(null); // 存储一次性生成的所有原始数据

  // 模拟数据生成，只在组件初次挂载时执行一次
  useEffect(() => {
    console.log("组件挂载，开始生成模拟数据...");
    allDataRef.current = generateLargeData(TOTAL_RECORDS_TO_EXPORT);
    console.log("模拟数据生成完毕，等待导出。");
  }, []);

  // 核心逻辑：处理数据分片
  const processSlice = useCallback(() => {
    if (!allDataRef.current || currentSliceIndex >= SLICES_COUNT) {
      // 所有分片处理完毕或数据未准备好
      setIsExporting(false);
      setProgress(100);
      console.log("所有数据分片处理完毕，准备下载文件。");
      downloadFile('large_export.csv', csvContentRef.current);
      // 重置状态以便下次导出
      csvContentRef.current = '';
      setCurrentSliceIndex(0);
      return;
    }

    const startIdx = currentSliceIndex * RECORDS_PER_SLICE;
    const endIdx = Math.min((currentSliceIndex + 1) * RECORDS_PER_SLICE, TOTAL_RECORDS_TO_EXPORT);
    const sliceData = allDataRef.current.slice(startIdx, endIdx);

    // 将切片数据转换为 CSV 格式
    const sliceCsv = convertToCsv(sliceData);

    // 如果是第一片，需要包含 CSV 头部
    if (currentSliceIndex === 0) {
      const headers = Object.keys(allDataRef.current[0]); // 假设数据不为空
      csvContentRef.current = headers.map(header => `"${header.replace(/"/g, '""')}"`).join(',') + 'n' + sliceCsv;
    } else {
      // 否则，直接追加数据行，跳过头部
      // 注意：convertToCsv 会包含头部，所以我们需要去掉它
      const firstNewlineIndex = sliceCsv.indexOf('n');
      if (firstNewlineIndex !== -1) {
        csvContentRef.current += 'n' + sliceCsv.substring(firstNewlineIndex + 1);
      } else {
        // 如果 sliceCsv 只有一行（没有数据行，只有头部），则不追加
        // 实际上，只要 sliceData 不为空，convertToCsv 至少有两行
        // 这里只是一个防御性编程
      }
    }

    const newProgress = Math.min(Math.round(((currentSliceIndex + 1) / SLICES_COUNT) * 100), 100);

    // 使用 startTransition 来更新状态，驱动下一轮分片处理
    startTransition(() => {
      setProgress(newProgress);
      setCurrentSliceIndex(prevIndex => prevIndex + 1);
    });

    console.log(`处理分片 ${currentSliceIndex + 1}/${SLICES_COUNT}, 进度: ${newProgress}%`);

  }, [currentSliceIndex, startTransition]); // 依赖项：currentSliceIndex 和 startTransition

  // 当 currentSliceIndex 发生变化且正在导出时，自动触发下一片处理
  useEffect(() => {
    if (isExporting && currentSliceIndex < SLICES_COUNT) {
      processSlice();
    }
  }, [isExporting, currentSliceIndex, processSlice]);

  // 开始导出按钮的点击处理函数
  const handleStartExport = useCallback(() => {
    if (!allDataRef.current) {
      alert("数据尚未准备好，请稍候。");
      return;
    }
    if (isExporting) return; // 避免重复点击

    setIsExporting(true);
    setProgress(0);
    setCurrentSliceIndex(0);
    csvContentRef.current = ''; // 清空之前的导出内容

    // 立即启动第一个分片处理
    // 注意：这里我们立即调用 processSlice，它会在内部调用 startTransition
    // 来调度后续的分片处理。
    processSlice();

  }, [isExporting, processSlice]);

  return (
    <div style={{ padding: '20px', fontFamily: 'Arial, sans-serif' }}>
      <h1>千万级数据导出分片演示</h1>
      <p>总记录数: {TOTAL_RECORDS_TO_EXPORT.toLocaleString()} 条</p>
      <p>分片数量: {SLICES_COUNT} 片</p>
      <p>每片处理: {RECORDS_PER_SLICE.toLocaleString()} 条</p>

      <button
        onClick={handleStartExport}
        disabled={isExporting || isPending || !allDataRef.current}
        style={{
          padding: '10px 20px',
          fontSize: '16px',
          cursor: (isExporting || isPending || !allDataRef.current) ? 'not-allowed' : 'pointer',
          backgroundColor: (isExporting || isPending) ? '#ccc' : '#007bff',
          color: 'white',
          border: 'none',
          borderRadius: '5px',
          marginRight: '10px'
        }}
      >
        {isExporting ? '正在导出...' : '开始导出数据'}
      </button>

      {isPending && <span style={{ marginLeft: '10px', color: '#ffc107' }}>任务调度中...</span>}

      {isExporting && (
        <div style={{ marginTop: '20px', width: '100%', maxWidth: '500px' }}>
          <h3>导出进度: {progress}%</h3>
          <div style={{
            width: '100%',
            height: '20px',
            backgroundColor: '#e0e0e0',
            borderRadius: '10px',
            overflow: 'hidden'
          }}>
            <div style={{
              width: `${progress}%`,
              height: '100%',
              backgroundColor: '#28a745',
              transition: 'width 0.3s ease-in-out',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              color: 'white',
              fontSize: '12px'
            }}>
              {progress > 5 && `${progress}%`}
            </div>
          </div>
          <p style={{ fontSize: '14px', color: '#666' }}>
            当前处理第 {currentSliceIndex} 片 / 共 {SLICES_COUNT} 片
          </p>
        </div>
      )}
    </div>
  );
}

export default ExportComponent;

4.3 App.js 入口文件

// App.js
import React from 'react';
import ExportComponent from './ExportComponent';

function App() {
  return (
    <div className="App">
      <ExportComponent />
    </div>
  );
}

export default App;

4.4 代码逻辑详解

1. 常量定义: TOTAL_RECORDS_TO_EXPORT (1000万), SLICES_COUNT (100), RECORDS_PER_SLICE (10万)。这些常量清晰地定义了我们的任务规模和分片策略。
2. 状态管理:
   • isPending: 来自 useTransition，表示是否有非紧急更新正在进行。用于UI反馈。
   • isExporting: 自定义状态，表示整个导出流程是否已启动。
   • progress: 导出进度百分比。
   • currentSliceIndex: 当前正在处理的分片索引。
3. useRef 的妙用:
   • csvContentRef: 我们将所有分片处理后的 CSV 字符串累积到这个 ref 中。为什么不用 useState？因为 useState 更新会触发重新渲染，而每次重新渲染时构建或拼接一个可能非常巨大的字符串会带来性能开销。useRef 不会触发重新渲染，它更适合存储在渲染之间需要持久化的可变值。
   • allDataRef: 存储一次性生成的千万条原始数据。同样是为了避免将其作为 useState 的值，因为那样会带来巨大的内存开销和潜在的性能问题（React 会在每次更新时比较引用）。
4. useEffect (数据生成):
   • 在组件首次挂载时，useEffect 会调用 generateLargeData 一次性生成所有 1000 万条原始数据并存储到 allDataRef.current。这是为了模拟实际场景中可能从后端一次性获取或在内存中准备好的数据。
5. processSlice 回调函数:
   • 这是核心的业务逻辑，它负责处理单个数据分片。
   • startIdx 和 endIdx 计算出当前分片在 allDataRef.current 中的起始和结束索引。
   • sliceData 通过 slice() 方法获取当前分片的数据。
   • convertToCsv(sliceData) 将当前分片数据转换为 CSV 格式。
   • CSV 内容累积:
     • 如果是第一个分片 (currentSliceIndex === 0)，需要包含 CSV 文件的头部（列名）。
     • 后续分片则只追加数据行，避免重复添加头部。这里需要注意 convertToCsv 函数会默认生成头部，因此我们需要手动截取掉。
   • newProgress 计算新的进度百分比。
   • startTransition: 最关键的部分。它包裹了 setProgress 和 setCurrentSliceIndex 这两个状态更新。这意味着 React 会将这些更新标记为非紧急的。
     • 当这些状态更新发生时，React 会知道有一个“过渡”正在进行。它会在浏览器空闲时执行这些更新，而不是立即阻塞主线程。
     • 如果用户在此期间有点击、滚动等紧急操作，React 会优先处理这些操作，然后暂停或稍后继续我们的过渡更新。
   • 当所有分片处理完毕 (currentSliceIndex >= SLICES_COUNT)，processSlice 会触发 downloadFile，然后重置状态。
6. useEffect (驱动分片):
   • 这个 useEffect 负责在 isExporting 为 true 且 currentSliceIndex 尚未达到 SLICES_COUNT 时，自动调用 processSlice。
   • 每次 currentSliceIndex 更新（由 startTransition 触发），这个 useEffect 都会重新运行，进而再次调用 processSlice 来处理下一个分片。这就形成了一个自驱动的循环，每次循环都在 startTransition 的控制下进行。
7. handleStartExport:
   • 当用户点击“开始导出”按钮时调用。
   • 初始化 isExporting 为 true，重置进度和分片索引。
   • 清空 csvContentRef.current 以确保新的导出从空白开始。
   • 直接调用 processSlice(): 注意，这里是直接调用 processSlice()，而不是将其包裹在 startTransition 中。为什么？因为我们希望导出过程立即开始。processSlice 内部已经包含了 startTransition 来调度后续的分片处理。如果这里也包裹，可能会导致第一次分片也被延迟。
8. UI 渲染:
   • 按钮根据 isExporting、isPending 和 allDataRef.current 的状态禁用，并显示不同的文本。
   • 进度条动态显示 progress。
   • isPending 状态会显示“任务调度中…”的提示，让用户知道后台有任务正在等待执行。

五、性能考量与最佳实践

5.1 分片粒度的选择

• 太小: 如果 RECORDS_PER_SLICE 太小，比如每帧只处理几条记录，那么 startTransition 和 React 调度本身的开销可能会变得相对显著，导致总导出时间过长。
• 太大: 如果 RECORDS_PER_SLICE 太大，比如每帧处理几十万上百万条记录，那么单次分片的处理时间可能仍然会阻塞主线程，导致 UI 卡顿。
• 经验法则: 理想的分片大小应该使得每次分片处理的计算量在几十毫秒（例如 50ms-100ms）内完成。这样在 16ms 的帧预算下，即使加上 React 自身的开销，也能保持 UI 响应。本例中 10万条记录是一个不错的起点，但实际应用中需要根据数据结构复杂度和 CPU 性能进行测试和调整。

5.2 内存管理

本例中，我们一次性将 1000 万条记录生成并存储在 allDataRef.current 中。对于千万级的数据，这可能会消耗大量的内存。

潜在问题: 如果每条记录都比较大，1000万条记录可能会导致浏览器内存溢出。

解决方案:

• 流式处理 (Streaming): 如果数据是从后端获取的，可以考虑使用流式 API (如 ReadableStream) 边下载边处理，而不是一次性加载所有数据。
• 索引或分页加载: 如果数据量真的非常大，更好的做法是只在内存中保留当前需要处理的少量数据。例如，可以实现一个自定义的 DataLoader，它能根据 startIdx 和 endIdx 从一个更大的、基于索引的源（比如 IndexDB 或一个内存映射文件）中按需读取数据。
• 后端生成: 对于真正巨大的导出任务，通常的最佳实践是在后端生成文件，然后提供下载链接。前端只负责触发导出请求和显示进度。

在本例中，为了专注于 useTransition 的分片演示，我们简化了数据获取部分。但在实际项目中，内存管理是处理大数据不可忽视的一环。

5.3 用户体验增强

• 取消功能: 提供一个“取消导出”按钮，允许用户中断正在进行的任务。这需要一个 ref 来标记是否已取消，并在 processSlice 中检查。
• 错误处理: 如果在某个分片处理过程中发生错误（例如数据格式不正确），应捕获错误并向用户显示友好提示，并停止导出。
• 更精确的进度: 除了百分比，可以显示“已处理 X 条 / 总 Y 条”这样的信息。
• 导出速度估计: 根据已处理的时间和数据量，估算剩余时间。

5.4 useCallback 的重要性

在 ExportComponent 中，processSlice 和 handleStartExport 都使用了 useCallback。这是非常重要的性能优化：

• processSlice 依赖于 currentSliceIndex 和 startTransition。如果 processSlice 不被 useCallback 包裹，每次 ExportComponent 渲染时它都会创建一个新的函数实例。这将导致 useEffect 的依赖项 [isExporting, currentSliceIndex, processSlice] 每次都认为 processSlice 变了，从而不必要地重新执行 useEffect。useCallback 确保 processSlice 在其依赖项不变时保持引用稳定。
• handleStartExport 同样需要 useCallback 来保持函数引用稳定，避免在按钮被频繁渲染时创建新的事件处理器。

5.5 useTransition 与 Web Workers 的比较

特性	useTransition	Web Workers
执行线程	主线程（通过调度实现非阻塞）	独立的工作线程
阻塞 UI	不阻塞，React 调度低优先级任务	完全不阻塞主线程
复杂性	较低，React Hook 风格，代码集中	较高，需要单独的 Worker 文件，Message 通信
适用场景	计算量大但仍需访问 DOM 或 React 状态的任务	纯计算密集型任务，无需直接操作 DOM 或 React 状态
数据通信	直接访问组件状态，无需显式通信	基于 postMessage 和 onmessage 进行序列化/反序列化
内存	所有数据仍在主线程内存	Worker 拥有独立的内存空间，数据复制开销
并行性	逻辑上“并发”，但实际是主线程调度轮转	真正的并行（多个 CPU 核心）

总结: 如果你的长任务需要频繁与 React 状态交互或在主线程内完成（例如，复杂的 DOM 操作），并且可以通过分片来控制单次计算量，那么 useTransition 是一个极佳的选择，它提供了更高的开发效率和更“React”的解决方案。如果任务是纯计算型且非常耗时，可以完全脱离 DOM 和 React 状态，那么 Web Workers 提供了更强大的并行处理能力。在某些情况下，两者甚至可以结合使用：Web Worker 处理大部分数据，然后将结果分批传回主线程，再由 useTransition 协调这些结果的显示。

六、结语

通过 useTransition 实现长任务分片，我们成功地将一个可能导致浏览器无响应的千万级数据导出任务，转化为一个用户体验流畅、具有实时进度反馈的异步操作。这不仅提升了用户满意度，也展现了 React 并发模式在解决复杂前端性能问题上的强大能力。掌握这种技术，对于构建高性能、高响应度的现代 Web 应用至关重要。希望今天的讲解能对大家在实际项目中的实践有所启发。