ExpoReactNative性能优化技能Skill expo-react-native-performance

---

名称: expo-react-native性能优化 描述: Expo React Native性能优化指南。此技能应用于编写、审查或重构Expo React Native代码时，以确保最优性能模式。触发于涉及React Native组件、列表、动画、图像或性能改进的任务。

Expo React Native性能最佳实践

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

何时应用

参考以下指南时：

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

规则类别按优先级排序

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

快速参考

1. 应用启动与包大小（关键）

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

2. 列表虚拟化（关键）

• 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. 重渲染优化（高）

• rerender-use-memo-expensive - 记忆昂贵计算
• rerender-use-callback-handlers - 使用useCallback稳定回调函数
• rerender-functional-setstate - 使用功能性setState更新
• rerender-lazy-state-init - 使用懒惰状态初始化
• rerender-split-context - 按更新频率拆分上下文
• rerender-derive-state - 派生状态而非同步

4. 动画性能（高）

• anim-use-native-driver - 为动画启用原生驱动
• anim-use-reanimated - 使用Reanimated处理复杂动画
• anim-layout-animation - 使用LayoutAnimation进行简单过渡
• anim-transform-not-dimensions - 动画变换而非尺寸
• 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 - 在卸载时中止获取请求
• 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	版本和参考信息