FixedSizeList: Merender Ribuan Item

Anda menambahkan react-window ke proyek menggunakan pengelola paket, misalnya dengan memasang paket react-window. Pustaka ini berukuran kecil dan tidak memiliki dependensi berat.

Setelah terpasang, Anda mengimpor komponen daftar yang diperlukan, biasanya FixedSizeList untuk baris yang semuanya memiliki tinggi sama.

FixedSizeList memerlukan beberapa properti agar berfungsi: tinggi dan lebar menentukan wadah gulir, itemCount menunjukkan jumlah elemen yang ada, dan itemSize menunjukkan tinggi setiap baris dalam piksel.

Properti anak adalah fungsi perenderan yang menggambar satu baris. Dengan semua informasi ini, komponen mengetahui geometri yang diperlukan untuk menerapkan teknik jendela dengan benar.

Fungsi perenderan anak menerima objek yang berisi indeks dan gaya. Indeks menunjukkan elemen yang harus dirender sehingga Anda dapat mengambil data yang tepat, sedangkan gaya menempatkan baris di dalam daftar virtual.

Anda mengembalikan JSX untuk satu baris tersebut, dan react-window memanggil fungsi ini hanya untuk baris yang sedang berada di dalam jendela.

Properti gaya sangat penting dan harus diterapkan pada elemen baris Anda. react-window menempatkan setiap baris secara absolut, menggunakan posisi atas untuk menempatkannya pada offset yang tepat di dalam wadah gulir yang tinggi.

Tanpa menerapkan gaya, semua baris akan bertumpuk pada posisi yang sama dan virtualisasi akan runtuh secara visual.

Kesalahan react-window yang paling umum adalah menghilangkan properti gaya pada baris. Daftar akan tampak rusak, dengan baris-baris yang saling menimpa di bagian atas dan pengguliran yang berperilaku tidak semestinya.

Selalu sebarkan atau tetapkan gaya yang diberikan pada elemen terluar baris Anda agar pemosisiannya tetap benar.

Alih-alih menangkap array di dalam fungsi perenderan, Anda dapat meneruskannya melalui properti itemData. react-window kemudian meneruskannya ke baris sebagai bidang data bersama indeks dan gaya.

Hal ini membuat komponen baris tidak bergantung pada sumber data tertentu dan dapat membantu memoiasasi, karena baris menerima datanya secara eksplisit.

FixedSizeList mendukung daftar horizontal melalui properti tata letak yang disetel ke horizontal, atau dengan menggunakan opsi arah, tergantung versinya. itemSize kemudian menunjukkan lebar, bukan tinggi.

Fitur ini berguna untuk karusel atau linimasa yang digulir secara horizontal dan juga berisi banyak elemen.

Properti overscanCount merender beberapa baris tambahan tepat di luar jendela yang terlihat. Penyangga ini mengurangi kemungkinan munculnya ruang kosong saat pengguliran cepat, sebelum baris baru dipasang.

Nilai overscan yang kecil membuat pengalaman lebih mulus, sedangkan nilai yang besar mengurangi manfaatnya karena terlalu banyak baris di luar layar ikut dipasang.

FixedSizeList memerlukan dimensi piksel yang ditentukan secara eksplisit, sehingga kurang praktis dalam tata letak responsif. Komponen pendamping AutoSizer mengukur induknya dan menyediakan lebar serta tinggi untuk daftar melalui properti perenderan.

Membungkus daftar dengan AutoSizer memungkinkan daftar memenuhi wadah fleksibel tanpa Anda menetapkan ukuran secara tetap, serta menyesuaikan diri ketika tata letak berubah.

FixedSizeList yang berfungsi menetapkan tinggi, lebar, itemCount, dan itemSize, lalu merender baris melalui fungsi anak yang menerapkan properti gaya. Secara opsional, AutoSizer dapat memberikan dimensinya dan overscanCount dapat menambahkan penyangga.

Dengan susunan ini, daftar sepanjang apa pun hanya memasang baris yang terlihat, sementara pengguliran tetap mulus.

Ingat kembali informasi yang harus diberikan kepada FixedSizeList agar dapat merender baris dengan benar.

FixedSizeList merender baris dengan tinggi sama menggunakan tinggi, lebar, itemCount, itemSize, dan fungsi perenderan anak yang menerima indeks serta gaya. Menerapkan properti gaya adalah keharusan; jika tidak, baris akan saling menimpa.

Teruskan data melalui itemData, dukung tata letak horizontal, tambahkan penyangga overscanCount yang kecil, dan gunakan AutoSizer untuk memenuhi wadah responsif tanpa menetapkan dimensi secara tetap.