Question

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

如果没有等效项，我一直在考虑仅使用map()通过我构建的Item组件渲染所有项目，这在文档和本文档中的here中也得到了证明。 SO question。

Answer 1

没有类似的组件可以像本机一样进行这种事情，因此我通常只使用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>
  );
}

Answer 2

有一个名为flatlist-react的react组件（npm install flatlist-react），可用于呈现如下列表：

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

它还为您处理排序，分组，过滤和布局样式之类的事情。

项目：

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

Answer 3

React-Native通过JavaScript公开Andriod和iOS本地组件。

Android和iOS各自具有ListViews，在使用FlatList时会在内部调用它们。

HTML没有与iOS和Android上的ListView等效的列表组件。
您可以使用像https://github.com/Flipkart/recyclerlistview这样的库，也可以使用Array.map返回要渲染的divs并自己实现等效的滚动逻辑。

Answer 4

官方反应站点 suggests react-window 和 react-virtualized

Answer 5

该项目包括Flat Flat List / List View的许多功能-但似乎得到认可，它适用于React Native和Web，您可以阅读本文：

https://medium.com/@naqvitalha/recyclerlistview-high-performance-listview-for-react-native-and-web-e368d6f0d7ef

一些有趣的观点：

FlatList：

FlatList令人惊叹，并具有大量功能。它甚至可以让你   渲染分隔符，并带有内置的可自定义视图跟踪器   这是我们感兴趣的。

FlatList是一个虚拟的列表视图，它通过卸载视图来实现   已经离开视口。它确实有助于降低整体内存   使用率下降，但这种方法有缺点：

本机端的视图被破坏，导致大量垃圾收集。   向上滚动时，现在需要重新创建视图，这可能是   如果滚动很快，就会出现问题。

项目：

https://github.com/Flipkart/recyclerlistview

Answer 6

如果您使用 React 组件创建自己的列表会更好。如果您有兴趣，我会帮助创建一个。

在React中相当于React Native的FlatList

6 个答案: