开发与工程 react-nativeexpoperformance-profilingbundle-optimizationhermesturbo-modulesmemory-leaks

React Native 性能优化指南

用可测量的方法定位并优化 React Native 性能问题。

FollowSkills 评估 · FSRS-2.0
谨慎使用
60/ 100 五分制 3.0 / 5
信任安全18 / 25 · 3.6/5

内容明确要求先测量、审查依赖、避免远程脚本直执行,并对远程代码加载设置 HTTPS、签名清单、固定白名单和失败关闭等防护;未涉及凭证或敏感数据处理。但命令多数未锁定版本,回滚、用户确认和数据流边界未完整说明,因此扣7分。

可靠稳定9 / 20 · 2.3/5

主文件、POWER.md与引用索引大体一致,包含测量—优化—复测—验证流程、版本条件和手动回退;但未提供覆盖关键路径的测试或可执行失败诊断,部分工具和环境前置条件可能不可用。按静态评估上限取9分,扣除可复现性与异常反馈不足。

适用触发11 / 15 · 3.7/5

目标受众、触发场景、问题到引用文件的映射以及 Hermes、Expo、原生项目等适用条件较清楚;但非适用边界、输入输出契约、中文支持和中国大陆网络可达性未声明,部分工作流依赖本地设备及海外服务,因此扣4分。

规范维护10 / 15 · 3.3/5

结构清晰,按 JavaScript、Native、Bundling 分层,提供索引、命令、示例、常见陷阱、MIT 许可证和 Codex 元数据;但版本策略、变更日志、维护责任与更新路径主要依赖仓库外部信息,引用材料的版本适配仍不完整,因此扣5分。

有效结果7 / 15 · 2.3/5

覆盖 FPS、TTI、包体、内存、原生性能和动画,并提供问题路由和可直接使用的命令;但结果依赖项目配置、设备工具和人工分析,缺少已验证的代表性输出。静态上限为7分,扣除结果正确性和收益证据不足。

证据核验5 / 10 · 2.5/5

文件包含具体命令、测量指标、前后对比示例、引用文件和 Callstack 归因,具备一定审计性;但本次未执行,缺少提交的测试套件、CI 覆盖和多来源交叉验证。静态上限取5分,扣除独立复现证据不足。

证据充分度: 评估于 2026年7月20日 审查版本 f6b87e35a35c
使用前请注意
  • 执行 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 或代码分割等针对性修改,并要求重新测量结果。

  1. React Native 开发者在排查界面卡顿、动画掉帧或 FPS 不稳定时,需要基于实际交互进行 profiling。
  2. 团队发现组件重渲染过多时,需要定位慢组件、提交时间线或级联更新,再选择合适的优化方式。
  3. 应用冷启动缓慢时,需要测量 TTI 并检查原生导航、Hermes mmap 和启动阶段的昂贵屏幕。
  4. 移动应用包体积过大时,需要分析 JavaScript bundle、依赖、树摇和 Android 原生代码缩减。
  5. 开发 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。

常见问题

这个技能是否收费?
源材料将仓库标为 MIT 许可证,未说明额外收费。
它会不会在没有性能数据时直接建议 memoization?
不会。指南要求先取得渲染、FPS 或启动指标,并明确反对在缺乏测量证据时随意推荐 memoization、原子状态或编译器改动。
它是否只适用于 Expo?
不是。标签包含 Expo,但内容同时覆盖 React Native、iOS、Android、Hermes、Turbo Modules 和原生 profiling。
使用远程代码分割是否安全?
指南要求远程 chunk 仅来自受控的可信 HTTPS 来源,并绑定当前应用版本;优先使用应用内置 chunk 或签名的 CI 发布清单。

同仓库的其他 Skills

均来自 callstackincubator/agent-skills

开发与工程

React Native 性能与工程实践指南

为 React Native 和 Expo 应用提供可直接参考的性能与平台优化规则。

开发与工程

React Native 棕地迁移助手

帮助原生 iOS 或 Android 应用分阶段接入 React Native 或 Expo。

开发与工程

React Native TV 应用审查指南

帮助开发者系统排查电视端焦点导航、播放、性能与无障碍问题。

开发与工程

React Native 库搭建助手

用标准脚手架创建可发布或应用内使用的 React Native 库。

开发与工程

React Native 升级助手

通过模板差异、依赖迁移和原生配置调整,帮助 React Native 应用安全升级。

开发与工程

React Native 迁移评估

用证据判断 React Native 迁移是否值得推进

开发与工程

React Navigation 导航构建指南

为 React Native 应用提供 React Navigation 7 导航界面的选型与实现参考。

自动化与运维

React Native GitHub Actions 构建产物

在云端构建 React Native 模拟器产物,并通过 GitHub 工具下载。

开发与工程

移动应用 Dogfood 测试技能

用真实设备系统探索移动应用,并生成带截图和复现步骤的缺陷报告。

开发与工程

React Native 测试助手

帮助 AI 编写可靠的 React Native 组件测试

开发与工程

跨平台设备交互助手

让 AI 编程助手能够检查并操作 Apple 与 Android 应用设备。

开发与工程

技能规范校验器

检查 Agent Skill 是否符合规范与 Claude Code 最佳实践。

开发与工程

GitHub PR 工作流助手

用 gh CLI 管理 PR、堆叠分支与代码合并流程。

相关 Skills