📜  当我们在 FlatList 上使用 ScrollView 时,反之亦然?

📅  最后修改于: 2022-05-13 01:56:32.185000             🧑  作者: Mango

当我们在 FlatList 上使用 ScrollView 时,反之亦然?

ScrollView: ScrollView 组件是一个内置的 react-native 组件,用作通用可滚动容器,能够滚动其中的子组件和视图。

什么时候使用 ScrollView?

ScrollView 加载所有内容,即一次全部显示在屏幕上的数据。这是在组件加载后立即完成的。因此,整个内容(数据列表)被完全安装。现在如果这个数据列表包含很多项目,它会自动导致性能问题。因此,如果您要在屏幕上显示一百或一千个项目,则不建议使用 ScrollView。当您在有限大小的列表中的数据项较少时使用它。

Flatlist: FlatList 组件是一个内置的 react-native 组件,它在可滚动列表中显示类似的结构化数据。它仅显示当前正在屏幕上显示的那些元素。

何时使用 FlatList?

与 ScrollView 不同,FlatList 仅呈现当前正在屏幕上显示的那些元素(默认值:10 个项目)。因此,它对应用程序的性能没有任何影响。因此,最好使用 FlatList 组件来显示大量数据。

ScrollView 和 Flatlist 之间的主要区别是:

ScrollViewFlatList
It does not provide any memory management.It provides automatic memory management.
It loads all the content at once.It loads content as the window scrolled.
It results in slow rendering and increased memory usage.It does not affect the rendering speed. 
It maintains the component state.It does not maintain the component state.
It renders generic content in a scrollable container.It renders a list of similar items.
Can be imported from react native as: 
import {ScrollView} from ‘react-native’;
Can be imported from React Native as: 
import {FlatList} from ‘react-native’;