一、最核心：减少不必要的渲染
这是 React 性能优化的本质。
1. React.memo
函数组件避免重复渲染：
const MyComponent = React.memo((props) => {
return <div>{props.value}</div>
})
👉 适用于：
- props 不常变
- 纯展示组件
2. useMemo（缓存计算结果）
const computed = useMemo(() => {
return heavyCalculation(data)
}, [data])
👉 适用于：
- 大数据计算（比如表格过滤、排序）
- Echarts 数据处理
⚠️ 注意：不要滥用，小计算没必要
3. useCallback（缓存函数）
const handleClick = useCallback(() => {
doSomething()
}, [])
👉 解决问题：
- 避免子组件因为函数引用变化而重新渲染
二、列表性能优化（你这个场景重点）
4. 虚拟列表（强烈推荐）
用库：
- react-window
- react-virtualized
👉 场景：
- 表格 1000+ 行
- 日志列表
- 性能数据列表
👉 核心思想：
👉 只渲染可视区域！
5. key 使用正确
list.map(item => <Row key={item.id} />)
❌ 不要用 index：
key={index}
👉 否则会导致 diff 失效 → 频繁重排
三、组件拆分策略
6. 拆小组件（非常重要）
❌ 错误：
一个大页面组件 = 所有状态
✅ 正确：
- 表格组件
- 筛选组件
- 图表组件
👉 好处：
- 局部更新
- 更容易用 memo
四、状态管理优化
7. 避免无意义的 state
❌：
const [value, setValue] = useState(props.value)
👉 会造成：
- 双状态同步问题
- 多余 render
8. 状态下沉 or 提升
👉 原则：
- 谁用谁管理
- 避免“全局 state 导致全局 re-render”
五、异步 & 请求优化
9. 防抖 / 节流
搜索场景：
import debounce from 'lodash/debounce'
👉 避免频繁请求接口
10. 请求缓存
用：
- React Query
- SWR
👉 优势：
- 自动缓存
- 减少重复请求
- 自动刷新
六、代码层面优化
11. 懒加载（代码分割）
const Page = React.lazy(() => import('./Page'))
👉 配合：
<Suspense fallback={<Loading />}>
👉 好处：
- 减少首屏体积
12. Tree Shaking
👉 确保：
import { Button } from 'antd'
而不是：
import * as antd from 'antd'
七、Echarts / 图表优化（你项目重点）
👉 常见问题：图表卡顿
优化：
13. 避免重复 setOption
chart.setOption(option, { notMerge: true })
14. 数据分批渲染
👉 大数据：
- 分页
- 抽样
15. resize 防抖
八、性能分析工具（非常关键）
16. React DevTools Profiler
👉 看：
- 哪个组件 render 最多
- render 时间
17. Chrome Performance
👉 查：
- JS 执行时间
- 卡顿原因
九、一个实战总结（重点给你）
你现在的“性能平台”项目，建议优先做这几个：
👉 优先级排序（非常重要）：
- ✅ 虚拟列表（提升最大）
- ✅ React.memo + useCallback
- ✅ 数据缓存（React Query）
- ✅ Echarts 优化
- ✅ 防抖请求
- ✅ 组件拆分
最后给你一句实战经验
👉 80% 的性能问题 = 不必要的 render
而不是 JS 太慢。
