flash-list

FlashList 图片

<div align="center"> <a href="https://shopify.github.io/flash-list/">网站</a> • <a href="https://discord.gg/k2gzABTfav">Discord</a> • <a href="https://shopify.github.io/flash-list/docs/">开始使用</a> • <a href="https://shopify.github.io/flash-list/docs/usage">使用方法</a> • <a href="https://shopify.github.io/flash-list/docs/performance-troubleshooting">性能</a> • <a href="https://shopify.github.io/flash-list/docs/fundamentals/performant-components">编写高性能组件</a> • <a href="https://shopify.github.io/flash-list/docs/known-issues">已知问题</a> <br><br>

快速且高性能的React Native列表。不再有空白单元格。

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

</div>

安装

通过 yarn add @shopify/flash-list 将包添加到您的项目中，然后在 ios 目录下运行 pod install。

使用方法

我们建议您阅读这里的详细文档以了解如何使用 FlashList。

但如果您熟悉 FlatList，您就已经知道如何使用 FlashList 了。您可以通过更改组件名称并添加 estimatedItemSize 属性来尝试 FlashList，或参考以下示例：

import React from "react";
import { View, Text } from "react-native";
import { FlashList } from "@shopify/flash-list";

const DATA = [
  {
    title: "第一项",
  },
  {
    title: "第二项",
  },
];

const MyList = () => {
  return (
    <FlashList
      data={DATA}
      renderItem={({ item }) => <Text>{item.title}</Text>}
      estimatedItemSize={200}
    />
  );
};

为避免常见陷阱，您还可以根据我们的经验，按照以下步骤从 FlatList 迁移：

从 FlatList 切换到 FlashList 并渲染列表一次。您应该会看到关于缺少 estimatedItemSize 的警告和建议。直接将此值设置为属性。
重要：检查您的 renderItem 层次结构中是否有显式的 key 属性定义，并将其删除。如果您正在使用 .map()，请使用索引作为键。
检查您的 renderItem 层次结构中使用 useState 的组件，并验证如果将不同的项传递给该组件时，该状态是否需要重置（参见回收）。
如果您的列表具有异构视图，请使用 getItemType 属性将它们的类型传递给 FlashList，以提高性能。
不要在JS开发模式下测试性能。确保您处于发布模式。由于渲染缓冲区较小，FlashList 在开发模式下可能会显得较慢。