expo

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Community Expo React Native Best Practices

社区版 Expo React Native 最佳实践

Comprehensive performance optimization guide for Expo React Native applications. Contains 54 rules across 9 categories, prioritized by impact to guide automated refactoring and code generation.

Expo React Native 应用的全面性能优化指南。包含9个类别共54条规则，按影响程度优先级排序，可指导自动化重构与代码生成。

When to Apply

适用场景

Reference these guidelines when:

Writing new Expo React Native components
Optimizing app startup and Time to Interactive
Implementing lists, images, or animations
Reducing bundle size and memory usage
Reviewing code for mobile performance issues

在以下场景中参考本指南：

编写新的 Expo React Native 组件
优化应用启动速度与交互就绪时间
实现列表、图片或动画功能
减小包体积与内存占用
评审代码以排查移动端性能问题

Rule Categories by Priority

按优先级划分的规则类别


launch-
bundle-
list-
image-
data-
nav-
rerender-
anim-
mem-

Priority	Category	Impact	Prefix
1	Launch Time Optimization	CRITICAL	`launch-`
2	Bundle Size Optimization	CRITICAL	`bundle-`
3	List Virtualization	HIGH	`list-`
4	Image Optimization	HIGH	`image-`
5	Data Fetching Patterns	HIGH	`data-`
6	Navigation Performance	MEDIUM-HIGH	`nav-`
7	Re-render Prevention	MEDIUM	`rerender-`
8	Animation Performance	MEDIUM	`anim-`
9	Memory Management	LOW-MEDIUM	`mem-`


launch-
bundle-
list-
image-
data-
nav-
rerender-
anim-
mem-

优先级	类别	影响程度	前缀
1	启动时间优化	关键	`launch-`
2	包体积优化	关键	`bundle-`
3	列表虚拟化	高	`list-`
4	图片优化	高	`image-`
5	数据获取模式	高	`data-`
6	导航性能	中高	`nav-`
7	重渲染预防	中	`rerender-`
8	动画性能	中	`anim-`
9	内存管理	中低	`mem-`

Quick Reference

快速参考

1. Launch Time Optimization (CRITICAL)

1. 启动时间优化（关键）

```
launch-splash-screen-control
```
- Control splash screen visibility during asset loading
```
launch-preload-critical-assets
```
- Preload fonts and images during splash
```
launch-hermes-engine
```
- Use Hermes engine for faster startup
```
launch-defer-non-critical
```
- Defer non-critical initialization
```
launch-new-architecture
```
- Enable New Architecture for synchronous native communication
```
launch-minimize-root-imports
```
- Minimize imports in root App component

```
launch-splash-screen-control
```
- 在资源加载期间控制启动屏的可见性
```
launch-preload-critical-assets
```
- 在启动屏显示阶段预加载字体与图片
```
launch-hermes-engine
```
- 使用 Hermes 引擎加快启动速度
```
launch-defer-non-critical
```
- 延迟非关键代码的初始化
```
launch-new-architecture
```
- 启用新架构以实现同步原生通信
```
launch-minimize-root-imports
```
- 减少根 App 组件中的导入项

2. Bundle Size Optimization (CRITICAL)

2. 包体积优化（关键）

```
bundle-avoid-barrel-files
```
- Avoid barrel file imports
```
bundle-analyze-size
```
- Analyze bundle size before release
```
bundle-remove-unused-dependencies
```
- Remove unused dependencies
```
bundle-split-by-architecture
```
- Generate architecture-specific APKs
```
bundle-enable-proguard
```
- Enable ProGuard for Android release builds
```
bundle-optimize-fonts
```
- Subset custom fonts to used characters
```
bundle-use-lightweight-alternatives
```
- Use lightweight library alternatives

```
bundle-avoid-barrel-files
```
- 避免使用桶文件导入
```
bundle-analyze-size
```
- 发布前分析包体积
```
bundle-remove-unused-dependencies
```
- 移除未使用的依赖
```
bundle-split-by-architecture
```
- 生成针对特定架构的 APK
```
bundle-enable-proguard
```
- 为 Android 发布版本启用 ProGuard
```
bundle-optimize-fonts
```
- 对自定义字体进行子集化，仅保留使用到的字符
```
bundle-use-lightweight-alternatives
```
- 使用轻量级的替代库

3. List Virtualization (HIGH)

3. 列表虚拟化（高）

```
list-use-flashlist
```
- Use FlashList instead of FlatList
```
list-provide-estimated-size
```
- Provide accurate estimatedItemSize
```
list-avoid-inline-functions
```
- Avoid inline functions in renderItem
```
list-provide-getitemlayout
```
- Provide getItemLayout for fixed-height items
```
list-avoid-key-prop
```
- Avoid key prop inside FlashList items
```
list-batch-rendering
```
- Configure list batch rendering
```
list-memoize-item-components
```
- Memoize list item components

```
list-use-flashlist
```
- 使用 FlashList 替代 FlatList
```
list-provide-estimated-size
```
- 提供准确的 estimatedItemSize
```
list-avoid-inline-functions
```
- 避免在 renderItem 中使用内联函数
```
list-provide-getitemlayout
```
- 为固定高度的列表项提供 getItemLayout
```
list-avoid-key-prop
```
- 避免在 FlashList 列表项内部使用 key 属性
```
list-batch-rendering
```
- 配置列表的批量渲染
```
list-memoize-item-components
```
- 对列表项组件进行 memo 缓存

4. Image Optimization (HIGH)

4. 图片优化（高）

```
image-use-expo-image
```
- Use expo-image instead of React Native Image
```
image-resize-to-display-size
```
- Resize images to display size
```
image-use-webp-format
```
- Use WebP format for smaller file sizes
```
image-use-placeholders
```
- Use BlurHash or ThumbHash placeholders
```
image-preload-critical
```
- Preload critical above-the-fold images
```
image-lazy-load-offscreen
```
- Lazy load off-screen images

```
image-use-expo-image
```
- 使用 expo-image 替代 React Native Image
```
image-resize-to-display-size
```
- 将图片调整为显示尺寸
```
image-use-webp-format
```
- 使用 WebP 格式以减小文件大小
```
image-use-placeholders
```
- 使用 BlurHash 或 ThumbHash 作为占位图
```
image-preload-critical
```
- 预加载首屏关键图片
```
image-lazy-load-offscreen
```
- 懒加载屏幕外的图片

5. Data Fetching Patterns (HIGH)

5. 数据获取模式（高）

```
data-parallel-fetching
```
- Fetch independent data in parallel
```
data-request-deduplication
```
- Deduplicate concurrent requests
```
data-abort-requests
```
- Abort requests on component unmount
```
data-pagination
```
- Implement efficient pagination strategies
```
data-cache-strategies
```
- Use appropriate caching strategies
```
data-optimistic-updates
```
- Apply optimistic updates for responsiveness

```
data-parallel-fetching
```
- 并行获取独立数据
```
data-request-deduplication
```
- 去重并发请求
```
data-abort-requests
```
- 在组件卸载时终止请求
```
data-pagination
```
- 实现高效的分页策略
```
data-cache-strategies
```
- 使用合适的缓存策略
```
data-optimistic-updates
```
- 应用乐观更新以提升响应速度

6. Navigation Performance (MEDIUM-HIGH)

6. 导航性能（中高）

```
nav-use-native-stack
```
- Use native stack navigator
```
nav-unmount-inactive-screens
```
- Unmount inactive tab screens
```
nav-prefetch-screen-data
```
- Prefetch data before navigation
```
nav-optimize-screen-options
```
- Optimize screen options
```
nav-avoid-deep-nesting
```
- Avoid deeply nested navigators

```
nav-use-native-stack
```
- 使用原生栈导航器
```
nav-unmount-inactive-screens
```
- 卸载非活跃的标签页屏幕
```
nav-prefetch-screen-data
```
- 在导航前预加载屏幕数据
```
nav-optimize-screen-options
```
- 优化屏幕配置选项
```
nav-avoid-deep-nesting
```
- 避免深度嵌套的导航器

7. Re-render Prevention (MEDIUM)

7. 重渲染预防（中）

```
rerender-use-memo-components
```
- Memoize expensive components with React.memo
```
rerender-use-callback
```
- Stabilize callbacks with useCallback
```
rerender-use-memo-values
```
- Memoize expensive computations with useMemo
```
rerender-avoid-context-overuse
```
- Avoid overusing Context for frequent updates
```
rerender-split-component-state
```
- Split components to isolate updating state
```
rerender-use-react-compiler
```
- Enable React Compiler for automatic memoization
```
rerender-avoid-anonymous-components
```
- Avoid anonymous components in JSX

```
rerender-use-memo-components
```
- 使用 React.memo 缓存性能开销大的组件
```
rerender-use-callback
```
- 使用 useCallback 稳定回调函数
```
rerender-use-memo-values
```
- 使用 useMemo 缓存开销大的计算结果
```
rerender-avoid-context-overuse
```
- 避免过度使用 Context 处理频繁更新
```
rerender-split-component-state
```
- 拆分组件以隔离更新状态
```
rerender-use-react-compiler
```
- 启用 React Compiler 实现自动缓存
```
rerender-avoid-anonymous-components
```
- 避免在 JSX 中使用匿名组件

8. Animation Performance (MEDIUM)

8. 动画性能（中）

```
anim-use-reanimated
```
- Use Reanimated for UI thread animations
```
anim-use-native-driver
```
- Enable useNativeDriver for Animated API
```
anim-avoid-layout-animation
```
- Prefer transform over layout animations
```
anim-gesture-handler-integration
```
- Use Gesture Handler with Reanimated
```
anim-interaction-manager
```
- Defer heavy work during animations

```
anim-use-reanimated
```
- 使用 Reanimated 实现 UI 线程动画
```
anim-use-native-driver
```
- 为 Animated API 启用 useNativeDriver
```
anim-avoid-layout-animation
```
- 优先使用 transform 而非布局动画
```
anim-gesture-handler-integration
```
- 将 Gesture Handler 与 Reanimated 集成
```
anim-interaction-manager
```
- 在动画执行期间延迟繁重任务

9. Memory Management (LOW-MEDIUM)

9. 内存管理（中低）

```
mem-cleanup-useeffect
```
- Clean up subscriptions and timers
```
mem-abort-fetch-requests
```
- Abort fetch requests on unmount
```
mem-avoid-closure-leaks
```
- Avoid closure-based memory leaks
```
mem-release-heavy-resources
```
- Release heavy resources when not needed
```
mem-profile-with-tools
```
- Profile memory usage with development tools

```
mem-cleanup-useeffect
```
- 清理订阅与定时器
```
mem-abort-fetch-requests
```
- 在组件卸载时终止请求
```
mem-avoid-closure-leaks
```
- 避免闭包导致的内存泄漏
```
mem-release-heavy-resources
```
- 在不需要时释放重型资源
```
mem-profile-with-tools
```
- 使用开发工具分析内存占用

How to Use

使用方法

Read individual reference files for detailed explanations and code examples:

Section definitions - Category structure and impact levels
Rule template - Template for adding new rules
Example rules: launch-splash-screen-control, list-use-flashlist

阅读单个参考文件以获取详细说明与代码示例：

章节定义 - 类别结构与影响程度说明
规则模板 - 添加新规则的模板
示例规则：launch-splash-screen-control, list-use-flashlist

Full Compiled Document

完整编译文档

For the complete guide with all rules expanded:

AGENTS.md

包含所有规则详细内容的完整指南：

AGENTS.md