React Native 列表优化是一个系统性的工程，涉及渲染性能、内存占用、网络加载、用户体验等多个维度。以下是经过实战验证的具体优化实践，按优先级和场景分类整理：
✅ 1. 渲染层面优化：减少重绘、复用组件
| 技术点 | 实践方式 | 示例代码 |
|---|
| React.memo / PureComponent | 避免相同 props 导致重复渲染 | const Item = React.memo(({ title }) => <Text>{title}</Text>) |
| keyExtractor 稳定唯一 | 确保组件复用，避免错位 | keyExtractor={item => item.id.toString()} |
| shouldComponentUpdate | 类组件手动控制更新 | 见类组件示例 |
| useMemo 缓存计算结果 | 避免每次渲染重复计算样式 | const style = useMemo(() => ({ height }), [height]) |
✅ 2. 列表组件选型与配置：FlatList / SectionList
| 配置项 | 推荐值 | 说明 |
|---|
initialNumToRender | 10~20 | 首屏渲染数量，避免白屏 |
windowSize | 5~7 | 控制可视区域外预渲染数量，越大越占内存 |
maxToRenderPerBatch | 10 | 每帧渲染数量，降低掉帧风险 |
removeClippedSubviews | true | 移除屏幕外组件，节省内存（Android 有效） |
getItemLayout | 固定高度时必填 | 跳过动态测量，提升滚动性能 |
✅ 3. 图片优化：懒加载 + 缓存 + 预加载
| 技术点 | 实践方式 | 推荐库 |
|---|
| 懒加载 | FlatList 自带 | 无需额外处理 |
| 预加载 | 提前下载图片 | Image.prefetch(uri) |
| 缓存优化 | 内存+磁盘缓存 | react-native-fast-image |
| 渐进式加载 | 先占位图，后高清图 | 使用 placeholder 属性 |
✅ 4. 数据加载优化：分页 + 缓存 + 防抖
| 技术点 | 实践方式 | 示例 |
|---|
| 分页加载 | onEndReached + onEndReachedThreshold | 滚动到底部加载下一页 |
| 防抖/节流 | 避免频繁触发滚动事件 | lodash.throttle |
| 缓存请求结果 | 使用 react-query 或 SWR | 减少重复请求 |
| 预加载下页数据 | 当前页加载完后提前请求 | 提升用户感知速度 |
✅ 5. 复杂列表项优化：延迟加载非关键内容
| 技术点 | 实践方式 | 示例 |
|---|
| 分帧渲染 | 使用 InteractionManager.runAfterInteractions | 延迟加载评论、语音等内容 |
| 动态加载组件 | 首屏只渲染关键信息，滑动后加载详情 | 如 IM 消息列表的语音消息 |
| 图片尺寸指定 | 避免 Image 组件重新布局 | <Image style={{ width: 100, height: 100 }}> |
✅ 6. 性能监控与调试工具
| 工具 | 作用 |
|---|
Flipper | 内存、网络、渲染分析 |
React DevTools | 查看组件层级和渲染次数 |
react-native-performance | FPS、内存、启动时间监控 |
Systrace | 原生层性能追踪（Android） |
✅ 实战建议：按场景组合使用
| 场景 | 推荐组合 |
|---|
| 普通图文列表 | FlatList + React.memo + 图片缓存 |
| 聊天消息列表 | 分帧渲染 + 懒加载语音/图片 + 缓存 |
| 电商商品瀑布流 | react-native-super-grid + FastImage + 分页 |
| 超长列表（>1000项） | VirtualizedList + 分页 + 内存回收 |
📌 总结口诀（便于记忆）
“缓存图片、分页数据、组件复用、懒加载、分批渲染、监控性能”
通过以上实践，可在真实项目中将长列表的首屏渲染时间降低30%~50%，滚动帧率稳定在55~60 FPS，并显著减少内存峰值。
