名称: expo 描述: Expo React Native 性能优化指南。此技能应用于编写、审查或重构 Expo React Native 代码时，以确保最佳性能模式。触发涉及 React Native 组件、导航、列表、图像、动画、包优化或移动性能改进的任务。
社区 Expo React Native 最佳实践
全面的 Expo React Native 应用程序性能优化指南。包含 9 个类别中的 54 条规则，按影响优先级排序，以指导自动重构和代码生成。
何时应用
在以下情况下参考这些指南：
- 编写新的 Expo React Native 组件
- 优化应用启动时间和交互时间
- 实现列表、图像或动画
- 减少包大小和内存使用
- 审查代码以解决移动性能问题
按优先级分类的规则类别
| 优先级 | 类别 | 影响 | 前缀 |
|---|---|---|---|
| 1 | 启动时间优化 | 关键 | launch- |
| 2 | 包大小优化 | 关键 | bundle- |
| 3 | 列表虚拟化 | 高 | list- |
| 4 | 图像优化 | 高 | image- |
| 5 | 数据获取模式 | 高 | data- |
| 6 | 导航性能 | 中高 | nav- |
| 7 | 重渲染预防 | 中 | rerender- |
| 8 | 动画性能 | 中 | anim- |
| 9 | 内存管理 | 低中 | mem- |
快速参考
1. 启动时间优化（关键）
launch-splash-screen-control- 在资源加载期间控制启动屏幕可见性launch-preload-critical-assets- 在启动期间预加载字体和图像launch-hermes-engine- 使用 Hermes 引擎以加快启动launch-defer-non-critical- 延迟非关键初始化launch-new-architecture- 启用新架构以实现同步本地通信launch-minimize-root-imports- 最小化根 App 组件中的导入
2. 包大小优化（关键）
bundle-avoid-barrel-files- 避免桶文件导入bundle-analyze-size- 发布前分析包大小bundle-remove-unused-dependencies- 移除未使用的依赖项bundle-split-by-architecture- 生成架构特定的 APKbundle-enable-proguard- 为 Android 发布构建启用 ProGuardbundle-optimize-fonts- 将自定义字体子集化为使用的字符bundle-use-lightweight-alternatives- 使用轻量级库替代品
3. 列表虚拟化（高）
list-use-flashlist- 使用 FlashList 替代 FlatListlist-provide-estimated-size- 提供准确的 estimatedItemSizelist-avoid-inline-functions- 避免在 renderItem 中使用内联函数list-provide-getitemlayout- 为固定高度项目提供 getItemLayoutlist-avoid-key-prop- 避免在 FlashList 项目内部使用 key proplist-batch-rendering- 配置列表批量渲染list-memoize-item-components- 记忆化列表项组件
4. 图像优化（高）
image-use-expo-image- 使用 expo-image 替代 React Native Imageimage-resize-to-display-size- 将图像调整为显示尺寸image-use-webp-format- 使用 WebP 格式以减小文件大小image-use-placeholders- 使用 BlurHash 或 ThumbHash 占位符image-preload-critical- 预加载关键首屏图像image-lazy-load-offscreen- 懒加载屏幕外图像
5. 数据获取模式（高）
data-parallel-fetching- 并行获取独立数据data-request-deduplication- 去重并发请求data-abort-requests- 在组件卸载时中止请求data-pagination- 实现高效的分页策略data-cache-strategies- 使用适当的缓存策略data-optimistic-updates- 应用乐观更新以提高响应性
6. 导航性能（中高）
nav-use-native-stack- 使用本地堆栈导航器nav-unmount-inactive-screens- 卸载非活动标签屏幕nav-prefetch-screen-data- 在导航前预取数据nav-optimize-screen-options- 优化屏幕选项nav-avoid-deep-nesting- 避免深度嵌套导航器
7. 重渲染预防（中）
rerender-use-memo-components- 使用 React.memo 记忆化昂贵组件rerender-use-callback- 使用 useCallback 稳定回调函数rerender-use-memo-values- 使用 useMemo 记忆化昂贵计算rerender-avoid-context-overuse- 避免过度使用 Context 进行频繁更新rerender-split-component-state- 拆分组件以隔离更新状态rerender-use-react-compiler- 启用 React Compiler 进行自动记忆化rerender-avoid-anonymous-components- 避免在 JSX 中使用匿名组件
8. 动画性能（中）
anim-use-reanimated- 使用 Reanimated 进行 UI 线程动画anim-use-native-driver- 为 Animated API 启用 useNativeDriveranim-avoid-layout-animation- 优先使用变换而非布局动画anim-gesture-handler-integration- 使用 Gesture Handler 与 Reanimated 集成anim-interaction-manager- 在动画期间延迟繁重工作
9. 内存管理（低中）
mem-cleanup-useeffect- 清理订阅和定时器mem-abort-fetch-requests- 在卸载时中止 fetch 请求mem-avoid-closure-leaks- 避免闭包内存泄漏mem-release-heavy-resources- 在不需要时释放繁重资源mem-profile-with-tools- 使用开发工具分析内存使用
如何使用
阅读个别参考文件以获取详细解释和代码示例：
- 部分定义 - 类别结构和影响级别
- 规则模板 - 添加新规则的模板
- 示例规则：launch-splash-screen-control, list-use-flashlist
完整编译文档
对于包含所有规则扩展的完整指南：AGENTS.md