React Native 性能优化指南
用可测量的方法定位并优化 React Native 性能问题。
内容明确要求先测量、审查依赖、避免远程脚本直执行,并对远程代码加载设置 HTTPS、签名清单、固定白名单和失败关闭等防护;未涉及凭证或敏感数据处理。但命令多数未锁定版本,回滚、用户确认和数据流边界未完整说明,因此扣7分。
主文件、POWER.md与引用索引大体一致,包含测量—优化—复测—验证流程、版本条件和手动回退;但未提供覆盖关键路径的测试或可执行失败诊断,部分工具和环境前置条件可能不可用。按静态评估上限取9分,扣除可复现性与异常反馈不足。
目标受众、触发场景、问题到引用文件的映射以及 Hermes、Expo、原生项目等适用条件较清楚;但非适用边界、输入输出契约、中文支持和中国大陆网络可达性未声明,部分工作流依赖本地设备及海外服务,因此扣4分。
结构清晰,按 JavaScript、Native、Bundling 分层,提供索引、命令、示例、常见陷阱、MIT 许可证和 Codex 元数据;但版本策略、变更日志、维护责任与更新路径主要依赖仓库外部信息,引用材料的版本适配仍不完整,因此扣5分。
覆盖 FPS、TTI、包体、内存、原生性能和动画,并提供问题路由和可直接使用的命令;但结果依赖项目配置、设备工具和人工分析,缺少已验证的代表性输出。静态上限为7分,扣除结果正确性和收益证据不足。
文件包含具体命令、测量指标、前后对比示例、引用文件和 Callstack 归因,具备一定审计性;但本次未执行,缺少提交的测试套件、CI 覆盖和多来源交叉验证。静态上限取5分,扣除独立复现证据不足。
- 执行 npx、Gradle、xcodebuild、bundle-phobia 或远程分块加载前,应确认版本、来源、网络和项目配置;不要把示例中的性能数字视为普遍保证。
- 远程 JavaScript 分块涉及高风险代码执行边界,必须验证签名清单、固定来源、版本绑定和失败关闭行为。
- 引用文件未在本次静态材料中全部展开,关键建议应结合目标项目的 React Native、Expo、Hermes 和 Re.Pack 版本复核。
这个 Skill 能做什么,适合哪些场景?
该技能为 React Native 应用提供 JavaScript/React、原生 iOS/Android 和打包优化指南。它覆盖 FPS、重渲染、启动时间、包体积、内存泄漏、原生模块和动画卡顿。核心流程是“测量 → 优化 → 重新测量 → 验证”,并按影响优先级组织建议。内容基于 Callstack 的《The Ultimate Guide to React Native Optimization》。
指导助手先收集性能基线,再使用 agent-device React DevTools、React Native DevTools、Xcode Instruments、Android Studio CPU Profiler、react-native-performance、React Native bundle 和 source-map-explorer 等工具进行分析;随后根据证据提出列表虚拟化、状态拆分、React Compiler、Hermes、Turbo Module、R8 或代码分割等针对性修改,并要求重新测量结果。
- React Native 开发者在排查界面卡顿、动画掉帧或 FPS 不稳定时,需要基于实际交互进行 profiling。
- 团队发现组件重渲染过多时,需要定位慢组件、提交时间线或级联更新,再选择合适的优化方式。
- 应用冷启动缓慢时,需要测量 TTI 并检查原生导航、Hermes mmap 和启动阶段的昂贵屏幕。
- 移动应用包体积过大时,需要分析 JavaScript bundle、依赖、树摇和 Android 原生代码缩减。
- 开发 Turbo Module 或其他原生代码时,需要评估线程、同步调用、内存和跨平台性能。
这个 Skill 有哪些优点和局限?
- 覆盖 JavaScript、原生性能和打包优化三个主要层面。
- 强调先测量再修改,包含具体 profiling、bundle 分析和验证命令。
- 提供按优先级和问题类型查找参考文档的路由。
- 包含 Hermes、FlashList、Turbo Modules、React Compiler、R8 和内存管理等实用主题。
- 它是指导性技能,不是自动执行性能修复的工具。
- 完整使用依赖 React Native 项目及相应命令行或原生 profiling 工具。
- 源材料没有提供测试套件或跨平台实测结果。
- 部分建议受 React Native、Expo、FlashList 等具体版本影响,需要先核对版本。
如何安装这个 Skill?
使用仓库 README 中的独立技能安装命令:$skill-installer install react-native-best-practices from callstackincubator/agent-skills。也可以克隆仓库后,将 skills/react-native-best-practices/ 放入项目的 .codex/skills/ 或用户级 ~/.codex/skills/ 目录。安装后重启 Codex。
如何使用这个 Skill?
在支持技能调用的客户端中提及 $react-native-best-practices,或输入类似“请先用 React DevTools profiling 分析这个 React Native 列表的掉帧问题,再根据测量结果优化并验证 FPS”的请求。若 agent-device 不可用,按技能说明改用 Metro 的 React Native DevTools 或 Dev Menu。