expo-react-native-performance

Expo React Native 性能最佳实践

全面的 Expo React Native 应用性能优化指南。包含 8 个类别中的 42 条规则，并按影响程度排序，帮助自动重构和代码生成。

适用场景

在以下情况下参考这些指南：

• 编写新的 React Native 组件或屏幕
• 使用 FlatList 或 FlashList 实现列表
• 添加动画或过渡效果
• 优化图像和资源加载
• 检查代码中的性能问题

按优先级划分的规则类别

优先级	类别	影响	前缀
1	应用启动与包体积	CRITICAL	startup-
2	列表虚拟化	CRITICAL	list-
3	重渲染优化	HIGH	rerender-
4	动画性能	HIGH	anim-
5	图像与资源加载	MEDIUM-HIGH	asset-
6	内存管理	MEDIUM	mem-
7	异步与数据获取	MEDIUM	async-
8	平台优化	LOW-MEDIUM	platform-

快速参考

1. 应用启动与包体积（CRITICAL）

• startup-enable-hermes - 启用 Hermes JavaScript 引擎
• startup-remove-console-logs - 在生产环境中移除控制台日志
• startup-splash-screen-control - 控制启动屏幕的显示
• startup-preload-assets - 在启动屏幕期间预加载关键资源
• startup-async-routes - 使用异步路由进行代码拆分
• startup-cherry-pick-imports - 使用直接导入代替聚合导出文件

2. 列表虚拟化（CRITICAL）

• list-use-flashlist - 使用 FlashList 代替 FlatList
• list-estimated-item-size - 提供准确的 estimatedItemSize
• list-get-item-type - 对混合列表使用 getItemType
• list-stable-render-item - 使用 useCallback 稳定 renderItem
• list-get-item-layout - 为固定高度的列表项提供 getItemLayout
• list-memoize-items - 对列表项组件进行记忆化处理

3. 重渲染优化（HIGH）

• rerender-use-memo-expensive - 对开销较大的计算进行记忆化处理
• rerender-use-callback-handlers - 使用 useCallback 稳定回调函数
• rerender-functional-setstate - 使用函数式 setState 更新
• rerender-lazy-state-init - 使用惰性状态初始化
• rerender-split-context - 按更新频率拆分 context
• rerender-derive-state - 派生状态，而非同步状态

4. 动画性能（HIGH）

• anim-use-native-driver - 为动画启用原生驱动
• anim-use-reanimated - 对复杂动画使用 Reanimated
• anim-layout-animation - 对简单过渡使用 LayoutAnimation
• anim-transform-not-dimensions - 使用 transform 而非尺寸属性制作动画
• anim-interaction-manager - 在动画期间延后执行繁重操作

5. 图像与资源加载（中高）

• asset-use-expo-image - 使用 expo-image 加载图像
• asset-prefetch-images - 在显示前预取图像
• asset-optimize-image-size - 请求尺寸合适的图像
• asset-use-webp-format - 使用 WebP 格式的图像
• asset-recycling-key - 在 FlashList 图像中使用 recyclingKey

6. 内存管理（中）

• mem-cleanup-subscriptions - 在 useEffect 中清理订阅
• mem-clear-timers - 在卸载时清除计时器
• mem-abort-fetch - 在卸载时中止 fetch 请求
• mem-avoid-inline-objects - 避免在 props 中使用内联对象
• mem-limit-list-data - 限制内存中的列表数据

7. 异步与数据获取（中）

• async-parallel-fetching - 并行获取互相独立的数据
• async-defer-await - 延迟到需要值时再 await
• async-batch-api-calls - 批量处理相关的 API 调用
• async-cache-responses - 在本地缓存 API 响应
• async-refetch-on-focus - 屏幕获得焦点时重新获取数据

8. 平台优化（低至中）

• platform-android-overdraw - 减少 Android 过度绘制
• platform-ios-text-rendering - 优化 iOS 文本渲染
• platform-android-proguard - 为 Android 发布版本启用 ProGuard
• platform-conditional-render - 特定于平台的优化

使用方法

阅读各个参考文件，了解详细说明和代码示例：

• 章节定义 - 分类结构和影响级别
• 规则模板 - 添加新规则的模板

完整汇编文档

如需查看包含所有展开规则的完整指南，请参阅 AGENTS.md。

参考文件

文件	描述
AGENTS.md	包含所有规则的完整汇编指南
references/_sections.md	分类定义和排序
assets/templates/_template.md	新规则模板
metadata.json	版本和参考信息