FixedSizeList: Memaparkan Ribuan Item

Anda menambahkan react-window pada projek menggunakan pengurus pakej, contohnya dengan memasang pakej react-window. Pakej ini kecil dan tidak mempunyai kebergantungan berat.

Setelah dipasang, Anda mengimport komponen senarai yang diperlukan, paling lazimnya FixedSizeList untuk baris yang semuanya mempunyai ketinggian sama.

FixedSizeList memerlukan beberapa prop untuk berfungsi: tinggi dan lebar menentukan bekas tatalan, itemCount ialah bilangan entri yang wujud, dan itemSize ialah ketinggian setiap baris dalam piksel.

Prop elemen anak ialah fungsi pemaparan yang melukis satu baris. Dengan semua ini, komponen mengetahui geometri yang diperlukan untuk melaksanakan teknik tetingkap dengan betul.

Fungsi pemaparan elemen anak menerima objek yang mengandungi indeks dan gaya. Indeks menunjukkan entri yang perlu dipaparkan supaya Anda boleh mendapatkan data yang betul, manakala gaya meletakkan baris dalam senarai maya.

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

Prop gaya adalah penting dan mesti digunakan pada elemen baris Anda. react-window meletakkan setiap baris secara mutlak, menggunakan nilai atas untuk menempatkannya pada ofset yang betul di dalam bekas tatalan yang tinggi.

Tanpa menggunakan gaya, semua baris akan bertindih pada kedudukan yang sama dan pemayaan akan runtuh secara visual.

Kesilapan react-window yang paling biasa ialah meninggalkan prop gaya pada baris. Senarai akan kelihatan rosak, dengan baris bertindih di bahagian atas dan tatalan berfungsi dengan tidak betul.

Sentiasa sebarkan atau tetapkan gaya yang diberikan pada elemen paling luar baris Anda supaya kedudukannya kekal betul.

Daripada menangkap tatasusunan Anda dalam fungsi pemaparan, Anda boleh menghantarnya melalui prop itemData. react-window kemudiannya meneruskannya kepada baris sebagai medan data bersama-sama indeks dan gaya.

Ini memastikan komponen baris tidak bergantung gandingan dan boleh membantu penggunaan memo, kerana baris menerima datanya secara jelas.

FixedSizeList menyokong senarai mendatar melalui prop susun atur yang ditetapkan kepada pilihan mendatar, atau dengan menggunakan pilihan arah bergantung pada versi. itemSize kemudiannya mewakili lebar dan bukannya ketinggian.

Ini berguna untuk karusel atau garis masa yang menatal secara mendatar dan turut mengandungi banyak entri.

Prop overscanCount memaparkan beberapa baris tambahan di luar tetingkap yang kelihatan. Penimbal ini mengurangkan kemungkinan ruang kosong kelihatan semasa tatalan pantas sebelum baris baharu dipasang.

Lebihan kecil melancarkan pengalaman, manakala lebihan besar membazirkan manfaatnya dengan memasang terlalu banyak baris di luar skrin.

FixedSizeList memerlukan dimensi piksel yang dinyatakan dengan jelas, yang menyukarkan susun atur responsif. Komponen pendamping AutoSizer mengukur induknya dan membekalkan lebar serta ketinggian kepada senarai melalui prop pemaparan.

Membungkus senarai dalam AutoSizer membolehkan senarai memenuhi bekas fleksibel tanpa Anda menetapkan saiz secara keras, serta menyesuaikan diri apabila susun atur berubah.

FixedSizeList yang berfungsi menetapkan tinggi, lebar, itemCount dan itemSize, serta memaparkan baris melalui fungsi elemen anak yang menggunakan prop gaya. Jika diperlukan, AutoSizer membekalkan dimensinya dan overscanCount menambah penimbal.

Dengan semua ini, senarai yang mempunyai apa-apa panjang hanya mengekalkan baris yang kelihatan semasa dipasang, sementara tatalan kekal lancar.

FixedSizeList memaparkan baris yang sama tinggi menggunakan tinggi, lebar, itemCount, itemSize dan fungsi pemaparan elemen anak yang menerima indeks serta gaya. Penggunaan prop gaya adalah wajib, jika tidak baris akan bertindih.

Hantar data melalui itemData, sokong susun atur mendatar, tambah penimbal overscanCount yang kecil dan gunakan AutoSizer untuk memenuhi bekas responsif tanpa menetapkan dimensi secara keras.