⚡️ FlashList

快速 & 高性能
React Native 列表

不再有空白单元格

几秒钟内从 FlatList 切换。 立即获得性能提升。

安装 FlashList 阅读文档

类似的 props。
即时性能提升。

即使具有与 React Native FlatList 类似的 props，FlashList 也在底层回收组件以最大化性能。

<FlashList
  renderItem={({ item }) => {
    return <TweetCell item={item} />;
  }}
  estimatedItemSize={50}
  data={tweets}
/>;

在低端设备上表现出卓越的性能

UI 线程中的 FPS*

高达 5 倍

FlashList

React Native FlatList

JS 线程中的 FPS*

高达 10 倍

FlashList

React Native FlatList

* 在 60FPS 屏幕 Android Moto G10 设备上的平均 FPS。（数值越高越好）

内存高效的滚动

一些库为了获得良好的性能会在内存中分配更多的项目。FlashList 不会在用户滚动时重新创建项目，使其内存效率明显更高。

Developer using React Native FlashList in their laptop.

对开发者友好

由于 FlatList 的 API，FlashList 特别易于使用。只需更改组件的名称，就可以开始使用。

在所有平台上都流畅

在 iOS 上，其他列表表现良好，但在 Android 上，它们表现不佳。FlashList 即使在低端 Android 设备上也能很好地运行。

Girl enjoying a list created using FlashList on a phone 
<FlashList
  renderItem={({ item }) => {
    return <TweetCell item={item} />;
  }}
  getItemType={({ item }) => {
    return item.type;
  }}
  data={tweets}
/>;

额外的配置以获得更好的性能。

除了 FlatList 的 props 之外，FlashList 还提供了一组额外的 props 来进一步调整性能。

如丝般顺滑的复杂布局

FlashList 支持像 Masonry 这样的布局，允许您渲染类似 Pinterest 的布局。这是 Shopify 的 Shop 应用程序利用 MasonryFlashList 组件的示例。

Masonry layout React Native list created using FlashList

了解 Shopify 如何以及为何使用 FlashList 让每个人的商务体验都更好。

立即阅读
Shopify uses FlashList to make commerce better for everyone

看看大家对 FlashList 的评价

公开的 FlashList

过去的活动

FlashList on the React Advanced London Meetup

React Native Radio 播客

2022 年 8 月 27 日

来自 Shopify 的 Talha Naqvi 在 React Native Radio 上谈论了新的热门 FlashList 以及为什么它在大多数情况下是 FlatList 的替代品。

收听播客

React Native 欧盟会议 2022

2022 年 9 月 2 日

Marek Fořt 在 2022 年 React Native 欧盟会议上展示了 FlashList。他演示了如何从 FlashList 迁移，并提供了如何最大限度发挥其性能的技巧。

App.js 大会

2022 年 6 月 9 日

在 App.js 大会上，我们在谈论 Shopify 的 React Native 开源项目时介绍了 FlashList。

React Advanced London 聚会

2022 年 9 月 28 日

Siavash Etemadieh 在 React Advanced London 聚会上介绍了 FlashList。我们将在录制完成后发布。

FlashList on the React Advanced London Meetup

立即安装

立即在您的项目中试用

React Native

yarn add @shopify/flash-list
cd ios && pod install

Expo

npx expo install @shopify/flash-list