被大多数React开发者忽视的性能杀手锏：一文讲透Profiler API的原理和应用

// 开发者的"防守策略"
const UserCard = React.memo(({ user }) => {
  const handleClick = useCallback(() => {
    // 某个操作
  }, []);
  
  return useMemo(() => (
    <div onClick={handleClick}>
      {user.name}
    </div>
  ), [user.name, handleClick]);
});

import { Profiler } from'react';

// 定义回调函数——这里收集性能数据
function onRenderCallback(
  id,              // 这个Profiler的标识符
  phase,           // "mount" 或 "update"
  actualDuration,  // 实际渲染耗时（毫秒）
  baseDuration,    // 基准耗时（无优化情况）
  startTime,       // 渲染开始的时间戳
  commitTime       // 提交到DOM的时间戳
) {
console.log(`[${id}] ${phase} 阶段耗时: ${actualDuration.toFixed(2)}ms`);
}

// 把你想测试的组件包装起来
exportdefaultfunction App() {
return (
    <Profiler id="App-Root" onRender={onRenderCallback}>
      <Dashboard />
    </Profiler>
  );
}

class PerformanceCollector {
constructor() {
    this.metrics = newMap();
  }

  record(id, phase, actualDuration, baseDuration) {
    if (!this.metrics.has(id)) {
      this.metrics.set(id, {
        mounts: [],
        updates: [],
        avgUpdateDuration: 0,
        maxDuration: 0
      });
    }

    const data = this.metrics.get(id);
    const duration = actualDuration;

    if (phase === 'mount') {
      data.mounts.push(duration);
    } else {
      data.updates.push(duration);
      data.avgUpdateDuration = 
        data.updates.reduce((a, b) => a + b, 0) / data.updates.length;
    }

    data.maxDuration = Math.max(data.maxDuration, duration);
  }

  getReport() {
    const report = {};
    for (const [id, data] ofthis.metrics) {
      report[id] = {
        mountCount: data.mounts.length,
        updateCount: data.updates.length,
        avgUpdateTime: `${data.avgUpdateDuration.toFixed(2)}ms`,
        maxDuration: `${data.maxDuration.toFixed(2)}ms`,
        slowUpdates: data.updates.filter(d => d > 16).length
      };
    }
    return report;
  }
}

const collector = new PerformanceCollector();

function onRenderCallback(id, phase, actualDuration, baseDuration) {
  collector.record(id, phase, actualDuration, baseDuration);
}

// 点击按钮输出报告
function PrintReport() {
return (
    <button onClick={() => console.table(collector.getReport())}>
      查看性能报告
    </button>
  );
}

export default function App() {
  return (
    <Profiler id="App" onRender={onRenderCallback}>
      <Header />
      
      <Profiler id="MainContent" onRender={onRenderCallback}>
        <div style={{ display: 'flex' }}>
          <Profiler id="Sidebar" onRender={onRenderCallback}>
            <Sidebar />
          </Profiler>

          <Profiler id="FeedList" onRender={onRenderCallback}>
            <FeedList />
          </Profiler>

          <Profiler id="RightPanel" onRender={onRenderCallback}>
            <RightPanel />
          </Profiler>
        </div>
      </Profiler>

      <Footer />
    </Profiler>
  );
}

浪费时间 = baseDuration - actualDuration

function onRenderCallback(id, phase, actualDuration) {
  if (actualDuration > 16.67) {
    console.warn(`⚠️ [${id}] 检测到可能丢帧: ${actualDuration.toFixed(2)}ms`);
  }
}

// vite.config.js
import { defineConfig } from'vite'
import react from'@vitejs/plugin-react'

exportdefault defineConfig({
plugins: [react()],
resolve: {
    alias: {
      'react-dom/client': 'react-dom/profiling',
    }
  }
})

// 只在特定用户群体启用监控（比如灰度用户）
function onRenderCallback(id, phase, actualDuration, baseDuration, startTime, commitTime) {
if (window.__ENABLE_PERF_MONITOR__) {
    // 上报到监控系统
    fetch('/api/perf/report', {
      method: 'POST',
      body: JSON.stringify({
        componentId: id,
        phase,
        duration: actualDuration,
        timestamp: commitTime
      })
    });
  }
}

const baselineMetrics = {
  'FeedList-Initial': 50,    // 首次渲染应该在50ms内
  'FeedList-Update': 16,      // 每次更新应该在16ms内
  'UserSearch-Update': 20     // 搜索更新不超过20ms
};

// 单元测试示例
import { render } from'@testing-library/react';

test('FeedList更新性能未回归', () => {
const metrics = [];
const onRender = (id, phase, duration) => {
    if (phase === 'update') metrics.push(duration);
  };

  render(
    <Profiler id="FeedList" onRender={onRender}>
      <FeedList />
    </Profiler>
  );

// 模拟更新...
  userEvent.click(screen.getByText('load more'));

// 断言：平均更新时间不超过16ms
const avgDuration = metrics.reduce((a, b) => a + b) / metrics.length;
  expect(avgDuration).toBeLessThan(16);
});