在 React Native项目中，列表（FlatList / SectionList / VirtualizedList） 是最常见的组件之一。

但随着数据量增大、item UI 复杂度提升，列表性能问题也逐渐凸显，比如：

  • 首屏白屏

  • 滑动掉帧

  • 内存占用过高

  • 无意义的重复渲染

今天我结合实际经验，总结一份 React Native 列表优化实践手册，帮助大家把列表从“卡顿”调优到“丝滑”。

1. 基础配置优化

  • initialNumToRender控制初始渲染条数，避免一次性渲染过多。一般根据首屏可见区合理设置，比如initialNumToRender={10}。

  • windowSize设置可视窗口外的缓冲区渲染范围。默认值 21（前后各 10 屏），可根据列表密度下调到 5~10，减少内存占用。

  • maxToRenderPerBatch限制一次批量渲染的数量，避免卡顿。推荐设置为5~10。

  • updateCellsBatchingPeriod控制每批次渲染的时间间隔（毫秒），一般设16~50，避免掉帧。

2.keyExtractor& 稳定 key

  • 使用稳定唯一的 key（如 id），不要用index。

  • 避免 key 频繁变化，否则会触发额外渲染。

3. Item 渲染优化

  • 纯组件将 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。

4. 避免匿名函数 & 内联对象

  • 在renderItem里不要频繁定义函数或样式：

    // ❌ 坏例子
renderItem={({item}) => handleClick(item)} />} 

// ✅ 好例子
const renderItem = useCallback(({item}) => (
  handleClick(item)} /> 
), [handleClick])

  • 把StyleSheet.create放在组件外，避免重复创建。

5. 分页 & 下拉刷新优化

  • 分页加载使用onEndReached+onEndReachedThreshold，并加节流/防抖，避免重复请求。

  • 下拉刷新合理使用refreshing状态，避免不必要的全局重渲染。

6. 状态管理 & 渲染隔离

  • 列表 item 的局部状态，不要放在全局 Redux/Context，避免全量刷新。

  • 可以使用zustand或jotai这种原子化状态管理，或者局部useState。

7. Skeleton & 占位优化

  • 使用骨架屏（Skeleton）代替白屏，提高感知性能。

  • 可以基于react-native-skeleton-placeholder实现。

8. 动画与交互优化

  • 使用react-native-reanimated+react-native-gesture-handler做交互/滑动动画，避免 JS thread 卡顿。

  • 如果需要复杂的 UI 滚动联动（吸顶、tab 切换），推荐FlashList或RecyclerListView。

9. 第三方库选择

  • FlashList (Shopify 出品)基于底层优化，支持数千条数据流畅渲染，性能远超 FlatList。

    import { FlashList } from '@shopify/flash-list';

   data={movies}   renderItem={renderItem}   estimatedItemSize={100} />

  • RecyclerListView更极致的虚拟化，适合超大数据集。

10. Debug & 性能监控

  • 开启性能监控：UI → Performance Monitor查看 FPS、JS 线程负载。

  • 使用why-did-you-render检查无意义重渲染。

  • Android 端可用Systrace/Flipper追踪掉帧原因。

总结：

  • 配置层面：调优initialNumToRender、windowSize、getItemLayout

  • 渲染层面：React.memo、函数缓存、避免内联对象

  • 交互层面：分页、刷新、Skeleton 提升体验

  • 极致优化：FlashList 替代 FlatList

最后，祝大家双节快乐！