社区首页 >专栏 >React Native 列表组件：FlashList、FlatList 及更多

React Native 列表组件：FlashList、FlatList 及更多

前端小智@大迁世界

发布于 2025-02-06 13:09:57

56100

代码可运行

文章被收录于专栏：终身学习者终身学习者

运行总次数：0

代码可运行

在移动开发中，高效展示数据列表至关重要。作为 React Native 开发者，我们可以使用多种强大的工具来完成这一任务。无论是 ScrollView、SectionList 还是 FlatList，React Native 都提供了一系列用于数据展示的组件。

然而，随着数据集的增长和性能需求的提高，我们需要更优化的解决方案。这时，Shopify 推出的 FlashList 应运而生，它相较于传统的列表组件，在性能上带来了显著提升。

本文将带你回顾 React Native 列表组件的演进过程，探讨 ScrollView 的局限性，以及 FlatList、SectionList 的优化点，并深入了解最新的 FlashList 如何进一步提升性能和开发体验。

React Native 列表组件的演进

ScrollView

ScrollView 是 React Native 提供的最基础的列表组件之一，适用于简单的列表展示。然而，它的局限性也较为明显：它会一次性渲染所有子组件，即整个数据列表，不论数据量大小。

示例如下：

import { StyleSheet, Text, ScrollView } from 'react-native';
import { SafeAreaView, SafeAreaProvider } from 'react-native-safe-area-context';

const data = [
  'Alice', 'Bob', 'Charlie', 'Diana', 'Edward', 'Fiona',
  'George', 'Hannah', 'Ian', 'Jasmine', 'Kevin', 'Liam',
  'Mia', 'Nathan', 'Olivia', 'Patrick', 'Quinn', 'Rebecca',
  'Samuel', 'Tina', 'Quinn', 'Rebecca', 'Samuel', 'Tina',
];

const App = () => {
  return (
    <SafeAreaProvider>
      <SafeAreaView style={styles.container} edges={['top']}>
        <ScrollView>
          {data.map((item, idx) => (
            <Text key={idx} style={styles.item}>{item}</Text>
          ))}
        </ScrollView>
      </SafeAreaView>
    </SafeAreaProvider>
  );
};
export default App;

const styles = StyleSheet.create({
  container: { flex: 1, paddingTop: 22 },
  item: { padding: 10, fontSize: 18, height: 44 },
});

ScrollView 的输出如下：

尽管这种方式简单直观，但当数据量过大时，它会占用大量内存，因为 ScrollView 没有虚拟化或惰性加载的功能，导致渲染速度变慢，影响性能。

FlatList

为了解决 ScrollView 处理大数据集时的性能瓶颈，React Native 引入了 FlatList 组件。它采用虚拟化渲染技术，只渲染当前屏幕内可见的列表项，而屏幕外的项会被移除，从而大幅节省内存并提高渲染效率。

FlatList 的主要特性：

支持水平滚动
可添加列表头部和尾部
支持分隔符
下拉刷新
滚动加载
支持 scrollToIndex 方法
支持多列布局

示例如下：

import { StyleSheet, Text, FlatList } from 'react-native';
import { SafeAreaView, SafeAreaProvider } from 'react-native-safe-area-context';

const data = [...]; // 省略数据

const App = () => {
  return (
    <SafeAreaProvider>
      <SafeAreaView style={styles.container} edges={['top']}>
        <FlatList
          data={data}
          keyExtractor={(_, index) => index.toString()}
          renderItem={({ item }) => <Text style={styles.item}>{item}</Text>}
        />
      </SafeAreaView>
    </SafeAreaProvider>
  );
};
export default App;

const styles = StyleSheet.create({
  container: { flex: 1, paddingVertical: 22 },
  item: { padding: 10, fontSize: 18, height: 44 },
});

与 ScrollView 不同，FlatList 具备 keyExtractor 属性，可以自动为数据项生成唯一的 key，从而优化渲染效率。

SectionList

SectionList 与 FlatList 类似，但它额外支持分组数据展示，适用于需要按类别归类的数据。例如，显示菜单、通讯录或分类列表时，SectionList 更加合适。

SectionList 主要特性：

支持水平滚动
支持列表头部和尾部
支持分隔符
支持分类标题
下拉刷新
滚动加载
支持 scrollToIndex 方法
支持多列布局

示例如下：

import { StyleSheet, Text, SectionList, View } from 'react-native';
import { SafeAreaView, SafeAreaProvider } from 'react-native-safe-area-context';

const data = [
  { title: '主食', data: ['披萨', '汉堡', '烩饭'] },
  { title: '配菜', data: ['薯条', '洋葱圈', '炸虾'] },
  { title: '饮料', data: ['水', '可乐', '啤酒'] },
  { title: '甜点', data: ['芝士蛋糕', '冰淇淋'] },
];

const App = () => (
  <SafeAreaProvider>
    <SafeAreaView style={styles.container} edges={['top']}>
      <SectionList
        sections={data}
        keyExtractor={(item, index) => item + index}
        renderItem={({ item }) => <Text style={styles.item}>{item}</Text>}
        renderSectionHeader={({ section: { title } }) => (
          <Text style={styles.header}>{title}</Text>
        )}
      />
    </SafeAreaView>
  </SafeAreaProvider>
);
export default App;

const styles = StyleSheet.create({
  container: { flex: 1 },
  item: { padding: 10, fontSize: 18 },
  header: { padding: 10, fontSize: 20, backgroundColor: '#ddd' },
});

在 iOS 端，SectionList 的分组标题默认会固定在顶部，提升用户体验。

FlashList

FlashList 由 Shopify 开发，针对大规模数据列表进行了极致优化。它不仅保留了 FlatList 的 API 设计，还提升了渲染速度，适用于超大数据集的高性能渲染。

FlashList 主要特性：

优化渲染，速度提升 10 倍
流畅滚动，内存占用更低
API 兼容 FlatList，迁移成本低

安装 FlashList：

# 使用 yarn
yarn add @shopify/flash-list

# 使用 expo
npx expo install @shopify/flash-list

示例如下：

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

<FlashList
  data={data}
  renderItem={({ item }) => <Text style={styles.item}>{item}</Text>}
  keyExtractor={(_, index) => index.toString()}
  estimatedItemSize={20}
/>;

性能对比

组件	渲染方式	适用场景	性能表现
ScrollView	一次性渲染所有项	小型数据集	差
FlatList	虚拟化渲染	大型数据集	良好
SectionList	虚拟化渲染	分类数据集	良好
FlashList	高度优化	超大数据集	优异