VariableSizeList: Dinamik Satır Yükseklikleri

Bazen satırlar aynı ölçüde değildir: bir sohbet listesinde kısa ve uzun iletiler karışabilir veya bir akışta içerikleri farklı kartlar bulunabilir. FixedSizeList bunu işleyemez; çünkü tek bir sabit itemSize varsayar.

Bu durumlarda react-window, her öğenin kendi boyutunu belirtmesine olanak tanıyan bir liste türü sunar.

VariableSizeList, FixedSizeList gibi çalışır ancak öğe başına farklı bir boyut kabul eder. Bunun yerine onu içe aktarır ve belirli bir indeks için boyutu döndüren bir işlev sağlarsınız.

Diğer her şey, alt öğe oluşturma işlevi ve kritik stil özelliği aynı kalır; bu nedenle geçiş küçüktür.

VariableSizeList ile itemSize, bir indeks alan ve o satırın piksel cinsinden yüksekliğini döndüren bir işlevdir. react-window bu işlevi uzaklıkları hesaplamak ve görünür pencereye karar vermek için çağırır.

Bu, bilinen yükseklikleri ifade etmenizi sağlar; örneğin görsel içeren öğeler için daha uzun, yalnızca düz metin içerenler için daha kısa satırlar belirleyebilirsiniz.

Her satırın yüksekliğini önceden biliyorsanız itemSize işlevinden bu yüksekliği doğrudan döndürebilirsiniz. Yükseklikler oluşturulan içeriğe bağlıysa satırları çizildikten sonra ölçmeniz gerekir.

Önceden hesaplanan yükseklikler en basit ve en hızlı seçenektir; ölçülen yükseklikler daha esnektir ancak boyutları listeye geri aktarmak için ek çalışma gerektirir.

VariableSizeList, performans için öğe uzaklıklarını önbelleğe alır. Ölçülen bir yükseklik değiştiğinde, bu indeksten sonraki konumları yeniden hesaplaması için listenin başvurusunda resetAfterIndex yöntemini çağırmanız gerekir.

Bunu unutmak eski uzaklıkların kalmasına ve satırların hizasının bozulmasına neden olur; bu nedenle resetAfterIndex, dinamik ölçümün çalışmasını sağlayan temel unsurdur.

Bir tavuk-yumurta sorunu vardır: satırı oluşturmak için yüksekliğe ihtiyaç duyarsınız, ancak gerçek yüksekliği ancak satır oluşturulduktan sonra bilirsiniz. Liste, ölçebilmesi için önce satırı konumlandırmalıdır.

Bunu çözmek için önce bir tahminle oluşturmanız, ardından gerçek yükseklik öğrenildiğinde düzeltmeniz gerekir.

Standart düzen; satırları tahmini bir yükseklikle oluşturmak, çizimden sonra bir başvuru veya ResizeObserver kullanarak gerçek yüksekliklerini ölçmek, ölçülen değeri depolamak ve konumları güncellemek için resetAfterIndex'i çağırmaktır.

Bu döngü hızla yakınsar; böylece liste, ilk ölçüm geçişinden sonra doğru uzaklıklara yerleşir.

itemSize işlevi, genellikle useCallback ile sarmalanarak oluşturma işlemleri arasında kararlı kalmalıdır; böylece liste önbelleğe alınmış uzaklıklarını sürekli geçersiz kılmaz.

Satır içinde tanımlanan kararsız bir işlev gereksiz yeniden hesaplamaları zorlayabilir ve sanallaştırmanın sağlaması amaçlanan performansa zarar verebilir.

VariableSizeList, sabit bir ofset varsayamayacağı ve her öğenin boyutunu ayrı ayrı izlemesi gerektiği için FixedSizeList'e göre daha fazla iş yapar. Yükseklikler ölçüldüğünde, bu ek ölçüm de maliyet getirir.

Satırların gerçekten değişken olduğu listelerde bu maliyete değer; satırların aynı yükseklikte olduğu durumlarda FixedSizeList daha hızlı ve basit seçenek olmaya devam eder.

Tam dinamik ölçüm çok maliyetliyse bazen yaklaşık değer kullanabilirsiniz. Satırları birkaç sabit yükseklik sınıfında gruplamak veya makul bir ortalama kullanmak, FixedSizeList'i kullanmayı sürdürmenizi sağlayabilir.

Bu yaklaşım, piksel düzeyinde kusursuz yerleşimden basitlik ve hız uğruna vazgeçer; küçük ofset kusurları tolere edilebiliyorsa bu kabul edilebilir bir ödündür.

VariableSizeList'in her satırın yüksekliğini nasıl öğrendiğini hatırlayın.

VariableSizeList, itemSize değerini indeks alan bir işlev olarak kullanarak farklı yüksekliklere sahip satırları yönetir. Yükseklikler önceden hesaplanabilir veya ölçülebilir; ölçülen yükseklikler için resetAfterIndex ile tahmin-oluşturma-ölçme-güncelleme döngüsü gerekir.

useCallback ile itemSize işlevini kararlı tutun. Bu yaklaşım FixedSizeList'e göre daha maliyetlidir; bu nedenle satırların aynı yükseklikte olduğu veya yaklaşık değerin yeterli olduğu durumlarda sabit varyantı tercih edin.