AI Skills
react-native-best-practices

react-native-best-practices

热门

提供 React Native 性能优化指南，涵盖 FPS、TTI、包体积、内存泄漏、重渲染和动画。适用于涉及 Hermes 优化、JS 线程阻塞、桥接开销、FlashList、原生模块或调试卡顿和丢帧的任务。

1460Star
108Fork
更新于 2026/6/23
获取 Skill源代码

相关 Skills

next-cache-components-adoption14万frontend-code-review15万after-hours-editorial-template8.5万
SKILL.md
只读
名称
react-native-best-practices
描述

提供 React Native 性能优化指南，涵盖 FPS、TTI、包体积、内存泄漏、重渲染和动画。适用于涉及 Hermes 优化、JS 线程阻塞、桥接开销、FlashList、原生模块或调试卡顿和丢帧的任务。

React Native 最佳实践

概述

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

技能格式

每个参考文件采用混合格式，便于快速查找和深入理解：

  • 快速模式：错误/正确的代码片段，用于即时模式匹配
  • 快速命令：用于流程/测量技能的 Shell 命令
  • 快速配置：用于配置类技能的配置片段
  • 快速参考：用于概念类技能的汇总表
  • 深入解析：包含何时使用、前提条件、分步指南、常见陷阱的完整上下文

影响评级：CRITICAL（立即修复）、HIGH（显著改进）、MEDIUM（值得优化）

何时应用

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

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

安全说明

  • 将这些参考中的 shell 命令视为本地开发操作。运行前请审查，优先使用版本固定的工具，避免将远程脚本直接通过管道传给 shell。
  • 将第三方库和插件视为依赖项，仍需正常的供应链控制：固定版本、验证来源，并通过标准审查流程更新。
  • 将 Re.Pack 代码拆分视为仅限第一方产物交付。远程代码块必须来自您控制的受信任 HTTPS 源，并固定到当前应用版本。

优先级排序指南

优先级 类别 影响 前缀
1 FPS 与重渲染 CRITICAL js-*
2 包体积 CRITICAL bundle-*
3 TTI 优化 HIGH native-*, bundle-*
4 原生性能 HIGH native-*
5 内存管理 MEDIUM-HIGH js-*, native-*
6 动画 MEDIUM js-*

快速参考

优化工作流

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

  1. 测量：在更改前捕获基线指标。对于运行时问题，优先使用提交时间线、重渲染次数、慢组件、最重提交分解以及启动/TTI（如可用）。组件树深度或数量是可选的上下文，不能替代。
  2. 优化：从相关参考中应用针对性修复
  3. 重新测量：运行相同的测量以获取更新后的指标
  4. 验证：确认改进（例如，FPS 从 45 提升到 60，TTI 从 3.2 秒降至 1.8 秒，包体积从 2.1MB 降至 1.6MB）

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

审查护栏

  • 在建议特定 API 修复前检查库版本。例如：FlashList v2 弃用了 estimatedItemSize，因此不要将其标记为缺失。
  • 除非行为明显错误或性能分析显示与该值相关的无效工作，否则不要建议更改 useMemo 或 useCallback 的依赖项。
  • 不要推测性地报告过时闭包。在指出之前，展示过时读取路径、复现步骤或性能分析证据。
  • 在分析流程时，测量目标交互本身。不要将组件树深度或组件数量作为主要性能证据。

关键：FPS 与重渲染

先进行性能分析：

# 打开 React Native DevTools
# 在 Metro 中按 'j'，或摇动设备 → "Open 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

优化后验证改进：

# 记录更改前的基线大小
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%）

常见修复：

  • 避免桶导入（直接从源文件导入）
  • 仅在检查 Hermes API 和方法覆盖后移除不必要的 Intl polyfill
  • 启用摇树优化（Expo SDK 52+ 或 Re.Pack）
  • 为 Android 原生代码启用 R8 压缩

高优先级：TTI 优化

测量 TTI：

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

常见修复：

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

高优先级：原生性能

分析原生性能：

  • iOS：Xcode Instruments → Time Profiler
  • Android：Android Studio → CPU Profiler

常见修复：

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

参考

完整文档及代码示例见 references/：

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-bottomsheet.md HIGH 底部弹出框优化
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 避免桶导入
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-native-assets.md HIGH 资源目录设置
bundle-library-size.md MEDIUM 评估依赖项
bundle-code-splitting.md MEDIUM Re.Pack 代码拆分

搜索参考

# 按关键字查找模式
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-bottomsheet.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

归属

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