Terangkan penggunaan komponen VirtualizedList dalam ReactNative?

KomponenVirtualizedList adalah terbaik apabila senarai anda sangat besar. VirtualizedList membantu meningkatkan prestasi dan penggunaan memori. Semasa pengguna menatal, data dipaparkan kepada pengguna.

Komponen asas VirtualizedList adalah seperti berikut; Dalam VirtualizedList.

dataData untuk dipaparkan. getItemFungsi untuk mendapatkan satu item getItemCountDapatkan bilangan item data. initialNumToRenderBilangan pemaparan pada permulaan. keyExtractorSetiap kunci unik untuk dipertimbangkan Item untuk indeks yang ditentukan. Contoh: Paparkan data menggunakan VirtualizedList

import { SafeAreaView, View, VirtualizedList, StyleSheet, Text } from 'react-native';

Item awal yang ingin kami paparkan adalah 4. Sifat renderItem digunakan untuk memaparkan item pada skrin. Ia menggunakan komponen Item tersuai yang ditakrifkan seperti yang ditunjukkan di bawah -

<SafeAreaView>
   <VirtualizedList
      data={DATA}
      initialNumToRender={4}
      renderItem={({ item }) => <Item title={item.title} />}
      keyExtractor={item => item.id}
      getItemCount={getItemCount}
      getItem={getItem}
   />
</SafeAreaView>

keyExtractor

const Item = ({ title })=> {
   return (
      <View style={styles.item}>
      <Text style={styles.title}>{title}</Text>
      </View>
   );
}

props getItemCount Mendapat jumlah bilangan item yang akan dipaparkan kepada pengguna. Sekarang ia memanggil fungsi getItemCount, yang ditakrifkan seperti berikut. Atribut

keyExtractor={item => item.id}

	Ini ialah contoh VirtualizedList yang berfungsi.
Untuk menggunakan VirtualizedList, mula-mula importnya seperti berikut - <VirtualizedList data={DATA} initialNumToRender={4} renderItem={renderItem} keyExtractor={keyExtractor} getItemCount={getItemCount} getItem={getItem} />	Kod untuk VirtualizedList adalah seperti berikut -
	untuk menentukan kunci unik bagi setiap item.

getITem digunakan untuk mendapatkan data yang akan dipaparkan. Ia memanggil kaedah getItem, yang ditakrifkan seperti berikut -

const getItemCount = (data) => {
   return 100;
}
getItemCount={getItemCount}

Kod lengkap untuk memaparkan VirtualizedList adalah seperti berikut -

const getItem = (data, index) => {
   return {
      id: index,
      title: 'test'
   }
}
getItem={getItem}

output

Atas ialah kandungan terperinci Terangkan penggunaan komponen VirtualizedList dalam ReactNative?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!