VariableSizeList: Tinggi Baris Dinamis

Terkadang baris tidak seragam: daftar percakapan mencampur pesan pendek dan panjang, atau sebuah umpan memiliki kartu dengan isi yang beragam. FixedSizeList tidak dapat menangani hal ini karena mengasumsikan satu itemSize yang konstan.

Untuk kasus-kasus ini, react-window menyediakan jenis daftar yang memungkinkan setiap elemen menentukan ukurannya sendiri.

VariableSizeList bekerja seperti FixedSizeList, tetapi menerima ukuran untuk setiap elemen. Anda mengimpornya sebagai gantinya dan menyediakan fungsi yang mengembalikan ukuran untuk indeks tertentu.

Hal lainnya, yaitu fungsi perenderan anak dan properti gaya yang penting, tetap sama, sehingga proses perpindahannya kecil.

Dengan VariableSizeList, itemSize adalah fungsi yang menerima indeks dan mengembalikan tinggi baris tersebut dalam piksel. react-window memanggilnya untuk menghitung offset dan menentukan jendela yang terlihat.

Dengan cara ini, Anda dapat menyandikan tinggi yang sudah diketahui, misalnya baris yang lebih tinggi untuk elemen dengan gambar dan baris yang lebih pendek untuk teks biasa.

Jika Anda sudah mengetahui tinggi setiap baris sebelumnya, Anda dapat langsung mengembalikannya dari fungsi itemSize. Jika tinggi bergantung pada isi yang dirender, Anda harus mengukur baris setelah selesai digambar.

Tinggi yang dihitung sebelumnya adalah pilihan paling sederhana dan cepat; tinggi yang diukur lebih fleksibel, tetapi memerlukan pekerjaan tambahan untuk memasukkan ukuran kembali ke dalam daftar.

VariableSizeList menyimpan offset elemen dalam tembolok demi kinerja. Saat tinggi yang diukur berubah, Anda harus memanggil metode resetAfterIndex pada referensi daftar agar daftar menghitung ulang posisi mulai dari indeks tersebut.

Jika langkah ini dilupakan, offset yang sudah usang dan baris yang tidak sejajar akan tersisa, sehingga resetAfterIndex menjadi kunci agar pengukuran dinamis dapat berfungsi.

Ada masalah yang saling bergantung: Anda memerlukan tinggi untuk merender baris, tetapi baru mengetahui tinggi sebenarnya setelah baris dirender. Daftar harus menempatkan baris terlebih dahulu sebelum dapat mengukurnya.

Untuk mengatasinya, Anda harus merender dengan perkiraan terlebih dahulu, lalu memperbaikinya setelah tinggi sebenarnya diketahui.

Pola standarnya adalah merender baris dengan tinggi perkiraan, mengukur tinggi sebenarnya setelah selesai digambar menggunakan ref atau ResizeObserver, menyimpan nilai yang diukur, lalu memanggil resetAfterIndex untuk memperbarui posisi.

Putaran ini cepat mencapai hasil yang stabil, sehingga daftar menetap pada offset yang benar setelah pengukuran pertama.

Fungsi itemSize harus stabil di antara proses perenderan, biasanya dengan membungkusnya dalam useCallback, agar daftar tidak terus-menerus membatalkan tembolok offsetnya.

Fungsi yang tidak stabil dan didefinisikan secara langsung dapat memaksa penghitungan ulang yang tidak perlu, sehingga merusak kinerja yang seharusnya diberikan oleh virtualisasi.

VariableSizeList melakukan lebih banyak pekerjaan daripada FixedSizeList karena tidak dapat mengasumsikan posisi yang konstan dan harus melacak ukuran setiap elemen. Saat tinggi diukur, pengukuran tambahan juga menambah biaya.

Untuk daftar yang barisnya memang bervariasi, biaya ini sepadan; untuk baris yang seragam, FixedSizeList tetap menjadi pilihan yang lebih cepat dan sederhana.

Jika pengukuran dinamis yang tepat terlalu mahal, Anda terkadang dapat menggunakan perkiraan. Mengelompokkan baris ke dalam beberapa kelas tinggi tetap atau menggunakan rata-rata yang wajar dapat memungkinkan Anda tetap memakai FixedSizeList.

Hal ini menukar tata letak yang sempurna hingga tingkat piksel dengan kesederhanaan dan kecepatan, sebuah kompromi yang dapat diterima ketika ketidaksempurnaan kecil pada posisi masih dapat ditoleransi.

Ingat kembali cara VariableSizeList mempelajari tinggi setiap baris.

VariableSizeList menangani baris dengan tinggi yang berbeda-beda dengan menerima itemSize sebagai fungsi dari indeks. Tinggi dapat dihitung sebelumnya atau diukur; tinggi yang diukur memerlukan perulangan perkiraan–tampilkan–ukur–perbarui dengan resetAfterIndex.

Pertahankan kestabilan fungsi itemSize dengan useCallback. Biayanya lebih besar daripada FixedSizeList, jadi untuk baris yang seragam atau ketika perkiraan sudah memadai, pilih varian tetap.