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

• CSS技巧与案例详解
• vue2与vue3技巧合集
• VueUse源码解读

在移动开发中，高效展示数据列表至关重要。作为 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	高度优化	超大数据集	优异

总结

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

首发于公众号 大迁世界，欢迎关注。📝 每周一篇实用的前端文章 🛠️ 分享值得关注的开发工具 ❓ 有疑问？我来回答

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。