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

在移动开发中，高效展示数据列表至关重要。作为 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}
/>;

性能对比

总结

React Native 提供了丰富的列表组件，而 FlashList 以卓越的性能脱颖而出。如果你的应用需要处理大量数据，建议优先考虑 FlashList，它能提供更加流畅的用户体验，同时无需大幅修改代码。

最后：

React Hook 深入浅出

CSS技巧与案例详解

vue2与vue3技巧合集

VueUse源码解读