【第7篇】适配 + 性能优化：做个「跑得快、看得清」的 App
🧠 技术专家导语
用户不会在意你用了多牛的技术，但他们一定会感知：这个 App 卡不卡、加载快不快、界面是不是炸裂变形。
React Native 想要做到“轻、快、美”，你必须掌握这几项核心优化技巧。
📐 一、响应式适配：适配不同尺寸与分辨率
✅ 常用单位推荐
| 单位 | 说明 |
|---|---|
% | 相对宽高占比，适合容器布局 |
Dimensions | 获取屏幕宽高 |
useWindowDimensions() | React Hook 风格 |
PixelRatio.get() | 获取设备像素密度 |
示例：
import { Dimensions } from 'react-native'
const { width, height } = Dimensions.get('window')
🖼 二、高分辨率图像：适配 Retina 屏
- ✅ 使用
@2x/@3x命名规范 - ✅ 建议图片资源尺寸 ≥ UI 标注尺寸
- ✅ 使用
resizeMode="contain"/cover控制拉伸方式
🗃 三、列表优化：FlatList 和 SectionList 的正确姿势
✅ FlatList 推荐做法：
<FlatList
data={data}
renderItem={renderItem}
keyExtractor={item => item.id}
initialNumToRender={10}
maxToRenderPerBatch={5}
windowSize={5}
/>
- ❗ 避免使用
ScrollView渲染大量数据 - ✅ 搭配分页加载、懒加载图片
- ✅ 使用
React.memo()优化 renderItem
🧠 四、内存管理 & 滥用警告
| 问题症状 | 原因 | 解决建议 |
|---|---|---|
| 页面返回后变卡顿 | 未清理定时器 / 监听器 | useEffect 中加 return 清理函数 |
| 图片加载过多 | 占用内存未释放 | 限制图片数量、懒加载 |
| UI 卡顿 | 大数组 render 每帧过重 | 分批渲染、虚拟滚动 |
📦 五、依赖优化建议
- ✅ 替换体积大的库（如 lodash → lodash-es / 自写函数）
- ✅ 删除未使用依赖（如 moment → dayjs）
- ✅ 打包时使用
expo optimize或metro自定义压缩插件
✅ 总结 Checklist
- ✅ 响应式布局适配不同尺寸
- ✅ 图片按设备像素比例准备
- ✅ 使用 FlatList 代替 ScrollView
- ✅ 清理副作用，管理内存泄漏
📘 下一篇预告：
👉 《Expo vs CLI：你适合哪一种 React Native 开发模式？》
