React Native最佳实践
概览
React Native应用性能优化指南，涵盖JavaScript/React、原生(iOS/Android)和打包优化。基于Callstack的"React Native优化终极指南"。
技能格式
每个参考文件遵循混合格式，便于快速查找和深入理解：
- 快速模式：不正确/正确的代码片段，用于立即模式匹配
- 快速命令：用于流程/测量技能的Shell命令
- 快速配置：配置片段，专注于设置
- 快速参考：概念技能的摘要表格
- 深入研究：全面背景，包括何时使用、先决条件、逐步操作、常见陷阱
影响评级：CRITICAL（立即修复）、HIGH（显著改进）、MEDIUM（值得优化）
何时应用
参考这些指南时：
- 调试慢/卡顿的UI或动画
- 调查内存泄漏（JS或原生）
- 优化应用启动时间（TTI）
- 减少打包或应用大小
- 编写原生模块（Turbo Modules）
- 分析React Native性能
- 审查React Native代码以优化性能
优先级排序指南
| 优先级 | 类别 | 影响 | 前缀 |
|---|---|---|---|
| 1 | FPS & 重新渲染 | CRITICAL | js-* |
| 2 | 打包大小 | CRITICAL | bundle-* |
| 3 | TTI优化 | HIGH | native-*, bundle-* |
| 4 | 原生性能 | HIGH | native-* |
| 5 | 内存管理 | MEDIUM-HIGH | js-*, native-* |
| 6 | 动画 | MEDIUM | js-* |
快速参考
重要：FPS & 重新渲染
首先进行性能分析：
# 打开React Native DevTools
# 在Metro中按'j'，或摇动设备 → "打开DevTools"
常见修复：
- 将ScrollView替换为FlatList/FlashList用于列表
- 使用React Compiler进行自动记忆化
- 使用原子状态（Jotai/Zustand）减少重新渲染
- 使用
useDeferredValue进行昂贵的计算
重要：打包大小
分析打包：
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
常见修复：
- 避免桶导入（直接从源导入）
- 移除不必要的Intl polyfills（Hermes有原生支持）
- 启用摇树（Expo SDK 52+或Re.Pack）
- 启用R8以缩小Android原生代码
高：TTI优化
测量TTI：
- 使用
react-native-performance进行标记 - 仅测量冷启动（排除温/热/预热）
常见修复：
- 在Android上禁用JS打包压缩（启用Hermes mmap）
- 使用原生导航（react-native-screens）
- 使用
InteractionManager推迟非关键工作
高：原生性能
分析原生：
- iOS: Xcode Instruments → 时间分析器
- Android: Android Studio → CPU分析器
常见修复：
- 使用后台线程进行重的原生工作
- 优先选择异步而不是同步的Turbo Module方法
- 使用C++进行跨平台性能关键代码
参考资料
带有代码示例的完整文档在references/：