[ PROMPT_NODE_23368 ]
mobile-performance
[ SKILL_DOCUMENTATION ]
# 移动端性能参考
> 深入探讨 React Native 和 Flutter 性能优化、60fps 动画、内存管理及电池考量。
> **本文件涵盖了 AI 生成代码最容易失败的领域。**
---
## 1. 移动端性能思维
### 为什么移动端性能与众不同
桌面端： 移动端：
├── 无限电力 ├── 电池至关重要
├── 充足的内存 ├── 内存共享且有限
├── 稳定的网络 ├── 网络不可靠
├── CPU 始终可用 ├── CPU 过热时会降频
└── 用户期望快速 └── 用户期望“即时”响应
### 性能预算概念
每一帧必须在以下时间内完成：
├── 60fps → 每帧 16.67ms
├── 120fps (ProMotion) → 每帧 8.33ms
如果你的代码耗时更长：
├── 丢帧 → 滚动/动画卡顿
├── 用户感知为“慢”或“损坏”
└── 他们会卸载你的应用
---
## 2. React Native 性能
### ? AI 的头号错误：列表使用 ScrollView
javascript
// ❌ 永远不要这样做 - AI 最喜欢的错误
{items.map(item => (
))}
// 为什么是灾难性的：
// ├── 立即渲染所有项目（1000 个项目 = 1000 次渲染）
// ├── 内存爆炸
// ├── 初始渲染耗时数秒
// └── 滚动变得卡顿
// ✅ 始终使用 FlatList
item.id}
/>
### FlatList 优化清单
javascript
// ✅ 正确：已应用所有优化
// 1. 记忆化组件
const ListItem = React.memo(({ item }: { item: Item }) => {
return (
{item.title}
);
});
// 2. 使用 useCallback 记忆化 renderItem
const renderItem = useCallback(
({ item }: { item: Item }) => ,
[] // 空依赖 = 永不重新创建
);
// 3. 稳定的 keyExtractor（永远不要使用 index！）
const keyExtractor = useCallback((item: Item) => item.id, []);
// 4. 为固定高度项目提供 getItemLayout
const getItemLayout = useCallback(
(data: Item[] | null, index: number) => ({
length: ITEM_HEIGHT, // 固定高度
offset: ITEM_HEIGHT * index,
index,
}),
[]
);
// 5. 应用于 FlatList
<FlatList
data={items}
renderItem={renderItem}
keyExtractor={keyExtractor}
getItemLayout={getItemLayout}
// 性能属性
removeClippedSubviews={true} // Android: 移除被裁剪的子视图
粤公网安备44030002003366号