问题所在：你的React Native应用感觉慢，但不知道原因
你构建了一个能正常工作的React Native应用，但用户体验不佳。用户抱怨滚动列表时卡顿，屏幕切换不流畅，或者应用启动时间太长。你尝试过在一些地方添加useMemo和useCallback，也许用React.memo包装了几个组件，但性能并没有明显改善。应用仍然卡顿，你不确定这些优化是否真的有帮助，还是只是增加了复杂性。
这是一个常见的困扰。React Native的桥接架构和JavaScript线程可能产生不明显的性能瓶颈。问题通常在于开发者采用“散弹枪式优化”——随机添加记忆化、虚拟化列表或调整动画——而没有先了解真正的瓶颈在哪里。这种方法浪费时间，可能引入错误，而且可能无法解决根本原因。
一个好的解决方案应该从测量开始。你需要分析应用以找到真正的性能问题所在——无论是过多的重新渲染、JS线程上的繁重计算，还是低效的原生模块调用。只有识别出主要问题后，才应该应用针对性的修复。这个过程应该是系统性的：测量、修复一个问题、重新测量，并验证修复是否确实有帮助而没有在其他地方引起回归。
介绍一种系统性的React Native性能优化方法
如果你面临这种性能难题，可以遵循一种结构化的方法。argent-react-native-optimization技能提供了一个诊断和修复React Native性能问题的框架。它不是一个能自动让你的应用变快的魔法工具；相反，它是一套指南和流程，确保你以正确的顺序优化正确的事情。
核心思想是避免猜测。在更改任何代码之前，先进行性能分析。在分析之前，先进行快速的代码检查以捕获明显的机械问题。这种分层方法节省时间，并防止你追逐幻影。
这个技能如何工作：四阶段流程
该技能概述了一个清晰的流程，你可以将其调整到自己的工作流程中。它设计得既彻底又高效，使用子代理处理可并行化的工作，并将你的主要精力集中在影响最大的问题上。
第一阶段：代码检查以捕获确定性问题
首先，捕取容易解决的问题。使用全面的React Native性能规则集运行ESLint。这将标记出以下问题：
- 导致重新渲染的内联样式
- 列表中缺少键
- 增加包大小的未使用导入
- 效果中潜在的内存泄漏
该技能建议并行调度子代理来修复这些问题——每个文件一个子代理。这是一个机械步骤，不需要深入理解应用逻辑，只需应用已知的最佳实践。
第二阶段：语义检查以处理需要判断的问题
接下来，审查需要人工判断的领域。这包括：
- 记忆化：你是否在记忆化正确的东西？过度记忆化可能和记忆化不足一样糟糕。
- 列表渲染：你是否正确使用了
FlatList或SectionList？是否提供了稳定的键？ - 动画：你是否在可能的情况下使用了原生驱动？动画是否不必要地在JS线程上运行？
- 状态管理：状态是否在组件树中位置过高，导致不必要的重新渲染？
该技能为此阶段提供了一个检查清单。同样，你可以使用子代理并行审查不同领域。
第三阶段：视觉性能分析以找到真正的瓶颈
这是测量发挥作用的地方。该技能与性能分析工具集成，在你与应用交互时捕获性能数据。过程如下：
- 开始性能分析（同时进行React和原生性能分析）。
- 执行关键用户流程——导航屏幕、滚动列表、触发动画。
- 分析结果以找到重新渲染最多的组件、计算最繁重的组件或帧时间最长的组件。
- 将这些发现与第一和第二阶段发现的问题进行交叉参考。
- 首先修复影响最大的问题。每次修复后重新分析以验证改进。
这里有一个关键规则：架构更改每个周期只修复一个问题。如果你正在更改状态管理方式或重构组件，做一个更改，然后重新测量。对于机械修复（如向列表添加键），你可以批量处理并重新分析一次。
第四阶段：验证没有回归
修复问题后，必须验证你没有引入新问题。导航应用范围内的每个屏幕，检查崩溃、红/黄错误屏幕和运行时错误。使用调试器记录任何问题。同时，检查性能回归——也许你减少了一个屏幕的重新渲染，但在另一个屏幕引起了卡顿。
何时使用这种方法
这种系统方法在以下情况下最有用：
- 你的应用感觉慢，但不知道具体原因。
- 你尝试过随机优化但没有看到改善。
- 你需要为特定指标优化（例如启动时间、滚动性能）。
- 你在处理一个大型代码库，问题可能出现在任何地方。
在以下情况下不太必要：
- 你有一个非常简单的应用，只有几个屏幕。
- 你已经有详细的性能指标并确切知道要修复什么。
- 性能问题明显在一个特定的、隔离的组件中。
使用前需要检查什么
在采用这种方法之前，请考虑：
- 应用的复杂性：对于简单的应用，完整的四阶段流程可能过度。你可能只需要第三阶段（性能分析）来找到问题。
- 团队的工作流程：这种方法与可以运行代码检查、性能分析和验证步骤的AI代理配合良好。如果你手动完成所有工作，需要将子代理概念调整到自己的流程中。
- 工具要求：该技能假设你可以访问性能分析工具，并且可以在设备或模拟器上运行应用。确保你有必要的设置。
- React编译器意识：该技能包含关于React编译器的特定规则。如果你的应用使用React编译器，需要小心手动记忆化——只有在确认编译器在特定组件上退出时才应用它。
能力边界和最佳用例
该技能是一个框架，不是魔法子弹。它不会自动修复你的应用。它提供了一种结构化的方式来：
- 通过性能分析找到真正的瓶颈。
- 避免在非问题上浪费时间。
- 确保修复得到验证且不会引起回归。
最佳用例：
- 启动优化：分析初始渲染和模块加载。
- 滚动性能：找到在滚动过程中重新渲染过于频繁的组件。
- 导航卡顿：识别屏幕转换期间的繁重计算。
- 内存泄漏：检测未正确清理效果的组件。
何时不使用：
- 如果你需要针对已知问题的快速一次性修复（例如，向特定列表添加键）。
- 如果应用的性能已经可以接受，你只是进行微小调整。
安全性和仓库信号
该技能是Software Mansion的Argent仓库的一部分，拥有超过1800个星标，采用Apache-2.0许可证。安全级别标记为低，意味着它专注于性能优化，不处理敏感数据或系统修改。主题包括“agentic”、“android”、“ios”和“react-native”，表明它是为具有AI代理集成的跨平台React Native应用设计的。
开始使用
如果你决定尝试这种方法，从第一阶段（代码检查）开始清理明显问题。然后进入第三阶段（性能分析）以找到真正的瓶颈。你不必完全遵循该流程——根据需要进行调整。关键要点是：优化前先测量，修复后要验证。
要深入了解该方法和工具，请访问argent-react-native-optimization技能页面。