react-native-best-practices by callstackincubator/agent-skills
npx skills add https://github.com/callstackincubator/agent-skills --skill react-native-best-practicesReact Native 应用程序性能优化指南,涵盖 JavaScript/React、原生(iOS/Android)和打包优化。基于 Callstack 的《React Native 优化终极指南》。
每个参考文件都遵循混合格式,便于快速查找和深入理解:
影响评级:关键(立即修复)、高(显著改进)、中(值得进行的优化)
在以下情况下参考这些指南:
| 优先级 | 类别 | 影响 | 前缀 |
|---|---|---|---|
| 1 | FPS 与重新渲染 | 关键 |
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
js-* |
| 2 | 包体积 | 关键 | bundle-* |
| 3 | TTI 优化 | 高 | native-*, bundle-* |
| 4 | 原生性能 | 高 | native-* |
| 5 | 内存管理 | 中-高 | js-*, native-* |
| 6 | 动画 | 中 | js-* |
针对任何性能问题,遵循此循环:测量 → 优化 → 重新测量 → 验证
如果指标没有改善,请回退并尝试下一个建议的修复。
首先进行性能分析:
# 打开 React Native DevTools
# 在 Metro 中按 'j',或摇动设备 → "Open DevTools"
常见修复方法:
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%)
常见修复方法:
测量 TTI:
react-native-performance 获取标记常见修复方法:
分析原生性能:
常见修复方法:
包含代码示例的完整文档位于 references/:
js-*)| 文件 | 影响 | 描述 |
|---|---|---|
| js-lists-flatlist-flashlist.md | 关键 | 用虚拟化列表替换 ScrollView |
| js-profile-react.md | 中 | React DevTools 性能分析 |
| js-measure-fps.md | 高 | FPS 监控与测量 |
| js-memory-leaks.md | 中 | JS 内存泄漏排查 |
| js-atomic-state.md | 高 | Jotai/Zustand 模式 |
| js-concurrent-react.md | 高 | useDeferredValue, useTransition |
| js-react-compiler.md | 高 | 自动记忆化 |
| js-animations-reanimated.md | 中 | Reanimated 工作器 |
| js-uncontrolled-components.md | 高 | TextInput 优化 |
native-*)| 文件 | 影响 | 描述 |
|---|---|---|
| native-turbo-modules.md | 高 | 构建快速的原生模块 |
| native-sdks-over-polyfills.md | 高 | 原生库与 JS 库对比 |
| native-measure-tti.md | 高 | TTI 测量设置 |
| native-threading-model.md | 高 | Turbo Module 线程 |
| native-profiling.md | 中 | Xcode/Android Studio 性能分析 |
| native-platform-setup.md | 中 | iOS/Android 工具指南 |
| native-view-flattening.md | 中 | 视图层次结构调试 |
| native-memory-patterns.md | 中 | C++/Swift/Kotlin 内存 |
| native-memory-leaks.md | 中 | 原生内存泄漏排查 |
| native-android-16kb-alignment.md | 关键 | 第三方库对齐以满足 Google Play 要求 |
bundle-*)| 文件 | 影响 | 描述 |
|---|---|---|
| bundle-barrel-exports.md | 关键 | 避免桶导入 |
| bundle-analyze-js.md | 关键 | JS 包可视化 |
| bundle-tree-shaking.md | 高 | 死代码消除 |
| bundle-analyze-app.md | 高 | 应用体积分析 |
| bundle-r8-android.md | 高 | Android 代码压缩 |
| bundle-hermes-mmap.md | 高 | 禁用包压缩 |
| bundle-native-assets.md | 高 | 资源目录设置 |
| bundle-library-size.md | 中 | 评估依赖项 |
| bundle-code-splitting.md | 中 | 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-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 优化终极指南》。
每周安装量
6.9K
代码仓库
GitHub 星标数
994
首次出现
2026年1月19日
安全审计
安装于
opencode5.0K
gemini-cli4.8K
codex4.7K
claude-code4.6K
cursor4.5K
github-copilot4.3K
Performance optimization guide for React Native applications, covering JavaScript/React, Native (iOS/Android), and bundling optimizations. Based on Callstack's "Ultimate Guide to React Native Optimization".
Each reference file follows a hybrid format for fast lookup and deep understanding:
Impact ratings : CRITICAL (fix immediately), HIGH (significant improvement), MEDIUM (worthwhile optimization)
Reference these guidelines when:
| Priority | Category | Impact | Prefix |
|---|---|---|---|
| 1 | FPS & Re-renders | CRITICAL | js-* |
| 2 | Bundle Size | CRITICAL | bundle-* |
| 3 | TTI Optimization | HIGH | native-*, bundle-* |
| 4 | Native Performance | HIGH | native-* |
| 5 | Memory Management | MEDIUM-HIGH | js-*, |
Follow this cycle for any performance issue: Measure → Optimize → Re-measure → Validate
If metrics did not improve, revert and try the next suggested fix.
Profile first:
# Open React Native DevTools
# Press 'j' in Metro, or shake device → "Open DevTools"
Common fixes:
useDeferredValue for expensive computationsAnalyze 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
Verify improvement after optimization:
# Record baseline size before changes
ls -lh output.js # e.g., Before: 2.1 MB
# After applying fixes, re-bundle and compare
npx react-native bundle --entry-file index.js --bundle-output output.js \
--platform ios --dev false --minify true
ls -lh output.js # e.g., After: 1.6 MB (24% reduction)
Common fixes:
Measure TTI:
react-native-performance for markersCommon fixes:
Profile native:
Common fixes:
Full documentation with code examples in references/:
js-*)| File | Impact | Description |
|---|---|---|
| js-lists-flatlist-flashlist.md | CRITICAL | Replace ScrollView with virtualized lists |
| js-profile-react.md | MEDIUM | React DevTools profiling |
| js-measure-fps.md | HIGH | FPS monitoring and measurement |
| js-memory-leaks.md | MEDIUM | JS memory leak hunting |
| js-atomic-state.md | HIGH | Jotai/Zustand patterns |
native-*)| File | Impact | Description |
|---|---|---|
| native-turbo-modules.md | HIGH | Building fast native modules |
| native-sdks-over-polyfills.md | HIGH | Native vs JS libraries |
| native-measure-tti.md | HIGH | TTI measurement setup |
| native-threading-model.md | HIGH | Turbo Module threads |
| native-profiling.md | MEDIUM | Xcode/Android Studio profiling |
bundle-*)| File | Impact | Description |
|---|---|---|
| bundle-barrel-exports.md | CRITICAL | Avoid barrel imports |
| bundle-analyze-js.md | CRITICAL | JS bundle visualization |
| bundle-tree-shaking.md | HIGH | Dead code elimination |
| bundle-analyze-app.md | HIGH | App size analysis |
| bundle-r8-android.md | HIGH | Android code shrinking |
# 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/
| Problem | Start With |
|---|---|
| App feels slow/janky | js-measure-fps.md → js-profile-react.md |
| Too many re-renders | js-profile-react.md → js-react-compiler.md |
| Slow startup (TTI) | native-measure-tti.md → bundle-analyze-js.md |
| Large app size | bundle-analyze-app.md → bundle-r8-android.md |
| Memory growing |
Based on "The Ultimate Guide to React Native Optimization" by Callstack.
Weekly Installs
6.9K
Repository
GitHub Stars
994
First Seen
Jan 19, 2026
Security Audits
Gen Agent Trust HubWarnSocketPassSnykPass
Installed on
opencode5.0K
gemini-cli4.8K
codex4.7K
claude-code4.6K
cursor4.5K
github-copilot4.3K
97,400 周安装
native-*| 6 | Animations | MEDIUM | js-* |
| HIGH |
| useDeferredValue, useTransition |
| js-react-compiler.md | HIGH | Automatic memoization |
| js-animations-reanimated.md | MEDIUM | Reanimated worklets |
| js-uncontrolled-components.md | HIGH | TextInput optimization |
| MEDIUM |
| iOS/Android tooling guide |
| native-view-flattening.md | MEDIUM | View hierarchy debugging |
| native-memory-patterns.md | MEDIUM | C++/Swift/Kotlin memory |
| native-memory-leaks.md | MEDIUM | Native memory leak hunting |
| native-android-16kb-alignment.md | CRITICAL | Third-party library alignment for Google Play |
| HIGH |
| Disable bundle compression |
| bundle-native-assets.md | HIGH | Asset catalog setup |
| bundle-library-size.md | MEDIUM | Evaluate dependencies |
| bundle-code-splitting.md | MEDIUM | Re.Pack code splitting |
| js-memory-leaks.md or native-memory-leaks.md |
| Animation drops frames | js-animations-reanimated.md |
| List scroll jank | js-lists-flatlist-flashlist.md |
| TextInput lag | js-uncontrolled-components.md |
| Native module slow | native-turbo-modules.md → native-threading-model.md |
| Native library alignment issue | native-android-16kb-alignment.md |