React Native列表滚动卡顿怎么优化？

Mr-斐然提问于 2026-03-12 22:44:21 阅读 12

移动

我在用FlatList渲染一个商品列表，数据大概有200条左右，但一滚动就明显卡顿，FPS掉得很厉害。已经加了keyExtractor和initialNumToRender，还是没改善。

是不是 renderItem 里组件太重了？我里面用了Image和Text，还套了几层View。下面是我现在的写法：

const renderItem = ({ item }) => (
  <View style={{ padding: 16 }}>
    <Image source={{ uri: item.image }} style={{ width: 80, height: 80 }} />
    <Text>{item.title}</Text>
    <Text>{item.price}</Text>
  </View>
);

有没有什么办法能让列表滑动更流畅？比如该不该用React.memo或者优化图片加载？

Redux 组件设计

我来解答赞 0 收藏

反馈

1 条解答

丽苹 Lv1

200条数据就卡顿确实有点说不过去，你renderItem里东西虽然不轻，但也不至于这么离谱。主要问题应该是每次滚动都重新渲染了子组件。

先说最直接有效的方案：用 React.memo 包装你的 Item 组件。

const ListItem = React.memo(({ item }) => (

{item.title}
{item.price}

));

const renderItem = ({ item }) => ;

这样只有 item 的引用变化时才重新渲染，避免了每次滚动都触发 renderItem。

然后图片这块，如果你没做缓存处理，Image 组件每次渲染都会发起请求。生产环境建议用 react-native-fast-image 这个库，它带磁盘缓存，比原生 Image 强太多。

const ListItem = React.memo(({ item }) => (

source={{ uri: item.image }}
style={{ width: 80, height: 80 }}
/>

{item.title}
{item.price}

));

还有几个 FlatList 的参数可以调一下：

data={data}
renderItem={renderItem}
keyExtractor={item => item.id}
getItemLayout={(data, index) => ({
length: 112, // 你的item高度
offset: 112 * index,
index,
})}
maxToRenderPerBatch={10}
windowSize={10}
removeClippedSubviews={true}
/>

getItemLayout 是最重要的，加上这个 FlatList 就不用每次算高度了，能提升明显。maxToRenderPerBatch 和 windowSize 控制渲染批次，可以减少首屏渲染压力。

至于你问的该不该用 memo，答案是：该用。只要你的 Item 组件是独立的，都建议用 memo 包一下。200条数据本身不大，优化完应该能跑满60fps。

2026-03-12 23:12