（在React Native中）比较FlatList 和 RecyclerListView及概述简介在React和Re

简介

在React和React Native中，有效地渲染长列表已经是一个问题了。这样做可能是一个艰巨的挑战，在React生态系统中已经开发了几个包来解决这个问题。React Native中一些值得注意的解决方案包括内置的FlatList 组件和RecyclerListView第三方包。

这两个包有很多共同点。它们都在很大程度上为渲染更长、更复杂的列表进行了优化。本文将通过关注它们的工作方式来比较内置的FlatList 组件和第三方的 RecyclerListView 包。

如果你有兴趣学习如何使用FlatList 组件或 RecyclerListView 包来渲染列表，你可以查看它们各自的文档。本文的主要目的是通过关注它们的工作方式来比较这两者。

希望这个比较能帮助你挑选一个符合你使用情况的。

内置的FlatList组件是对VirtualizedList 组件的方便封装。VirtualizedList 是FlatList 和SectionList 组件的基础实现。

FlatList 组件是React Native中渲染基本平面列表的事实上的接口。它的性能和功能都很强。它的一些显著特点包括。

关于FlatList 组件的完整功能列表，你可以查看React Native文档的相应部分。

主要是，FlatList 组件懒散地渲染列表项。为了减少内存的使用和处理时间，FlatList 渲染刚要出现在屏幕上的项目，并删除那些已经滚出屏幕的项目。它用适当间隔的空白取代屏幕外列表项的视图。

它还将内容异步地渲染到屏幕外，以限制内存并实现平滑滚动。然而，这有一个缺点，即如果滚动速度比填充速度快，就会瞬间显示空白内容。

这种内置的性能优化是为了使FlatList ，比其他内置的列表渲染组件（如ScrollView ）更有性能。

尽管功能丰富，性能更强，但FlatList 也有其不足之处。尽管为屏幕上和屏幕外的项目创建和销毁视图有助于减少内存的使用，但它的计算成本很高。最后，大量的对象必须被垃圾回收。如果用户滚动浏览整个列表，FlatList 创建的视图与列表中的项目一样多--在用户滚动时创建和销毁视图。

由于内容是在屏幕外异步渲染的，以限制内存并实现平滑滚动，快速滚动一个长的列表会在屏幕上产生明显的空白。这种影响在滚动速度较快的安卓系统上会更加明显。

与FlatList ，一个内置的组件不同，RecyclerListView是一个第三方的包，用于渲染一个长的项目列表。它支持React Native和React Native Web，你可以像这样安装它。

# Using npm

npm install recyclerlistview

# Using yarn

yarn add recyclerlistview

RecyclerListView是一个纯JavaScript的列表视图，没有任何本地依赖。这个包的灵感来自Android上的RecyclerView 和iOS上的UICollectionView 。它具有很高的性能，并且和内置的FlatList 组件一样具有丰富的功能。

它的一些显著特点包括。

RecyclerListView包是在考虑到FlatList 的缺点后建立的。RecyclerListView不是为屏幕上的元素创建视图，也不是为屏幕外的元素销毁视图，而是智能地回收先前创建的视图。

RecyclerListView包有三个构建块，即。

通过数据和布局提供者，你可以指定数据，它的类型，以及估计或准确的尺寸。然后RecyclerListView使用指定的类型来决定是否创建新的视图或重用视口中不可见的现有视图。

可视性跟踪器，就像它的名字一样，跟踪可见的项目并通知虚拟渲染器关于视口的状态。然后，虚拟渲染器使用这些信息来生成渲染栈。

如前文所述，FlatList 和 RecyclerListView是React Native和React Native Web的高性能列表视图。然而，FlatList 的性能不如 RecyclerListView。

FlatList 是一个内置的组件。它被优化为在屏幕外异步渲染视图，以限制内存并实现平滑滚动。它破坏了屏幕外的项目，用适当大小的空白取代它们。然而，这种优化也有其不足之处。

当用户滚动浏览很长的列表时，创建和销毁视图的效率很低，而且在处理很长的列表时可能会导致性能下降。值得一提的是，如果用户在整个列表中向上或向下滚动，FlatList 创建的视图至少与项目的数量相同。这是有问题的，特别是在处理无限长的列表时。

另一方面，RecyclerListView的建立是为了解决上面强调的内置FlatList 组件的一些缺点。RecyclerListView不需要像FlatList 那样创建和销毁视图，而是对它们进行回收。

屏幕外的视图被有效地回收，以显示在视图中的项目。由于这种优化，RecyclerListView包比FlatList 组件更有效，性能更高。

如果你想在React Native应用程序中渲染简单的列表，内置的FlatList 组件很可能就足够了。它非常容易上手，而且有很好的文档。

然而，如果你要处理长的或无限的列表，很容易遇到一些性能瓶颈，如上面强调的使用FlatList 。在这种情况下，RecyclerListView包可能是一个比FlatList 更好的选择。

不幸的是，如果你选择使用RecyclerListView包，你将需要做更多的工作。使用RecyclerListView并不像FlatList 那样直接，而且它的文档也不是那么好。你将需要多练习来达到一定的熟悉程度。

遇到需要渲染一个长的或无限的列表的问题是很常见的。React Native有内置的FlatList 组件，并为之进行了优化，但这个内置的解决方案也有其不足之处。

RecyclerListView包的开发是为了解决内置FlatList 组件的局限性。它支持React Native和React Native Web。

顾名思义，RecyclerListView包有效地回收了非视图项目，而不是像FlatList 组件那样创建和销毁视图。如果你的用例涉及到渲染一个长的项目列表，可能是几个视图的内容，RecyclerListView是一个比FlatList 组件更好的选择。

尽管FlatList 组件有很好的文档，而且很容易上手，但RecyclerListView包却不是这样。使用RecyclerListView包的缺点（尽管它带来了巨大的性能优势）是，它很难设置，而且文档相对较差。

如果在FlatList 和 RecyclerListView之间有一些我遗漏的相似或不同之处，请在下面的评论部分告诉我。