如何分析react性能
使用 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 虚拟化长列表，仅渲染可见区域内容。示例：
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>;
}
