Profiler

<Profiler id="string" onRender={(id, phase, actualDuration, baseDuration, startTime, commitTime, interactions) => void}>
  {/* 子组件 */}
</Profiler>

interface OnRenderCallback {
  (
    id: string,                    // Profiler 的 id
    phase: 'mount' | 'update',     // mount 或 update
    actualDuration: number,        // 本次渲染耗时 (ms)
    baseDuration: number,          // 预估的渲染耗时 (ms)
    startTime: number,             // 渲染开始时间戳
    commitTime: number,            // 渲染完成时间戳
    interactions: Set<Interaction> // 触发渲染的交互集合
  ): void;
}

import { Profiler } from 'react';

function onRenderCallback(
  id: string,
  phase: 'mount' | 'update',
  actualDuration: number,
  baseDuration: number,
  startTime: number,
  commitTime: number
) {
  console.log({
    id,
    phase,
    actualDuration,
    baseDuration,
    startTime,
    commitTime,
  });
}

function App() {
  return (
    <Profiler id="App" onRender={onRenderCallback}>
      <Navigation />
      <MainContent />
    </Profiler>
  );
}

// 控制台输出示例:
// {
//   id: "App",
//   phase: "mount",
//   actualDuration: 14.5,
//   baseDuration: 12.3,
//   startTime: 1678901234567,
//   commitTime: 1678901234582
// }

import { Profiler, useState } from 'react';

function ExpensiveComponent({ data }: { data: number[] }) {
  // 模拟复杂计算
  const processed = data.map(n => n * 2);

  return (
    <div>
      {processed.map(n => (
        <div key={n}>{n}</div>
      ))}
    </div>
  );
}

function Dashboard() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>
        更新 ({count})
      </button>

      <Profiler
        id="ExpensiveComponent"
        onRender={(id, phase, actualDuration) => {
          if (actualDuration > 16) { // 超过一帧 (16ms)
            console.warn(`${id} 渲染耗时过长: ${actualDuration.toFixed(2)}ms`);
          }
        }}
      >
        <ExpensiveComponent data={Array.from({ length: 10000 }, (_, i) => i)} />
      </Profiler>
    </div>
  );
}

import { Profiler } from 'react';

// 性能数据收集
const performanceMetrics = new Map<string, number[]>();

function trackPerformance(
  id: string,
  phase: 'mount' | 'update',
  actualDuration: number
) {
  // 初始化数组
  if (!performanceMetrics.has(id)) {
    performanceMetrics.set(id, []);
  }

  // 记录本次渲染耗时
  const metrics = performanceMetrics.get(id)!;
  metrics.push(actualDuration);

  // 计算平均耗时
  const avgDuration = metrics.reduce((a, b) => a + b, 0) / metrics.length;

  // 发送到监控服务
  if (typeof window !== 'undefined' && window.gtag) {
    window.gtag('event', 'performance_render', {
      component_id: id,
      phase,
      duration: actualDuration,
      avg_duration: avgDuration,
    });
  }

  // 开发环境打印警告
  if (process.env.NODE_ENV === 'development' && actualDuration > 50) {
    console.warn(
      `[Performance] ${id} (${phase}) took ${actualDuration.toFixed(2)}ms (avg: ${avgDuration.toFixed(2)}ms)`
    );
  }
}

// 使用示例
function ProductList({ products }: { products: Product[] }) {
  return (
    <Profiler id="ProductList" onRender={trackPerformance}>
      {products.map(product => (
        <ProductCard key={product.id} product={product} />
      ))}
    </Profiler>
  );
}

// 定期报告性能统计
if (typeof window !== 'undefined') {
  setInterval(() => {
    const report = Array.from(performanceMetrics.entries()).map(
      ([id, durations]) => ({
        id,
        renders: durations.length,
        avg: durations.reduce((a, b) => a + b, 0) / durations.length,
        max: Math.max(...durations),
        min: Math.min(...durations),
      })
    );

    console.table(report);
  }, 30000); // 每30秒报告一次
}

// 条件性启用 Profiler
const isDev = process.env.NODE_ENV === 'development';

function ProductionProfiler({
  id,
  children,
}: {
  id: string;
  children: React.ReactNode;
}) {
  if (isDev) {
    return (
      <Profiler id={id} onRender={devCallback}>
        {children}
      </Profiler>
    );
  }

  return <>{children}</>;
}

// 使用
<ProductionProfiler id="App">
  <App />
</ProductionProfiler>

const PERFORMANCE_THRESHOLDS = {
  excellent: 16,  // 一帧 (60fps)
  good: 33,       // 两帧 (30fps)
  warning: 50,    // 需要优化
  critical: 100,  // 严重问题
};

function categorizePerformance(duration: number): string {
  if (duration < PERFORMANCE_THRESHOLDS.excellent) return '✅ Excellent';
  if (duration < PERFORMANCE_THRESHOLDS.good) return '🟢 Good';
  if (duration < PERFORMANCE_THRESHOLDS.warning) return '🟡 Warning';
  if (duration < PERFORMANCE_THRESHOLDS.critical) return '🟠 Slow';
  return '🔴 Critical';
}

function onRender(
  id: string,
  phase: 'mount' | 'update',
  actualDuration: number
) {
  const category = categorizePerformance(actualDuration);

  console.log(
    `[${id}] ${phase}: ${actualDuration.toFixed(2)}ms ${category}`
  );

  // 超过阈值发送告警
  if (actualDuration > PERFORMANCE_THRESHOLDS.warning) {
    alert(`Performance Warning: ${id} took ${actualDuration}ms`);
  }
}

// 1. 识别性能问题
const slowComponents = new Set<string>();

// 2. 添加 Profiler
<Profiler
  id="ComponentName"
  onRender={(id, phase, actualDuration) => {
    if (actualDuration > 16) {
      slowComponents.add(id);
    }
  }}
>
  <ComponentName />
</Profiler>

// 3. 分析数据
const report = Array.from(slowComponents).map(id => ({
  id,
  suggestions: getSuggestions(id),
}));

// 4. 应用优化
function OptimizedComponent({ data }) {
  // 使用 React.memo 避免不必要的重渲染
  // 使用 useMemo 缓存计算结果
  // 使用 useCallback 缓存函数
  // 拆分组件减少渲染范围
}

// 5. 验证优化效果
<Profiler id="OptimizedComponent" onRender={verifyCallback}>
  <OptimizedComponent />
</Profiler>