当前位置：首页 > React

如何分析react性能

2026-02-11 22:46:35React

使用 React DevTools 进行性能分析

React DevTools 是浏览器扩展工具，可直接分析组件渲染时间和性能瓶颈。安装后，在浏览器开发者工具中选择“Profiler”标签，记录组件的渲染过程。通过火焰图查看各组件的渲染时间，识别耗时较长的组件。

启用 StrictMode 检测潜在问题

在应用根组件中包裹 <React.StrictMode>，React 会检测废弃 API、意外副作用等问题。严格模式会重复调用部分生命周期函数和钩子，帮助发现非纯函数导致的性能问题。

使用 React.memo 和 useMemo 优化渲染

对函数组件使用 React.memo 避免不必要的重新渲染。对于复杂计算或依赖数组变化的数据，使用 useMemo 缓存结果。示例代码：

const MemoizedComponent = React.memo(function MyComponent(props) {
  return <div>{props.value}</div>;
});

const expensiveValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

分析 Bundle 大小与代码分割

使用工具如 webpack-bundle-analyzer 分析打包文件体积。通过动态导入（React.lazy 和 Suspense）实现代码分割，减少初始加载时间：

const LazyComponent = React.lazy(() => import('./LazyComponent'));
function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

监控关键指标

通过 window.performance API 或工具如 Lighthouse 测量首次内容渲染（FCP）、交互时间（TTI）等。结合 useEffect 和性能 API 记录关键生命周期事件：

useEffect(() => {
  const start = performance.now();
  return () => {
    const end = performance.now();
    console.log(`Component rendered in ${end - start}ms`);
  };
}, [deps]);

避免内联函数与对象

内联函数或对象会导致子组件不必要的重新渲染。将函数提升到组件外部或使用 useCallback 缓存：

const handleClick = useCallback(() => {
  // 处理逻辑
}, [deps]);

虚拟化长列表

使用 react-window 或 react-virtualized 虚拟化长列表，仅渲染可见区域内容。示例：

如何分析react性能

import { FixedSizeList as List } from 'react-window';
const Row = ({ index, style }) => <div style={style}>Row {index}</div>;
function App() {
  return <List height={600} itemCount={1000} itemSize={35} width={300}>{Row}</List>;
}