用途
本技能提供 React Native 应用的性能优化指南，覆盖 JavaScript/React、原生（iOS/Android）以及打包（bundling）三个层面的优化。内容基于 Callstack 的《The Ultimate Guide to React Native Optimization》。
主要能力
指南按优先级排序，分为以下类别：
- FPS 与重渲染（CRITICAL，前缀 js-*）
- 包体积（CRITICAL，前缀 bundle-*）
- TTI 优化（HIGH，前缀 native-、bundle-）
- 原生性能（HIGH，前缀 native-*）
- 内存管理（MEDIUM-HIGH，前缀 js-、native-）
- 动画（MEDIUM，前缀 js-*）
每个参考文件采用混合格式，便于快速查找与深入理解：
- Quick Pattern：错误/正确代码片段，用于即时模式匹配
- Quick Command：用于流程/测量技能的 Shell 命令
- Quick Config：面向配置类技能的配置片段
- Quick Reference：面向概念类技能的汇总表
- Deep Dive：包含 When to Use、Prerequisites、Step-by-Step、Common Pitfalls 的完整上下文
- 影响评级：CRITICAL（立即修复）、HIGH（显著改进）、MEDIUM（值得优化）
使用方式
何时应用
在以下情况参考这些指南：
- 调试缓慢/卡顿的 UI 或动画
- 排查内存泄漏（JS 或原生）
- 优化应用启动时间（TTI）
- 缩减包体或应用体积
- 编写原生模块（Turbo Modules）
- 剖析 React Native 性能
- 审查 React Native 代码的性能
关键实践示例
FPS 与重渲染（CRITICAL）：
先剖析：
# Open React Native DevTools
# Press 'j' in Metro, or shake device → "Open DevTools"
常见修复：
- 列表用 FlatList/FlashList 替换 ScrollView
- 使用 React Compiler 自动记忆化
- 使用原子状态（Jotai/Zustand）减少重渲染
- 对昂贵计算使用 useDeferredValue
包体积（CRITICAL）：
分析包体：
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
常见修复：
- 避免 barrel imports（直接从源文件导入）
- 移除不必要的 Intl polyfills（Hermes 已原生支持）
- 启用 tree shaking（Expo SDK 52+ 或 Re.Pack）
- 为 Android 原生代码启用 R8 收缩
TTI 优化（HIGH）：
测量 TTI：
- 使用 react-native-performance 打标记
- 只测量冷启动（排除 warm/hot/prewarm）
常见修复：
- 在 Android 上禁用 JS bundle 压缩（启用 Hermes mmap）
- 使用原生导航（react-native-screens）
- 在导航到常用且昂贵的屏幕前预加载
原生性能（HIGH）：
剖析原生：
- iOS：Xcode Instruments → Time Profiler
- Android：Android Studio → CPU Profiler
常见修复：
- 对繁重原生工作使用后台线程
- 优先使用异步而非同步的 Turbo Module 方法
- 对跨平台性能关键代码使用 C++
参考文件
JavaScript/React（js-*）：
- js-lists-flatlist-flashlist.md（CRITICAL）：用虚拟化列表替换 ScrollView
- js-profile-react.md（MEDIUM）：React DevTools 剖析
- js-measure-fps.md（HIGH）：FPS 监控与测量
- js-memory-leaks.md（MEDIUM）：JS 内存泄漏排查
- js-atomic-state.md（HIGH）：Jotai/Zustand 模式
- js-concurrent-react.md（HIGH）：useDeferredValue、useTransition
- js-react-compiler.md（HIGH）：自动记忆化
- js-animations-reanimated.md（MEDIUM）：Reanimated worklets
- js-uncontrolled-components.md（HIGH）：TextInput 优化
原生（native-*）：
- native-turbo-modules.md（HIGH）：构建快速原生模块
- native-sdks-over-polyfills.md（HIGH）：原生库 vs JS 库
- native-measure-tti.md（HIGH）：TTI 测量设置
- native-threading-model.md（HIGH）：Turbo Module 线程
- native-profiling.md（MEDIUM）：Xcode/Android Studio 剖析
- native-platform-setup.md（MEDIUM）：iOS/Android 工具指南
- native-view-flattening.md（MEDIUM）：视图层级调试
- native-memory-patterns.md（MEDIUM）：C++/Swift/Kotlin 内存
- native-memory-leaks.md（MEDIUM）：原生内存泄漏排查
- native-android-16kb-alignment.md（CRITICAL）：面向 Google Play 的第三方库对齐
打包（bundle-*）：
- bundle-barrel-exports.md（CRITICAL）：避免 barrel imports
- bundle-analyze-js.md（CRITICAL）：JS 包体可视化
- bundle-tree-shaking.md（HIGH）：死代码消除
- bundle-analyze-app.md（HIGH）：应用体积分析
- bundle-r8-android.md（HIGH）：Android 代码收缩
- bundle-hermes-mmap.md（HIGH）：禁用 bundle 压缩
- bundle-native-assets.md（HIGH）：资源目录设置
- bundle-library-size.md（MEDIUM）：评估依赖
- bundle-code-splitting.md（MEDIUM）：Re.Pack 代码分割
搜索参考文件
# Find patterns by keyword
grep -l "reanimated" references/
grep -l "flatlist" references/
grep -l "memory" references/
grep -l "profil" references/
grep -l "tti" references/
grep -l "bundle" references/
问题 → 技能映射
- 应用感觉缓慢/卡顿：js-measure-fps.md → js-profile-react.md
- 重渲染过多：js-profile-react.md → js-react-compiler.md
- 启动缓慢（TTI）：native-measure-tti.md → bundle-analyze-js.md
- 应用体积大：bundle-analyze-app.md → bundle-r8-android.md
- 内存增长：js-memory-leaks.md 或 native-memory-leaks.md
- 动画掉帧：js-animations-reanimated.md
- 列表滚动卡顿：js-lists-flatlist-flashlist.md
- TextInput 延迟：js-uncontrolled-components.md
- 原生模块慢：native-turbo-modules.md → native-threading-model.md
- 原生库对齐问题：native-android-16kb-alignment.md
适用场景
适用于 React Native 应用的性能调试、优化与代码审查，尤其是涉及 FPS、TTI、包体积、内存泄漏、重渲染与动画等问题的任务。
限制
资料未提供该技能的具体安装方式、收费模式、支持平台版本范围等信息，暂未提供。