sectionView、ListView和FlatList的核心概念是什么？

Question

我对react-native非常陌生。我想知道SectionView，ListView和FlatView在react-native中的核心区别是什么？以及我应该使用它们的情况。

Answer 1

ListView (已弃用)

​

​

它是一个被弃用的类，用于创建List。您还可以阅读List documentation.

已弃用-请使用新的列表组件之一，如FlatList或SectionList

<ListView
  dataSource={this.state.dataSource}
  renderRow={(rowData) => <Text>{rowData}</Text>}
/>

FlatList

​

​

现在，您应该使用这个类来创建列表。它的性能比ListView更好。因为ListView处理大数据的速度很慢。但FlatList对此进行了重要的管理。

与ListView相比，它有很多特性

• 完全跨平台。
• 可选水平模式。
• Configurable可视性回调。
• 标头支持。
• 页脚支持。
• 分隔符支持。
• 拉取以刷新。正在加载
• 滚动。
• ScrollToIndex支持。

下面是如何创建FlatList的

<FlatList
  data={[{key: 'a'}, {key: 'b'}]}
  renderItem={({item}) => <Text>{item.key}</Text>}
/>

SecionList

​

​

用于需要将列表划分为多个部分的情况。它的实现与FlatList略有不同。它需要两个项目。

1. Title/Header
2. Data

它具有所有的FlatList功能，并且还支持部分。

数据和项完全呈现可见性callbacks.

• List header support.

• List

• support.

• Item separator support.

• Section header support.

• Section separator support.

• Heterogeneous data and item rendering support.

• Pull to Refresh.

• Scroll 。

下面是实现

// Example 1 (Homogeneous Rendering)
<SectionList
  renderItem={({item, index, section}) => <Text key={index}>{item}</Text>}
  renderSectionHeader={({section: {title}}) => (
    <Text style={{fontWeight: 'bold'}}>{title}</Text>
  )}
  sections={[
    {title: 'Title1', data: ['item1', 'item2']},
    {title: 'Title2', data: ['item3', 'item4']},
    {title: 'Title3', data: ['item5', 'item6']},
  ]}
  keyExtractor={(item, index) => item + index}
/>