FlatList与ScrollView

Question

FlatList与ScrollView

React Native中FlatList和ScrollView之间的结构有何不同？

在应用程序中滚动视图似乎彼此相等，但是ScrollView非常简单，而不是FlatList，那么何时必须在代码中使用FlatList？

Answer 1

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

如果您使用 FlatList 来列出管理其自身状态的可交互组件，则使用 FlatList 时可能会遇到问题。假设您列出了一堆 Todo，其中每个 Todo 负责管理自己的状态状态（“待处理”与“完成”），其中每个 Todo 都以“待处理”的初始状态开始。如果您将 Todo 标记为已完成，将其滚动出页面，然后再滚动回来，它将再次重建该项目，其初始状态为““pending”。状态将不会被保存。如果您想使用 FlatList，将 FlatList 之外的列表项的状态具体化很重要。 (14认同)
这个评论真是精辟啊，居然没人指出来！谢谢 (3认同)
通常，React 组件有两种“类型”：有状态和无状态。有状态组件使用内部变量来帮助组件实现其目标。当组件卸载时，这些变量将被清除。如果您将 FlatList 与有状态组件一起使用，则该组件在卸载并重建到页面上时将重置其状态。相反，您可以做的是将状态作为“prop”从外部源传递，使组件无状态。人们可以手动管理组件外部的状态或诉诸库（如 Redux）来执行此操作。 (3认同)

Answer 2

nov*_*imo 8

FlatList和ScrollView有很大的不同

ScrollView将在组件加载后立即加载项目（其中的数据用于滚动）。因此，所有数据都将装入RAM中，并且您不能在其中使用数百或数千个项目（由于性能低下）。

但是FlatList对于这个问题有一个更好的解决方案，它将在屏幕上装载10个项目（默认情况下），用户滚动查看以便装载其他项目。这是FlatList而不是ScrollView的一大收获。

您可以在小项目（例如100个项目）中使用ScrollView，甚至在10000个项目中使用FlatList。

Answer 3

gba*_*zzi 5

它们有不同的用法。

FlatList用于渲染大量项目。如果查看文档，则需要传递的数组，data然后使用renderItem回调呈现该数组中的每个项目。它经过优化，可以在非常大的数组中具有很好的性能，因为它实际上仅呈现当前需要显示的项目。

ScrollView用于渲染通用内容，以便在内容大于其ScrollView自身时滚动。您无需传递数据数组，但可以将元素放在ScrollView中的方式与使用normal的方式相同View。但是请注意，对于很长的内容，它不会为平面列表提供相同的优化。

根据经验：

您是否需要从数组中呈现类似项目的列表？使用FlatList

您是否需要在可滚动容器中呈现常规内容？使用ScrollView

归档时间：	6 年，10 月前
查看次数：	2196 次
最近记录：	6 年，1 月前