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";

<List
  height={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）：检查内存泄漏、渲染瓶颈。

📌 总结建议（针对你做的性能平台项目）：

1. 表格 / 列表页面 → 用 react-window 做虚拟滚动。
2. 路由层 → React.lazy 懒加载页面，避免首页加载过大。
3. 数据计算（统计 / 过滤） → 用 useMemo 缓存。
4. 表格操作按钮 → 用 React.memo 包裹，减少子组件重复渲染。
5. ECharts 图表 → 按需 import（只加载需要的图表类型）。