flash-list - 快速且高性能的 React Native 列表组件

Created at: 2021-12-20 23:48:14
Language: TypeScript
License: MIT

闪存列表映像

网站不和谐入门使用性能编写高性能组件已知问题

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

在几秒钟内从 FlatList 交换。获得即时性能。

安装

通过 将包添加到项目中并在目录中运行。

yarn add @shopify/flash-list
pod install
ios

用法

我们建议你阅读此处使用的详细文档。

FlashList

但是,如果你熟悉FlatList,那么你已经知道如何使用。你可以通过更改组件名称并添加 prop 或参考以下示例进行试用:

FlashList
FlashList
estimatedItemSize

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

const DATA = [
  {
    title: "First Item",
  },
  {
    title: "Second Item",
  },
];

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

为避免常见的陷阱,你还可以根据我们自己的经验,按照以下步骤从 迁移:

FlatList

  1. 从 切换到 并呈现列表一次。你应该会看到有关缺失的警告和建议。直接将此值设置为道具。
    FlatList
    FlashList
    estimatedItemSize
  2. 重要提示:扫描渲染项层次结构以查找显式属性定义并将其删除。如果你正在执行,请使用索引作为键。
    key
    .map()
  3. 如果列表具有异构视图,请使用 getItemType 属性将其类型传递给以提高性能。
    FlashList
  4. 不要在打开 JS 开发模式的情况下测试性能。确保你处于发布模式。 在开发模式下,由于渲染缓冲区较小,可能会显得更慢。
    FlashList

应用程序/游乐场

该夹具是一个示例应用程序,演示如何使用库。