如何监控react性能
使用 React Profiler API
React 16.5 及以上版本内置了 Profiler API，可直接测量组件渲染时间。通过 <React.Profiler> 包裹目标组件，记录每次渲染的耗时数据。
import { Profiler } from 'react';
function onRenderCallback(
id, // 组件ID
phase, // "mount" 或 "update"
actualDuration, // 本次渲染耗时（毫秒）
baseDuration, // 估算无 memoization 时的耗时
startTime, // 本次渲染开始时间戳
commitTime, // 提交时间戳
interactions // 本次更新相关的交互集合
) {
console.log(`渲染时间: ${actualDuration}ms`);
}
<Profiler id="MyComponent" onRender={onRenderCallback}>
<MyComponent />
</Profiler>启用 Chrome DevTools 性能分析
Chrome 开发者工具提供 React 专用性能分析功能。安装 React Developer Tools 扩展后：
- 打开 Chrome DevTools 的 Profiler 标签页
- 点击录制按钮开始捕获交互
- 操作页面触发组件更新
- 停止录制查看火焰图，分析组件渲染时序和耗时
监控虚拟 DOM 重渲染
使用 why-did-you-render 库检测不必要的重新渲染：
npm install @welldone-software/why-did-you-render配置入口文件：
import whyDidYouRender from '@welldone-software/why-did-you-render';
whyDidYouRender(React, {
trackAllPureComponents: true,
});关键性能指标测量
通过 web-vitals 库测量核心 Web 指标：
npm install web-vitalsimport { getCLS, getFID, getLCP } from 'web-vitals';
getCLS(console.log); // 布局偏移量
getFID(console.log); // 首次输入延迟
getLCP(console.log); // 最大内容绘制时间代码分割与懒加载
使用 React.lazy 和 Suspense 实现按需加载：
const OtherComponent = React.lazy(() => import('./OtherComponent'));
function MyComponent() {
return (
<Suspense fallback={<div>Loading...</div>}>
<OtherComponent />
</Suspense>
);
}内存泄漏检测
开发模式下通过严格模式检测潜在问题：
import { StrictMode } from 'react';
<StrictMode>
<App />
</StrictMode>生产环境性能追踪
部署后通过 window.performance API 收集真实用户数据：
const navigationTiming = performance.getEntriesByType('navigation')[0];
console.log('页面加载时间:', navigationTiming.loadEventEnd);
