Performance Guide

// ✅ 适合 memo：接收复杂 props 的列表项
const OrderCard = memo(function OrderCard({ order }: OrderCardProps) {
  return <div>...</div>;
});

// ❌ 不需要 memo：props 简单或组件很轻
function LoadingSpinner({ size }: { size: number }) {
  return <div style={{ width: size }} />;
}

// ✅ useMemo：计算开销大或引用需要稳定
const filteredOrders = useMemo(
  () => orders.filter(o => o.status === selectedStatus),
  [orders, selectedStatus]
);

// ✅ useCallback：传递给 memo 子组件的回调
const handleSelect = useCallback((id: string) => {
  setSelectedId(id);
}, []);

// ❌ 过度使用：简单值不需要 memo
const label = useMemo(() => `共 ${count} 件`, [count]); // 不必要

// ✅ 精确订阅，避免整个 store 订阅
const items = useCartStore(state => state.items);

// ❌ 订阅整个 store
const store = useCartStore();

import { lazy, Suspense } from 'react';

// 大型组件懒加载
const HeavyChart = lazy(() => import('@/components/charts/HeavyChart'));

function Dashboard() {
  return (
    <Suspense fallback={<ChartSkeleton />}>
      <HeavyChart data={data} />
    </Suspense>
  );
}

// 分页加载（推荐）
function ProductList() {
  const { products, hasMore, loadMore, isLoading } = useProducts();

  return (
    <div>
      {products.map(p => <ProductCard key={p.slug} product={p} />)}
      {hasMore && (
        <button onClick={loadMore} disabled={isLoading}>
          加载更多
        </button>
      )}
    </div>
  );
}

// 使用 next/image（自动优化 + lazy loading）
import Image from 'next/image';

<Image
  src={product.thumbnail}
  alt={product.title}
  width={300}
  height={300}
  loading="lazy"        // 默认，视口外延迟加载
  placeholder="blur"    // 模糊占位
/>

import { debounce, throttle } from '@mobazha/core';

// 搜索输入防抖（300ms）
const debouncedSearch = debounce((query: string) => {
  searchProducts(query);
}, 300);

// 滚动事件节流
const throttledScroll = throttle(() => {
  checkLoadMore();
}, 200);

import { memoize } from '@mobazha/core';

// 缓存计算结果
const getExpensiveResult = memoize((input: string) => {
  return heavyComputation(input);
});

import { batchProcess } from '@mobazha/core';

// 大批量操作分块处理，避免阻塞 UI
await batchProcess(
  largeArray,
  async item => processItem(item),
  50, // 每批 50 个
  10 // 批次间延迟 10ms
);

import { retry, withTimeout } from '@mobazha/core';

// 带重试的 API 调用
const data = await retry(
  () => fetchData(),
  3, // 最多重试 3 次
  1000, // 初始延迟 1s
  2 // 指数退避因子
);

// 带超时的 Promise
const result = await withTimeout(longOperation(), 10000); // 10s 超时

import { scheduleIdleTask } from '@mobazha/core';

// 在浏览器空闲时执行非紧急任务
scheduleIdleTask(() => {
  preloadNextPageData();
}, 5000); // 5s 超时（确保最终执行）

// performanceMonitor.ts 自动收集：
// - LCP (Largest Contentful Paint) — 目标 < 2.5s
// - FID (First Input Delay) — 目标 < 100ms
// - CLS (Cumulative Layout Shift) — 目标 < 0.1
// - FCP (First Contentful Paint)
// - TTFB (Time to First Byte)
// - INP (Interaction to Next Paint)

import { performanceMonitor } from '@mobazha/core';

// 同步测量
const result = performanceMonitor.measure('orderTransform', () => {
  return transformCoreOrder(data);
});

// 异步测量
const data = await performanceMonitor.measureAsync('fetchOrders', async () => {
  return await ordersApi.getOrders();
});

// 手动计时
const stopTimer = performanceMonitor.startTimer('chatInit');
await initializeChat();
stopTimer(); // 记录耗时