2026年React数据获取的第七层：你的应用在"裸奔"——性能优化和错误处理的真相

组件A ──┐
组件B ──┼──→ [去重管理器] ──→ 只发一次 HTTP 请求 ──→ 服务器
组件C ──┘           ↑
                返回同一个 Promise，三个组件都拿到数据

// 用 Map 存储正在进行中的请求
const pendingRequests = newMap();

asyncfunction deduplicatedFetch(url) {
// 如果这个请求已经在飞行中，直接返回那个 Promise
if (pendingRequests.has(url)) {
    return pendingRequests.get(url);  // 插队共享，不重新发请求
  }

// 第一次请求，正式发出去
const promise = fetch(url).then(r => r.json());
  pendingRequests.set(url, promise);

try {
    const data = await promise;
    return data;
  } finally {
    // 请求结束后清理，下次还能正常发
    pendingRequests.delete(url);
  }
}

// 10 个组件同时调用，只有 1 个真实网络请求
const data = await deduplicatedFetch('/api/users');

function UserListItem({ user }) {
  const queryClient = useQueryClient();

  return (
    <li
      onMouseEnter={() => {
        // 用户悬停的瞬间，悄悄预加载详情页数据
        queryClient.prefetchQuery({
          queryKey: ['users', user.id],
          queryFn: () => fetchUserDetails(user.id),
        });
      }}
    >
      <Link to={`/users/${user.id}`}>{user.name}</Link>
    </li>
  );
}

import { memo } from 'react';

// 加了 memo 的 UserCard，只有 user 这个 prop 真正变化时才重新渲染
const UserCard = memo(({ user }) => {
  console.log('渲染用户:', user.id);  // 没变化？这行不会打印
  return <div>{user.name}</div>;
});

┌─────────────────────────────────┐
│  可见区域 (浏览器实际渲染)        │
│ ┌─────────────────────────────┐ │
│ │  Item 45                   │ │
│ │  Item 46                   │ │  ← DOM 中只有这几个节点
│ │  Item 47                   │ │
│ │  Item 48                   │ │
│ └─────────────────────────────┘ │
│  ... 下方 9952 条数据存在内存里  │
│  但 DOM 里根本没有渲染它们        │
└─────────────────────────────────┘

import { useVirtualizer } from'@tanstack/react-virtual';
import { useRef } from'react';

function VirtualUserList({ users }) {
const parentRef = useRef();

const virtualizer = useVirtualizer({
    count: users.length,           // 总数据量：哪怕1万条
    getScrollElement: () => parentRef.current,
    estimateSize: () =>50,        // 每行大约50px高
  });

return (
    // 固定高度的滚动容器
    <div ref={parentRef} style={{ height: '500px', overflow: 'auto' }}>
      {/* 占位高度：让滚动条看起来是"完整"的 */}
      <div style={{ height: `${virtualizer.getTotalSize()}px`, position: 'relative' }}>
        {/* 只渲染可视区域内的 item */}
        {virtualizer.getVirtualItems().map(virtualRow => (
          <div
            key={virtualRow.key}
            style={{
              position: 'absolute',
              top: 0,
              left: 0,
              width: '100%',
              height: `${virtualRow.size}px`,
              transform: `translateY(${virtualRow.start}px)`,
            }}
          >
            {users[virtualRow.index].name}
          </div>
        ))}
      </div>
    </div>
  );
}

┌─────────────────────────────────────────┐
│              App                        │
│  ┌───────────────────────────────────┐  │
│  │       ErrorBoundary (防火门)       │  │
│  │  ┌─────────────┐ ┌─────────────┐  │  │
│  │  │  用户模块 ✅  │ │  订单模块 💥│  │  │
│  │  └─────────────┘ └──────┬──────┘  │  │
│  │                         ↓         │  │
│  │              显示友好错误提示       │  │
│  │              [重试按钮]            │  │
│  └───────────────────────────────────┘  │
└─────────────────────────────────────────┘
         用户模块完好，只有订单模块提示错误

import { QueryErrorResetBoundary } from '@tanstack/react-query';
import { ErrorBoundary } from 'react-error-boundary';

function App() {
  return (
    <QueryErrorResetBoundary>
      {({ reset }) => (
        <ErrorBoundary
          onReset={reset}
          fallbackRender={({ error, resetErrorBoundary }) => (
            <div style={{ padding: '20px', textAlign: 'center' }}>
              <h2>😅 这里出了点小问题</h2>
              <p style={{ color: '#666' }}>{error.message}</p>
              <button onClick={resetErrorBoundary}>重新试试</button>
            </div>
          )}
        >
          <YourApp />
        </ErrorBoundary>
      )}
    </QueryErrorResetBoundary>
  );
}

const queryClient = new QueryClient({
defaultOptions: {
    queries: {
      retry: (failureCount, error) => {
        // 404 是"真的没有"，不要傻乎乎地重试
        if (error.status === 404) returnfalse;
        // 其他错误，最多重试3次
        return failureCount < 3;
      },
      retryDelay: (attemptIndex) => {
        // 第1次失败等1秒，第2次等2秒，第3次等4秒
        // 最长不超过30秒
        returnMath.min(1000 * 2 ** attemptIndex, 30000);
      },
    },
  },
});

请求失败
   ↓
等待 1 秒 → 第1次重试 → 失败
   ↓
等待 2 秒 → 第2次重试 → 失败
   ↓
等待 4 秒 → 第3次重试 → 成功 ✅  (或彻底报错 ❌)

         ┌──────────┐
         │  CLOSED  │ ← 正常状态，放行请求
         │  (闭合)  │
         └────┬─────┘
              │ 连续失败 ≥ 5 次
              ▼
         ┌──────────┐
         │   OPEN   │ ← 断路状态，直接拒绝请求
         │  (断开)  │   不发网络请求，立即报错
         └────┬─────┘
              │ 等待 60 秒
              ▼
         ┌───────────┐
         │ HALF-OPEN │ ← 探测状态，放行一个请求试试
         │  (半开)   │
         └────┬──────┘
         成功 ↓    ↑ 失败，重新 OPEN
         ┌──────────┐
         │  CLOSED  │ ← 恢复正常
         └──────────┘

class CircuitBreaker {
constructor(threshold = 5, timeout = 60000) {
    this.failureCount = 0;
    this.threshold = threshold;   // 失败几次触发断路
    this.timeout = timeout;       // 断路持续多久（毫秒）
    this.state = 'CLOSED';        // 初始状态：正常
    this.nextAttempt = Date.now();
  }

async call(fn) {
    if (this.state === 'OPEN') {
      // 断路中：检查是否可以进入半开状态
      if (Date.now() < this.nextAttempt) {
        thrownewError('服务暂时不可用，请稍后再试');
      }
      this.state = 'HALF_OPEN';  // 尝试探测一次
    }

    try {
      const result = await fn();
      this.onSuccess();
      return result;
    } catch (error) {
      this.onFailure();
      throw error;
    }
  }

  onSuccess() {
    this.failureCount = 0;
    this.state = 'CLOSED';  // 恢复正常
  }

  onFailure() {
    this.failureCount++;
    if (this.failureCount >= this.threshold) {
      this.state = 'OPEN';
      // 记录下次可以重试的时间
      this.nextAttempt = Date.now() + this.timeout;
      console.warn(`熔断器触发！将在 ${this.timeout/1000} 秒后重试`);
    }
  }
}

// 使用方式
const breaker = new CircuitBreaker(5, 60000);  // 5次失败触发，断路1分钟

async function fetchWithBreaker(url) {
  return breaker.call(() => fetch(url).then(r => r.json()));
}