用途:为 React Native 应用提供性能优化参考,覆盖 JavaScript/React、原生(iOS/Android)与打包三个层面。适用场景包括排查卡顿 UI 或动画、调查 JS/原生内存泄漏、优化启动时间(TTI)、缩减包体积与应用体积、编写 Turbo Modules 原生模块、性能剖析,以及代码性能审查。
组织方式:每个参考文件采用混合格式,包含快速模式(错误/正确代码片段)、快速命令(进程与测量命令)、快速配置或参考表,以及深潜部分(适用时机、前置条件、分步步骤、常见陷阱)。影响评级分为 CRITICAL(立即修复)、HIGH(显著改进)、MEDIUM(值得优化)。
优先级:1. FPS 与重渲染(CRITICAL,前缀 js-);2. 包体积(CRITICAL,bundle-);3. TTI 优化(HIGH,native-、bundle-);4. 原生性能(HIGH,native-);5. 内存管理(MEDIUM-HIGH,js-、native-);6. 动画(MEDIUM,js-)。
工作流:测量 → 优化 → 重新测量 → 验证。先采集基线指标,再应用对应修复,用相同方法复测并确认改进,未改善则回退并尝试下一方案。重渲染常先剖析,可用 React Native DevTools(Metro 中按 j 或摇晃设备选择 Open DevTools)。包体积可用命令分析:npx react-native bundle --entry-file index.js --bundle-output output.js --platform ios --sourcemap-output output.js.map --dev false --minify true,再用 npx source-map-explorer output.js --no-border-checks。TTI 建议使用 react-native-performance 打点,且只测冷启动。原生剖析:iOS 用 Xcode Instruments 的 Time Profiler,Android 用 Android Studio 的 CPU Profiler。
常见修复方向:列表用 FlatList/FlashList 替代 ScrollView;用 React Compiler 自动记忆化;用 Jotai/Zustand 等原子状态减少重渲染;用 useDeferredValue 处理昂贵计算;直接按源导入避免 barrel 导入;在确认 Hermes API 与方法覆盖后移除多余 Intl polyfill;启用 tree shaking 与 Android R8;Android 禁用 JS bundle 压缩以启用 Hermes mmap;用 react-native-screens 原生导航;预加载常用重页面。
审查护栏:提修复前先确认库版本,例如 FlashList v2 已弃用 estimatedItemSize,不应将其标记为缺失;除非行为明显错误或剖析显示相关浪费,不建议改动 useMemo/useCallback 依赖;不要凭猜测报告陈旧闭包,需给出陈旧读取路径、复现或剖析证据;剖析某流程时应测量目标交互本身,不以组件树深度或数量作为主要性能证据。
安全说明:参考中的 shell 命令按本地开发者操作对待,运行前先审查,优先使用固定版本工具,避免把远程脚本直接管道到 shell;第三方库与插件仍需常规供应链管控(锁定版本、验证来源、按标准流程更新);Re.Pack 代码分割仅作为第一方产物交付,远程 chunk 必须来自你控制的受信任 HTTPS 源并绑定当前应用版本。
搜索参考可用 grep -l 在 references/ 中按关键词查找,如 reanimated、flatlist、memory、profil、tti、bundle。问题到技能映射示例:应用卡顿从 js-measure-fps.md 与 js-profile-react.md 入手;启动慢从 native-measure-tti.md 与 bundle-analyze-js.md 入手;体积大从 bundle-analyze-app.md 与 bundle-r8-android.md 入手等。其他未尽细节暂未提供。