react性能优化有哪些
React 性能优化的手段比较多，既有代码层面的，也有构建层面的，还涉及到运行时调优。我帮你系统性梳理一份：
🔹 一、渲染性能优化
1. 减少不必要的渲染
React.memo：对函数组件做浅比较，避免相同 props 时重复渲染。useMemo/useCallback：缓存计算结果或函数引用，减少子组件 re-render。PureComponent（class 组件）：类似React.memo，内置浅比较。
const Child = React.memo(({ value }: { value: number }) => {console.log("render child");return <div>{value}</div>;
});function App() {const [count, setCount] = useState(0);return <Child value={count} />;
}
2. 合理使用 key
key决定 React Diff 算法的复用策略，避免用index作为 key，优先使用唯一 id。
3. 虚拟化长列表
react-window / react-virtualized：只渲染可视区域，提高长列表性能。
import { FixedSizeList as List } from "react-window";<Listheight={400}itemCount={1000}itemSize={35}width={300}
>{({ index, style }) => <div style={style}>Row {index}</div>}
</List>
4. 避免在渲染时做重计算
不要在 JSX 里直接做大计算 / map / sort，使用
useMemo缓存结果。
5. 减少 Context 过度渲染
Context 更新会触发所有消费组件刷新。
优化手段：
拆分 Context
或配合 selector hook（比如
use-context-selector）
🔹 二、构建与加载优化
1. 代码分割
React.lazy + Suspense路由级别拆分。dynamic import()工具函数/图表库等按需加载。
2. Tree Shaking
确保打包工具能清除无用代码（Webpack、Vite 默认支持 ES Module）。
3. 压缩与缓存
使用 gzip 或 brotli 压缩。
配置浏览器缓存策略（静态资源 hash 命名）。
4. 使用 CDN / 按需加载依赖
比如 antd 用 babel-plugin-import 或 unplugin-import 按需引入。
🔹 三、运行时优化
1. 避免频繁状态更新
合并
setState。使用 批量更新（React 18 自动启用）。
2. 合理选择状态存储位置
不要把所有状态放在全局（Redux/Context）。
局部状态用
useState更高效。
3. 使用 Web Worker
把耗时计算移到 Worker，避免阻塞主线程。
4. 节流与防抖
对滚动、输入等高频事件处理函数加上 debounce/throttle。
🔹 四、UI & 交互优化
1. 图片优化
懒加载（
<img loading="lazy" />）。使用合适的格式（WebP、AVIF）。
2. 骨架屏 / 占位符
提升用户感知性能，避免白屏。
3. Suspense + Streaming SSR
React 18 支持流式渲染，首屏更快。
🔹 五、开发阶段调优工具
React Profiler：分析组件渲染耗时。
why-did-you-render：检测不必要的 re-render。
Performance 面板（Chrome DevTools）：检查内存泄漏、渲染瓶颈。
📌 总结建议（针对你做的性能平台项目）：
表格 / 列表页面 → 用
react-window做虚拟滚动。路由层 →
React.lazy懒加载页面，避免首页加载过大。数据计算（统计 / 过滤） → 用
useMemo缓存。表格操作按钮 → 用
React.memo包裹，减少子组件重复渲染。ECharts 图表 → 按需 import（只加载需要的图表类型）。