在 React Native项目中,列表(FlatList / SectionList / VirtualizedList) 是最常见的组件之一。
但随着数据量增大、item UI 复杂度提升,列表性能问题也逐渐凸显,比如:
首屏白屏
滑动掉帧
内存占用过高
无意义的重复渲染
今天我结合实际经验,总结一份 React Native 列表优化实践手册,帮助大家把列表从“卡顿”调优到“丝滑”。
1. 基础配置优化
initialNumToRender控制初始渲染条数,避免一次性渲染过多。一般根据首屏可见区合理设置,比如initialNumToRender={10}。windowSize设置可视窗口外的缓冲区渲染范围。默认值 21(前后各 10 屏),可根据列表密度下调到 5~10,减少内存占用。maxToRenderPerBatch限制一次批量渲染的数量,避免卡顿。推荐设置为5~10。updateCellsBatchingPeriod控制每批次渲染的时间间隔(毫秒),一般设16~50,避免掉帧。
keyExtractor& 稳定 key使用稳定唯一的 key(如 id),不要用
index。避免 key 频繁变化,否则会触发额外渲染。
纯组件将 item 封装为
React.memo或PureComponent,配合props的稳定性,避免无意义的重渲染。const MovieItem = React.memo(({ title, cover }: {title: string; cover: string}) => { return ( {title} ) })getItemLayout如果列表 item 高度固定,使用getItemLayout直接计算 offset,避免动态测量:getItemLayout={(data, index) => ({ length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index, })}图片优化
使用
react-native-fast-image,支持缓存、占位图。图片尺寸固定,避免 reflow。
在
renderItem里不要频繁定义函数或样式:// ❌ 坏例子 renderItem={({item}) => handleClick(item)} />} // ✅ 好例子 const renderItem = useCallback(({item}) => ( handleClick(item)} /> ), [handleClick])把
StyleSheet.create放在组件外,避免重复创建。
分页加载使用
onEndReached+onEndReachedThreshold,并加节流/防抖,避免重复请求。下拉刷新合理使用
refreshing状态,避免不必要的全局重渲染。
列表 item 的局部状态,不要放在全局 Redux/Context,避免全量刷新。
可以使用
zustand或jotai这种原子化状态管理,或者局部useState。
使用骨架屏(Skeleton)代替白屏,提高感知性能。
可以基于
react-native-skeleton-placeholder实现。
使用
react-native-reanimated+react-native-gesture-handler做交互/滑动动画,避免 JS thread 卡顿。如果需要复杂的 UI 滚动联动(吸顶、tab 切换),推荐
FlashList或RecyclerListView。
FlashList (Shopify 出品)基于底层优化,支持数千条数据流畅渲染,性能远超 FlatList。
import { FlashList } from '@shopify/flash-list'; data={movies} renderItem={renderItem} estimatedItemSize={100} />RecyclerListView更极致的虚拟化,适合超大数据集。
开启性能监控:
UI → Performance Monitor查看 FPS、JS 线程负载。使用
why-did-you-render检查无意义重渲染。Android 端可用
Systrace/Flipper追踪掉帧原因。
配置层面:调优
initialNumToRender、windowSize、getItemLayout渲染层面:
React.memo、函数缓存、避免内联对象交互层面:分页、刷新、Skeleton 提升体验
极致优化:FlashList 替代 FlatList
最后,祝大家双节快乐!
特别声明:以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布,本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.