expo-react-native-performance

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Expo React Native Performance Best Practices

Expo React Native性能优化最佳实践

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

这是一份针对Expo React Native应用的全面性能优化指南，包含8个类别共42条规则，按影响优先级排序，可指导自动化重构和代码生成。

When to Apply

适用场景

Reference these guidelines when:

Writing new React Native components or screens
Implementing lists with FlatList or FlashList
Adding animations or transitions
Optimizing images and asset loading
Reviewing code for performance issues

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

编写新的React Native组件或页面
使用FlatList或FlashList实现列表
添加动画或过渡效果
优化图片与资源加载
审查代码以排查性能问题

Rule Categories by Priority

按优先级划分的规则类别


startup-
list-
rerender-
anim-
asset-
mem-
async-
platform-

Priority	Category	Impact	Prefix
1	App Startup & Bundle Size	CRITICAL	`startup-`
2	List Virtualization	CRITICAL	`list-`
3	Re-render Optimization	HIGH	`rerender-`
4	Animation Performance	HIGH	`anim-`
5	Image & Asset Loading	MEDIUM-HIGH	`asset-`
6	Memory Management	MEDIUM	`mem-`
7	Async & Data Fetching	MEDIUM	`async-`
8	Platform Optimizations	LOW-MEDIUM	`platform-`


startup-
list-
rerender-
anim-
asset-
mem-
async-
platform-

优先级	类别	影响程度	前缀
1	应用启动与包体积	关键	`startup-`
2	列表虚拟化	关键	`list-`
3	重渲染优化	高	`rerender-`
4	动画性能	高	`anim-`
5	图片与资源加载	中高	`asset-`
6	内存管理	中	`mem-`
7	异步与数据获取	中	`async-`
8	平台专属优化	中低	`platform-`

Quick Reference

快速参考

1. App Startup & Bundle Size (CRITICAL)

1. 应用启动与包体积（关键）

```
startup-enable-hermes
```
- Enable Hermes JavaScript engine
```
startup-remove-console-logs
```
- Remove console logs in production
```
startup-splash-screen-control
```
- Control splash screen visibility
```
startup-preload-assets
```
- Preload critical assets during splash
```
startup-async-routes
```
- Use async routes for code splitting
```
startup-cherry-pick-imports
```
- Use direct imports instead of barrel files

```
startup-enable-hermes
```
- 启用Hermes JavaScript引擎
```
startup-remove-console-logs
```
- 生产环境移除控制台日志
```
startup-splash-screen-control
```
- 控制启动页可见性
```
startup-preload-assets
```
- 启动页期间预加载关键资源
```
startup-async-routes
```
- 使用异步路由实现代码分割
```
startup-cherry-pick-imports
```
- 使用直接导入而非桶文件

2. List Virtualization (CRITICAL)

2. 列表虚拟化（关键）

```
list-use-flashlist
```
- Use FlashList instead of FlatList
```
list-estimated-item-size
```
- Provide accurate estimatedItemSize
```
list-get-item-type
```
- Use getItemType for mixed lists
```
list-stable-render-item
```
- Stabilize renderItem with useCallback
```
list-get-item-layout
```
- Provide getItemLayout for fixed heights
```
list-memoize-items
```
- Memoize list item components

```
list-use-flashlist
```
- 使用FlashList替代FlatList
```
list-estimated-item-size
```
- 提供准确的estimatedItemSize
```
list-get-item-type
```
- 混合列表使用getItemType
```
list-stable-render-item
```
- 用useCallback稳定renderItem
```
list-get-item-layout
```
- 为固定高度列表提供getItemLayout
```
list-memoize-items
```
- 对列表项组件进行记忆化处理

3. Re-render Optimization (HIGH)

3. 重渲染优化（高）

```
rerender-use-memo-expensive
```
- Memoize expensive computations
```
rerender-use-callback-handlers
```
- Stabilize callbacks with useCallback
```
rerender-functional-setstate
```
- Use functional setState updates
```
rerender-lazy-state-init
```
- Use lazy state initialization
```
rerender-split-context
```
- Split context by update frequency
```
rerender-derive-state
```
- Derive state instead of syncing

```
rerender-use-memo-expensive
```
- 对高开销计算进行记忆化
```
rerender-use-callback-handlers
```
- 用useCallback稳定回调函数
```
rerender-functional-setstate
```
- 使用函数式setState更新
```
rerender-lazy-state-init
```
- 使用惰性状态初始化
```
rerender-split-context
```
- 按更新频率拆分Context
```
rerender-derive-state
```
- 推导状态而非同步状态

4. Animation Performance (HIGH)

4. 动画性能（高）

```
anim-use-native-driver
```
- Enable native driver for animations
```
anim-use-reanimated
```
- Use Reanimated for complex animations
```
anim-layout-animation
```
- Use LayoutAnimation for simple transitions
```
anim-transform-not-dimensions
```
- Animate transform instead of dimensions
```
anim-interaction-manager
```
- Defer heavy work during animations

```
anim-use-native-driver
```
- 为动画启用原生驱动
```
anim-use-reanimated
```
- 复杂动画使用Reanimated
```
anim-layout-animation
```
- 简单过渡使用LayoutAnimation
```
anim-transform-not-dimensions
```
- 动画transform而非尺寸属性
```
anim-interaction-manager
```
- 动画期间延迟高开销任务

5. Image & Asset Loading (MEDIUM-HIGH)

5. 图片与资源加载（中高）

```
asset-use-expo-image
```
- Use expo-image for image loading
```
asset-prefetch-images
```
- Prefetch images before display
```
asset-optimize-image-size
```
- Request appropriately sized images
```
asset-use-webp-format
```
- Use WebP format for images
```
asset-recycling-key
```
- Use recyclingKey in FlashList images

```
asset-use-expo-image
```
- 使用expo-image加载图片
```
asset-prefetch-images
```
- 图片显示前预加载
```
asset-optimize-image-size
```
- 请求合适尺寸的图片
```
asset-use-webp-format
```
- 使用WebP图片格式
```
asset-recycling-key
```
- FlashList图片使用recyclingKey

6. Memory Management (MEDIUM)

6. 内存管理（中）

```
mem-cleanup-subscriptions
```
- Clean up subscriptions in useEffect
```
mem-clear-timers
```
- Clear timers on unmount
```
mem-abort-fetch
```
- Abort fetch requests on unmount
```
mem-avoid-inline-objects
```
- Avoid inline objects in props
```
mem-limit-list-data
```
- Limit list data in memory

```
mem-cleanup-subscriptions
```
- 在useEffect中清理订阅
```
mem-clear-timers
```
- 组件卸载时清除定时器
```
mem-abort-fetch
```
- 组件卸载时终止请求
```
mem-avoid-inline-objects
```
- 避免在props中使用内联对象
```
mem-limit-list-data
```
- 限制内存中的列表数据量

7. Async & Data Fetching (MEDIUM)

7. 异步与数据获取（中）

```
async-parallel-fetching
```
- Fetch independent data in parallel
```
async-defer-await
```
- Defer await until value needed
```
async-batch-api-calls
```
- Batch related API calls
```
async-cache-responses
```
- Cache API responses locally
```
async-refetch-on-focus
```
- Refetch data on screen focus

```
async-parallel-fetching
```
- 并行获取独立数据
```
async-defer-await
```
- 延迟await直到需要值时
```
async-batch-api-calls
```
- 批量处理相关API调用
```
async-cache-responses
```
- 本地缓存API响应
```
async-refetch-on-focus
```
- 页面获焦时重新获取数据

8. Platform Optimizations (LOW-MEDIUM)

8. 平台专属优化（中低）

```
platform-android-overdraw
```
- Reduce Android overdraw
```
platform-ios-text-rendering
```
- Optimize iOS text rendering
```
platform-android-proguard
```
- Enable ProGuard for Android release
```
platform-conditional-render
```
- Platform-specific optimizations

```
platform-android-overdraw
```
- 减少Android过度绘制
```
platform-ios-text-rendering
```
- 优化iOS文本渲染
```
platform-android-proguard
```
- Android发布版启用ProGuard
```
platform-conditional-render
```
- 平台专属优化处理

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

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

章节定义 - 类别结构与影响程度说明
规则模板 - 添加新规则的模板

Full Compiled Document

完整编译文档

For the complete guide with all rules expanded, see AGENTS.md.

如需查看所有规则展开的完整指南，请参考AGENTS.md。

Reference Files

参考文件

File	Description
AGENTS.md	Complete compiled guide with all rules
references/_sections.md	Category definitions and ordering
assets/templates/_template.md	Template for new rules
metadata.json	Version and reference information

文件	描述
AGENTS.md	包含所有规则的完整编译指南
references/_sections.md	类别定义与排序说明
assets/templates/_template.md	新规则模板
metadata.json	版本与参考信息