React Native 最佳实践与性能优化指南 | 提升应用FPS、启动速度与包体积

react-native-best-practices by callstackincubator/agent-skills

8,200 周安装量

1,100 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/callstackincubator/agent-skills --skill react-native-best-practices

开发开发运维

🇨🇳中文介绍

React Native 最佳实践

概述

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

技能格式

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

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

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

何时应用

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

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

优先级排序指南

优先级	类别	影响	前缀
1	FPS 与重新渲染	关键

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

关键：FPS 与重新渲染

首先进行性能分析：

# 打开 React Native DevTools
# 在 Metro 中按 'j'，或摇动设备 → "Open DevTools"

常见修复方法：

对于列表，用 FlatList/FlashList 替换 ScrollView
使用 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%)

常见修复方法：

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

使用 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	关键	用虚拟化列表替换 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-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-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 优化终极指南》。

🇺🇸English

React Native Best Practices

Overview

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".

Skill Format

Each reference file follows a hybrid format for fast lookup and deep understanding:

Quick Pattern : Incorrect/Correct code snippets for immediate pattern matching
Quick Command : Shell commands for process/measurement skills
Quick Config : Configuration snippets for setup-focused skills
Quick Reference : Summary tables for conceptual skills
Deep Dive : Full context with When to Use, Prerequisites, Step-by-Step, Common Pitfalls

Impact ratings : CRITICAL (fix immediately), HIGH (significant improvement), MEDIUM (worthwhile optimization)

When to Apply

Reference these guidelines when:

Debugging slow/janky UI or animations
Investigating memory leaks (JS or native)
Optimizing app startup time (TTI)
Reducing bundle or app size
Writing native modules (Turbo Modules)
Profiling React Native performance
Reviewing React Native code for performance

Priority-Ordered Guidelines

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-*`,

Quick Reference

Optimization Workflow

Follow this cycle for any performance issue: Measure → Optimize → Re-measure → Validate

Measure : Capture baseline metrics (FPS, TTI, bundle size) before changes
Optimize : Apply the targeted fix from the relevant reference
Re-measure : Run the same measurement to get updated metrics
Validate : Confirm improvement (e.g., FPS 45→60, TTI 3.2s→1.8s, bundle 2.1MB→1.6MB)

If metrics did not improve, revert and try the next suggested fix.

Critical: FPS & Re-renders

Profile first:

# Open React Native DevTools
# Press 'j' in Metro, or shake device → "Open DevTools"

Common fixes:

Replace ScrollView with FlatList/FlashList for lists
Use React Compiler for automatic memoization
Use atomic state (Jotai/Zustand) to reduce re-renders
Use useDeferredValue for expensive computations

Critical: Bundle Size

Analyze 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:

Avoid barrel imports (import directly from source)
Remove unnecessary Intl polyfills (Hermes has native support)
Enable tree shaking (Expo SDK 52+ or Re.Pack)
Enable R8 for Android native code shrinking

High: TTI Optimization

Measure TTI:

Use react-native-performance for markers
Only measure cold starts (exclude warm/hot/prewarm)

Common fixes:

Disable JS bundle compression on Android (enables Hermes mmap)
Use native navigation (react-native-screens)
Preload commonly-used expensive screens before navigating to them

High: Native Performance

Profile native:

iOS: Xcode Instruments → Time Profiler
Android: Android Studio → CPU Profiler

Common fixes:

Use background threads for heavy native work
Prefer async over sync Turbo Module methods
Use C++ for cross-platform performance-critical code

References

Full documentation with code examples in references/:

JavaScript/React (`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 (`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

Bundling (`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

Searching References

# 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 → Skill Mapping

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

Attribution

Based on "The Ultimate Guide to React Native Optimization" by Callstack.

Weekly Installs

6.9K

Repository

callstackincuba…t-skills

GitHub Stars

994

First Seen

Jan 19, 2026

Security Audits

Gen Agent Trust HubWarn SocketPass SnykPass

Installed on

opencode5.0K

gemini-cli4.8K

codex4.7K

claude-code4.6K

cursor4.5K

github-copilot4.3K

React Native 最佳实践与性能优化指南 | 提升应用FPS、启动速度与包体积

🇨🇳中文介绍

React Native 最佳实践

概述

技能格式

何时应用

优先级排序指南

相关 Skills

快速参考

优化工作流

关键：FPS 与重新渲染

关键：包体积

高：TTI 优化

高：原生性能

参考资料

JavaScript/React (`js-*`)

原生 (`native-*`)

打包 (`bundle-*`)

搜索参考资料

问题 → 技能映射

归属

🇺🇸English

React Native Best Practices

Overview

Skill Format

When to Apply

Priority-Ordered Guidelines

Quick Reference

Optimization Workflow

Critical: FPS & Re-renders

Critical: Bundle Size

High: TTI Optimization

High: Native Performance

References

JavaScript/React (`js-*`)

Native (`native-*`)

Bundling (`bundle-*`)

Searching References

Problem → Skill Mapping

Attribution

React Native 最佳实践与性能优化指南 | 提升应用FPS、启动速度与包体积

🇨🇳中文介绍

React Native 最佳实践

概述

技能格式

何时应用

优先级排序指南

相关 Skills

快速参考

优化工作流

关键：FPS 与重新渲染

关键：包体积

高：TTI 优化

高：原生性能

参考资料

JavaScript/React (js-*)

原生 (native-*)

打包 (bundle-*)

搜索参考资料

问题 → 技能映射

归属

🇺🇸English

React Native Best Practices

Overview

Skill Format

When to Apply

Priority-Ordered Guidelines

Quick Reference

Optimization Workflow

Critical: FPS & Re-renders

Critical: Bundle Size

High: TTI Optimization

High: Native Performance

References

JavaScript/React (js-*)

Native (native-*)

Bundling (bundle-*)

Searching References

Problem → Skill Mapping

Attribution

JavaScript/React (`js-*`)

原生 (`native-*`)

打包 (`bundle-*`)

JavaScript/React (`js-*`)

Native (`native-*`)

Bundling (`bundle-*`)