Sekarang saya baru saja menunjukkan kepada Anda tampilan gulir dan sudah waktunya untuk melepaskan dan untuk menyingkirkan
tampilan gulir, mengapa? Tampilan gulir sangat
bagus jika Anda memiliki area yang dapat digulir di
layar Anda, tetapi itu tidak terlalu bagus jika Anda memiliki daftar di mana Anda tidak tahu berapa lama
itu atau yang mungkin sangat panjang.
Sekarang jika Anda tahu Anda memiliki beberapa konten, mungkin daftar data tetapi Anda tahu itu hanya 20
item, jadi mungkin akan melebihi batas layar saya tetapi tidak akan pernah lebih dari 20 atau 15 item,
maka Anda dapat menggunakan
tampilan gulir tetapi jika Anda memiliki daftar yang sangat panjang, maka tampilan gulir bisa sangat tidak efisien karena yang
dilakukannya adalah membuat semua elemen di muka, bahkan yang tidak ada di layar.
Itu berarti bahwa bahkan tujuan di bawah sana yang saat ini tidak terlihat sepenuhnya dirender dan ketika Anda menggulir
daftar yang sangat panjang dengan banyak elemen atau jika Anda melakukan hal lain di layar, itu
benar-benar dapat memperlambat aplikasi Anda.
Jika Anda memiliki daftar dengan ratusan atau ribuan elemen dan semuanya selalu ditampilkan
meskipun Anda tidak melihatnya, itu dapat memperlambat aplikasi Anda.
Jadi untuk mempercepat itu, ada komponen yang dibangun ke dalam React Native yang menangani daftar atau daftar yang tak
terbatas yang berpotensi sangat lama dengan cara yang lebih efisien dan itu
adalah komponen FlatList yang juga Anda impor dari React Native. FlatList menggantikan tampilan gulir sehingga bisa dikatakan, jadi di
sini kita cukup menggunakan FlatList yang merupakan elemen penutup sendiri dan FlatList memiliki dua properti penting -
properti pertama adalah properti data tempat Anda menunjuk pada data input Anda dan ini harus
menunjuk pada sebuah array.
Jadi di sini, saya menunjuk tujuan saja karena itulah data yang ingin saya hasilkan.
Properti penting kedua adalah render item, yang mengambil fungsi yang dipanggil untuk setiap item dalam
data Anda untuk merender item daftar.
Ini adalah fungsi yang akan mendapatkan beberapa data tentang item
itu, maka saya akan menyebutkan data item argumen dan kemudian harus mengembalikan komponen, jadi
di sini saya akan mengembalikan tampilan yang sama yang
saya miliki sebelumnya, cukup singkirkan manual pemetaan logika, jadi saya akan tetap mengembalikan tampilan ini.
Sekarang Anda tidak perlu menetapkan kunci di sini lagi, tetapi saya akan kembali ke bagaimana ini dimasukkan dalam hitungan detik.
Jadi sekarang di sini kita mendapatkan data barang dan karena itu kita tidak memiliki tujuan di sini lagi.
Data item adalah objek yang lebih kompleks tetapi di sana yang akan Anda miliki adalah properti item, selain item Anda juga memiliki indeks,
jadi nomor,
posisi item dalam array mulai dari 0 dan pemisah yang akan memungkinkan Anda pada dasarnya membuat pemisah secara dinamis
di antara item daftar, bukan sesuatu yang akan kami lakukan di sini tetapi item akan menjadi
data Anda, jadi satu elemen
dari data input Anda dan karena itu inilah salah satu tujuan kami.
dan jika kita melakukan itu dan kita simpan ini, sekarang mari kita belajar Bereaksi Asli, mungkin di
sini di iPhone untuk mencampuradukkan dan kita dapat menambahkan hal-hal di sini dan jika saya
menambahkan banyak dan saya kemudian menutup keyboard, saya dapat menggulir tetapi Anda ' Saya akan melihat bahwa ada peringatan.
Kami memperluas ini, kami melihat virtualisasi daftar kunci yang hilang untuk item, sehingga
merupakan peringatan lain yang terkait dengan kunci.
Alasan untuk itu adalah bahwa FlatList secara otomatis menambahkan kunci ke item Anda tetapi hanya
jika data Anda, data input Anda memiliki bentuk tertentu dan bentuk kami saat ini di mana kami hanya memiliki
serangkaian string tidak didukung. Bentuk yang diharapkan
adalah bahwa Anda tidak memiliki tujuan yang hanya berupa string tetapi sebaliknya bahwa daftar Anda adalah daftar objek
di mana Anda harus memiliki properti kunci di objek itu dan di sini kita akan benar-benar
membuat kunci acak sekarang dengan Matematika . acak dan kemudian saya mengonversikannya menjadi string karena itu harus berupa string dan tentu
saja, itu
tidak sepenuhnya unik, Anda mungkin memiliki nomor acak yang sama dua kali tetapi cukup baik untuk demo ini
di sini dan sekarang Anda tidak dapat memiliki data lain di sini,
di objek itu, kuncinya adalah satu-satunya properti
yang harus dimiliki, jadi di sini saya
akan memiliki properti nilai tetapi Anda bisa menamai val ini atau teks atau
apa pun yang Anda
inginkan, saya akan pergi dengan nilai dan
ini sekarang tujuan saya yang dimasukkan.
Jadi sekarang array tujuan kursus kami di sini adalah array objek di mana setiap objek memiliki properti
kunci dan properti nilai
dan sekarang jika kami memasukkan array tujuan kursus ke FlatList, FlatList senang karena mengharapkan sumber data di
mana Anda memiliki array objek, di mana setiap objek memiliki properti utama dan kemudian apa pun yang
Anda inginkan. Sekarang untuk menampilkan
data kami, itu tidak lagi cukup untuk mengakses itemData. item karena item sekarang menjadi objek dan
bukan hanya string lagi tetapi item akan memiliki kunci dan properti nilai sekarang karena itulah yang kami siapkan di
sana dan saya bisa mengakses properti nilai untuk menampilkan teks. Dan sekarang jika kita menyimpan ini dan ini membangun
kembali dan karena itu sekarang jika kita coba ini lagi dengan Learn React Native, tutup keyboard, Anda lihat kami tidak lagi mendapatkan peringatan
dan kami masih dapat menggulir ini tentu saja, kami tidak mendapatkan kesalahan di sini juga karena
sekarang, kami memiliki properti utama di sini. Sekarang jika Anda memiliki data di mana Anda
tidak memiliki properti utama dan Anda tidak ingin mengubahnya, katakanlah Anda memiliki ID sebagai gantinya yang akan menyebabkan peringatan seperti yang Anda
lihat jika saya
menguji ini, kami mendapatkan peringatan di sini , dalam hal ini Anda juga dapat menambahkan properti lain
ke FlatList selain data dan render item, Anda dapat menambahkan properti extractor kunci yang mengambil fungsi yang memberitahu FlatList
cara mengekstrak kunci Anda dan secara default, logikanya adalah saya akan melihat-lihat pada item dan mencari properti kunci
tetapi sekarang dengan extractor kunci, Anda dapat mengubahnya. Key extractor mengambil fungsi yang membutuhkan dua argumen - item yang dilihatnya dan indeks item itu
dan sekarang Anda perlu mengembalikan kunci dan secara default, itu akan mencari item. kunci, jadi itulah logika
default yang tidak perlu Anda tambahkan.
Sekarang di sini, saya mengubah kunci atau pengidentifikasi unik untuk berada di ID prop dan oleh karena itu, saya akan mengubahnya di sana
di extractor kunci untuk mendapatkan ID sebagai kunci dan sekarang dengan itu, Anda juga menyingkirkan peringatan karena
Anda memberi tahu React Native's FlatList cara mendapatkan kunci unik untuk setiap item dalam daftar
Anda.
Jadi sekarang di sini, jika Anda lagi belajar Bereaksi Asli di sini dan kami menambahkan ini, Anda akan melihat ini berfungsi, kami dapat menggulir ini
dan kami juga tidak mendapat peringatan. Jadi itu FlatList dan Anda harus menggunakan FlatList untuk daftar yang
sangat panjang, untuk daftar di mana Anda tidak tahu berapa lama mereka tetapi di mana mereka berpotensi sangat panjang
karena itu memberi Anda kinerja yang lebih baik daripada tampilan gulir yang di sisi lain adalah hebat jika
Anda tahu Anda hanya memiliki jumlah terbatas item yang mungkin akan melampaui batas layar Anda tetapi di mana Anda
tidak akan memiliki terlalu banyak item berlebihan yang diberikan di luar layar.