FixedSizeList: Binlerce Ögeyi Görüntüleme

react-window'u bir projeye paket yöneticinizle eklersiniz; örneğin react-window paketini kurarsınız. Paket küçüktür ve ağır bağımlılıkları yoktur.

Kurulumdan sonra ihtiyacınız olan liste bileşenlerini içe aktarırsınız. Satırların tümü aynı yüksekliği paylaşıyorsa en sık FixedSizeList kullanılır.

FixedSizeList'in çalışması için birkaç özelliğe ihtiyacı vardır: yükseklik ve genişlik, kaydırma kapsayıcısını tanımlar; itemCount, kaç öğe bulunduğunu; itemSize ise her satırın piksel cinsinden yüksekliğini belirtir.

Alt öğeler özelliği, tek bir satırı çizen bir oluşturma işlevidir. Bu bilgiler sayesinde bileşen, pencerelemeyi doğru yapmak için ihtiyaç duyduğu geometriyi bilir.

Alt öğeleri oluşturan işlev, indeks ve stil içeren bir nesne alır. İndeks, hangi öğenin oluşturulacağını belirtir ve doğru veriyi bulmanızı sağlar; stil ise satırı sanal listenin içindeki konumuna yerleştirir.

Bu tek satır için JSX'i döndürürsünüz; react-window da bu işlevi yalnızca o anda pencerede bulunan satırlar için çağırır.

Stil özelliği zorunludur ve satır öğenize uygulanmalıdır. react-window, her satırı mutlak olarak konumlandırır ve uzun bir kaydırma kapsayıcısının içinde doğru uzaklığa yerleştirmek için üst konumunu kullanır.

Stili uygulamazsanız tüm satırlar aynı konumda üst üste yığılır ve sanallaştırma görsel olarak çöker.

react-window kullanırken yapılan en yaygın hata, satırdaki stil özelliğini atlamaktır. Satırlar üstte üst üste görünür ve kaydırma yanlış davranır; liste bozulmuş gibi görünür.

Konumlandırmanın doğru kalması için sağlanan stili satırınızın en dış öğesine her zaman yayın veya atayın.

Diziyi oluşturma işlevinin kapsamına almak yerine itemData özelliği üzerinden geçirebilirsiniz. react-window bunu daha sonra indeks ve stilin yanında bir veri alanı olarak satıra iletir.

Bu, satır bileşenini bağımsız tutar ve satır verilerini açıkça aldığı için anımsamaya yardımcı olabilir.

FixedSizeList, yatay olarak ayarlanmış layout özelliği üzerinden yatay listeleri destekler; sürüme bağlı olarak yön seçeneklerini kullanmak da mümkündür. Bu durumda itemSize, yükseklik yerine genişliği belirtir.

Bu özellik, çok sayıda öğe içeren ve yatay olarak kaydırılan döngüler veya zaman çizelgeleri için kullanışlıdır.

overscanCount özelliği, görünür pencerenin hemen dışına birkaç ek satır oluşturur. Bu arabellek, hızlı kaydırma sırasında yeni satırlar bağlanmadan önce boş alan görme olasılığını azaltır.

Küçük bir ön tarama deneyimi akıcılaştırır; büyük bir ön tarama ise ekran dışındaki çok fazla satırı bağlayarak sağladığı yararı boşa harcar.

FixedSizeList'in açık piksel boyutlarına ihtiyacı vardır; bu, duyarlı yerleşimlerde kullanışsız olabilir. Yardımcı AutoSizer bileşeni, üst öğesini ölçer ve bir oluşturma özelliği aracılığıyla genişlik ile yüksekliği listeye sağlar.

Listeyi AutoSizer ile sarmalamak, boyutları sabit kodlamadan esnek bir kapsayıcıyı doldurmasına ve yerleşim değiştikçe uyum sağlamasına olanak tanır.

Çalışan bir FixedSizeList; yüksekliği, genişliği, itemCount'ı ve itemSize'ı ayarlar, ardından stil özelliğini uygulayan bir alt öğe işlevi aracılığıyla satırları oluşturur. İsteğe bağlı olarak AutoSizer boyutları sağlar ve overscanCount bir arabellek ekler.

Bu düzen kurulduğunda, uzunluğu ne olursa olsun bir liste yalnızca görünür satırları bağlı tutar ve kaydırma akıcı kalır.

Satırları doğru oluşturmak için FixedSizeList'e hangi bilgilerin verilmesi gerektiğini hatırlayın.

FixedSizeList; yükseklik, genişlik, itemCount, itemSize ve indeks ile stili alan bir alt öğe oluşturma işlevini kullanarak eşit yükseklikte satırlar oluşturur. Stil özelliğinin uygulanması zorunludur; aksi hâlde satırlar üst üste biner.

Verileri itemData ile geçirin, yatay yerleşimi destekleyin, küçük bir overscanCount arabelleği ekleyin ve boyutları sabit kodlamadan duyarlı kapsayıcıları doldurmak için AutoSizer kullanın.