如何监控react性能
使用 React DevTools 进行性能分析
React DevTools 是浏览器扩展工具，提供组件树、状态和性能分析功能。安装后，在浏览器开发者工具中切换到 "Profiler" 标签页，记录组件渲染过程。分析火焰图可以识别渲染时间过长的组件，优化不必要的重新渲染。
利用 React.memo 和 useMemo 优化组件
React.memo 用于记忆函数组件，避免不必要的重新渲染。useMemo 缓存计算结果，避免重复计算。适用于渲染成本高的组件或复杂计算场景。示例代码：
const MemoizedComponent = React.memo(MyComponent);
function ExpensiveComponent({ list }) {
const sortedList = useMemo(() => list.sort(), [list]);
return <div>{sortedList}</div>;
}使用 Lighthouse 进行整体性能评估
Lighthouse 是 Chrome 开发者工具中的审计工具，提供性能评分和改进建议。运行审计后关注 "Performance" 部分，查看首次内容渲染(FCP)、可交互时间(TTI)等指标。优化建议包括代码拆分、资源压缩等。
实现自定义性能监控
使用 Performance API 记录关键时间点，结合 React 生命周期测量组件渲染时间。示例代码：
function useComponentTiming(name) {
useEffect(() => {
const start = performance.now();
return () => {
const end = performance.now();
console.log(`${name} render time: ${end - start}ms`);
};
});
}分析 Bundle 大小和加载性能
使用 webpack-bundle-analyzer 分析打包结果，识别过大的依赖项。配置代码分割按需加载组件，减少初始加载时间。结合 React.lazy 和 Suspense 实现动态导入：
const LazyComponent = React.lazy(() => import('./LazyComponent'));监控运行时内存使用
通过浏览器内存面板观察内存泄漏迹象，结合 React 组件卸载清理副作用。避免在全局存储过大对象，及时清除定时器和事件监听器。使用 Chrome 的堆快照功能比较内存变化。
