如何监控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 的堆快照功能比较内存变化。