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%**，**滚动帧率稳定在5560 FPS，并显著减少内存峰值。

# react native # 学习 # react.js
Logo
开源鸿蒙跨平台开发者社区

开源鸿蒙跨平台开发社区汇聚开发者与厂商，共建“一次开发，多端部署”的开源生态，致力于降低跨端开发门槛，推动万物智联创新。

更多推荐

cover

【Flutter for OpenHarmony 跨平台征文】Flutter 三方库 flutter_animate 的鸿蒙化适配与心形搏动动画实战指南

avatar 开源鸿蒙跨平台开发者社区
cover

Flutter UI自动化测试在 OpenHarmony 上的实现指南

avatar 开源鸿蒙跨平台开发者社区
cover

Flutter 性能监控平台在 OpenHarmony 上的实现指南

avatar 开源鸿蒙跨平台开发者社区