在React中相当于React Native的FlatList

Question

React中是否有与React Native中的FlatList组件等效的组件？在React Native中构建了一个移动应用程序之后，我现在将其转换为Web应用程序的React。（曾考虑使用react-native-web，但已决定反对使用它，主要是因为我想学习React。）

如果没有等效项，我一直在考虑仅使用map（）通过我构建的Item组件呈现所有项目，这在docs和此SO问题中也得到了证明。

Answer 1

官方react站点建议 使用react -window和react-virtualized

Answer 2

有一个名为flatlist-react(npm install flatlist-react)的 react 组件，您可以使用它来呈现如下列表：

<FlatList list={[1, 2, 3]} renderItem={item => <li>{item}</li>}/>

它还为您处理排序、分组、过滤和布局样式等事情。

项目：

https://github.com/ECorreia45/flatlist-react

Answer 3

没有像在本机中一样可以执行此类操作的特定组件，因此我通常仅用于map()实现此类操作。

但是，如果可以重用，则可以确定自己创建一个List组件，这样就不必map()每次都为同一列表编写函数。

有点像这样：

function Item(props) {
   return <li>{props.value}</li>;
}

function MyList(items) {
   return (
    <ul>
      {items.map((item) => <Item key={item.key} value={item} />)}
    </ul>
  );
}