用途
该技能是一份面向 Expo React Native 应用的社区最佳实践与性能优化指南,适用于在编写、审查或重构 Expo React Native 代码时参考,以确保代码符合性能优化要求,并可用于指导自动化重构与代码生成。
主要能力
技能包含 54 条规则,分布在 9 个类别中,并按影响程度划分优先级:
- 启动时间优化(CRITICAL,前缀 launch-):如控制启动屏可见性、预加载关键资源、使用 Hermes 引擎、延迟非关键初始化、启用新架构、最小化根组件导入。
- 包体积优化(CRITICAL,前缀 bundle-):如避免 barrel 文件导入、分析包体积、移除未使用依赖、按架构拆分 APK、启用 ProGuard、优化字体子集、使用轻量替代库。
- 列表虚拟化(HIGH,前缀 list-):如使用 FlashList 替代 FlatList、提供准确的 estimatedItemSize、避免 renderItem 内联函数、提供 getItemLayout、避免在 FlashList 项内使用 key 属性、配置批量渲染、记忆化列表项组件。
- 图片优化(HIGH,前缀 image-):如使用 expo-image、按显示尺寸调整图片、使用 WebP 格式、使用 BlurHash 或 ThumbHash 占位符、预加载首屏关键图片、懒加载屏幕外图片。
- 数据获取模式(HIGH,前缀 data-):如并行获取独立数据、去重并发请求、组件卸载时中止请求、高效分页策略、合理缓存策略、乐观更新。
- 导航性能(MEDIUM-HIGH,前缀 nav-):如使用原生栈导航器、卸载非活动标签页、导航前预取数据、优化屏幕选项、避免深层嵌套导航器。
- 重渲染预防(MEDIUM,前缀 rerender-):如使用 React.memo 记忆化昂贵组件、使用 useCallback 稳定回调、使用 useMemo 记忆化昂贵计算、避免过度使用 Context、拆分组件状态、启用 React Compiler、避免 JSX 中的匿名组件。
- 动画性能(MEDIUM,前缀 anim-):如使用 Reanimated 实现 UI 线程动画、为 Animated API 启用 useNativeDriver、优先使用 transform 而非布局动画、结合 Gesture Handler 与 Reanimated、动画期间延迟重任务。
- 内存管理(LOW-MEDIUM,前缀 mem-):如清理 useEffect 中的订阅与定时器、卸载时中止 fetch 请求、避免闭包内存泄漏、释放不再需要的大资源、使用开发工具分析内存。
使用方式
在编写新的 Expo React Native 组件、优化应用启动与可交互时间、实现列表/图片/动画、减小包体积与内存占用、审查移动端性能问题时参考这些指南。可阅读各参考文件获取详细说明与代码示例,包括章节定义、规则模板以及示例规则(如 launch-splash-screen-control、list-use-flashlist)。完整编译文档见 AGENTS.md。
适用场景
适用于 Expo React Native 项目的开发、代码审查与重构阶段,尤其关注启动性能、包体积、列表与图片渲染、数据获取、导航、重渲染、动画及内存等移动端性能维度。
限制
资料未提供该技能的具体安装命令、运行环境要求、收费或价格信息、平台支持范围及实际效果数据,这些内容暂未提供。