React Native 最佳实践

概述

React Native 应用程序的性能优化指南，涵盖 JavaScript/React、原生（iOS/Android）和打包优化。基于 Callstack 的“React Native 优化终极指南”。

技能格式

每个参考文件都遵循混合格式，以便快速查阅和深入理解：

• 快速模式：错误/正确的代码片段，用于即时模式匹配
• 快速命令：用于进程/测量技能的 Shell 命令
• 快速配置：用于以设置为中心的技能的配置片段
• 快速参考：用于概念性技能的摘要表格
• 深入探讨：包含何时使用、先决条件、分步指南、常见陷阱的完整上下文

影响评级：严重（立即修复）、高（显著改进）、中（值得优化的改进）

何时应用

在以下情况下参考这些指南：

• 调试缓慢/卡顿的 UI 或动画
• 调查内存泄漏（JS 或原生）
• 优化应用启动时间（TTI）
• 减少 Bundle 或应用大小
• 编写原生模块（Turbo 模块）
• 分析 React Native 性能
• 审查 React Native 代码的性能

按优先级排序的指南

快速参考

优化工作流程

对于任何性能问题，请遵循此循环：测量 → 优化 → 重新测量 → 验证

1. 测量：在更改前捕获基线指标（FPS、TTI、Bundle 大小）
2. 优化：应用相关参考中的针对性修复
3. 重新测量：运行相同的测量以获取更新后的指标
4. 验证：确认改进（例如，FPS 从 45 到 60，TTI 从 3.2 秒到 1.8 秒，Bundle 从 2.1MB 到 1.6MB）

如果指标没有改善，请回退并尝试下一个建议的修复。

严重：FPS 与重渲染

首先进行分析：

# 打开 React Native 开发者工具
# 在 Metro 中按 'j'，或摇晃设备 → "打开开发者工具"

常见修复：

• 对列表使用 FlatList/FlashList 替换 ScrollView
• 使用 React 编译器实现自动记忆化
• 使用原子状态（Jotai/Zustand）减少重渲染
• 对昂贵计算使用 useDeferredValue

严重：Bundle 大小

分析 Bundle：

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

优化后验证改进：

# 在更改前记录基线大小
ls -lh output.js  # 例如，之前：2.1 MB

# 应用修复后，重新打包并比较
npx react-native bundle --entry-file index.js --bundle-output output.js \
  --platform ios --dev false --minify true
ls -lh output.js  # 例如，之后：1.6 MB  (减少了 24%)

常见修复：

• 避免使用桶模块导入（直接从源文件导入）
• 移除不必要的 Intl polyfill（Hermes 有原生支持）
• 启用摇树优化（Expo SDK 52+ 或 Re.Pack）
• 为 Android 原生代码缩小启用 R8

高：TTI 优化

测量 TTI：

• 使用 react-native-performance 添加标记点
• 仅测量冷启动（排除温启动/热启动/预启动）

常见修复：

• 在 Android 上禁用 JS Bundle 压缩（启用 Hermes mmap）
• 使用原生导航（react-native-screens）
• 在导航到昂贵屏幕之前预加载它们

高：原生性能

分析原生层：

• iOS：Xcode 工具 → 时间分析器
• Android：Android Studio → CPU 分析器

常见修复：

• 对繁重的原生工作使用后台线程
• 优先使用异步而非同步的 Turbo 模块方法
• 对跨平台的性能关键代码使用 C++

参考文档

包含代码示例的完整文档位于 references/：

JavaScript/React (js-*)

原生 (native-*)

打包 (bundle-*)

搜索参考

# 按关键字查找模式
grep -l "reanimated" references/
grep -l "flatlist" references/
grep -l "memory" references/
grep -l "profil" references/
grep -l "tti" references/
grep -l "bundle" references/

问题 → 技能映射

致谢

基于 Callstack 的“React Native 优化终极指南”。