FlatList Vs ScrollView

Question

在react原生中，FlatList和ScrollView的结构有什么不同？

对于应用程序中的滚动视图，它们似乎是相等的，但是ScrollView非常简单，而不是FlatList，那么当我们必须在代码中使用FlatList时呢？

Answer 1

FlatList和ScrollView之间有很大的区别

ScrollView将在加载组件后立即加载项目(用于滚动的数据)。因此，所有数据都将存储在RAM中，您将无法在其中使用成百上千个项目(由于性能较低)。

另一方面，FlatList对这个问题有一个更好的解决方案；它将10个项目(默认情况下)挂载到屏幕上，当用户滚动视图时，其他项目将挂载。使用FlatList而不是ScrollView是一个显著的优势。

您可以对少量项目使用ScrollView，甚至对10000个项目使用FlatList。

Answer 2

这里似乎没有人指出的一个非常大的区别是，组件状态不是由FlatList组件维护的，而是由ScrollView维护的。这是因为ScrollView一次渲染并维护了所有的子对象。同时，一旦组件离开屏幕，FlatList就会卸载它们，并在项目从屏幕上返回时从头开始重新创建它们(因此状态会丢失)。

Answer 3

它们有不同的用法。

构建FlatList是为了呈现一个很大的项目列表。如果检查documentation，则需要传递一个data数组，然后使用renderItem回调呈现数组中的每一项。它被优化为在非常大的数组中具有非常好的性能，因为它实际上只呈现当前需要显示的项。

构建ScrollView的目的是为了在内容大于ScrollView本身时以滚动的方式呈现通用内容。您不需要传递数据数组，但是可以像使用普通View一样将元素放入ScrollView中。但是要小心，它没有为非常长的内容提供相同的平面列表优化。

作为一个经验法则：

您需要从数组中呈现相似项的列表吗？使用FlatList

您需要在可滚动的容器中呈现通用内容吗？使用ScrollView