Sanallaştırmayı Veri Getirmeyle Birleştirme

Sonsuz kaydırma, açık sayfa düğmeleriyle sayfalandırmak yerine kullanıcı listenin sonuna yaklaştıkça daha fazla veri yükler. Sanallaştırmayla birleştirildiğinde, çok büyük veri kümelerinde akıcı biçimde gezinmenizi sağlar.

Liste yalnızca görünür satırları gösterirken, kullanıcı alta ulaşmadan hemen önce arka planda yeni veriler çekilir.

react-window liste bileşenleri, o anda hangi öğe indekslerinin oluşturulduğunu bildiren bir onItemsRendered geri çağırmasını kabul eder. Bu geri çağırma, görünür aralığın ve önceden oluşturma aralığının başlangıç ve bitiş indekslerini sağlar.

Bu geri çağırma, kaydırmaya bağlanmanızı sağlar; ham kaydırma olaylarını kendiniz bağlamadan kullanıcının listede ne kadar ilerlediğini algılayabilirsiniz.

Veri çekme zamanını anlamak için onItemsRendered'dan gelen overscanStopIndex'i mevcut itemCount ile karşılaştırın. Oluşturulan pencere yüklenen verilerin sonuna yaklaştığında daha fazla veriye ihtiyaç vardır.

Önceden oluşturma bitiş indeksini kullanmak biraz ön süre sağlar ve veri çekmeyi, kullanıcı son satıra gerçekten ulaşmadan hemen önce tetikler.

Bitiş indeksi bir eşiği geçtiğinde, örneğin itemCount değerinin bir ekranlık yakınına geldiğinde, sonraki sayfa için veri çekme işlevinizi çağırırsınız. Birden fazla örtüşen isteğin gönderilmemesi için bunu bir koşulla koruyun.

Bir yükleme bayrağı kullanmak veya hâlihazırda süren bir veri çekme işlemi olup olmadığını kontrol etmek, kullanıcı tetikleme bölgesinde kaydırırken yinelenen istekleri önler.

Yararlı bir yöntem, daha fazla veri mevcutsa itemCount'ı yüklenen öğe sayısının bir fazlası olarak oluşturmaktır. Ek satır bir dönen simge göstererek veri çekme işleminin sürdüğünü belirtir.

Yeni veriler geldiğinde sayı artar ve dönen simgenin bulunduğu satır gerçek içerikle değiştirilir; böylece akıcı bir görsel geri bildirim sağlanır.

react-window-infinite-loader yardımcı paketi bu mantığı sizin için kapsüller. isItemLoaded, loadMoreItems ve itemCount değerlerini sağlarsınız; paket, kullanıcı yüklenmemiş satırlara doğru kaydırdıkça yükleyicinizi çağırır.

Hangi aralıkların yüklendiğine ilişkin kayıtları tutar ve gereksiz yükleme çağrılarını önler; böylece sağlam bir sonsuz kaydırma uygulamak kolaylaşır.

Yüklenmemiş indeksler için boşluklar yerine yer tutucu veya iskelet satırları oluşturabilirsiniz. Oluşturma işlevi, belirli bir indeksteki öğenin yüklenip yüklenmediğini kontrol eder ve yüklenmemişse bir iskelet gösterir.

İskeletler yerleşimi korur ve ilerlemeyi bildirir; bu da bir sonraki sayfa gelene kadar boş alan göstermekten daha iyi bir deneyim sunar.

Veri çekme işlemleri başarısız olabilir; bu nedenle hataları uygun biçimde yönetin. Son kısımda, başarısız aralığın yükleme işlevini yeniden çağıran bir yeniden deneme düğmesine sahip özel bir hata satırı oluşturabilirsiniz.

Bu yaklaşım, kısa bir aksaklıktan sonra listenin kullanılabilir kalmasını sağlar ve tüm sayfayı yeniden yüklemeden kurtulmanız için kullanıcıya açık bir yol sunar.

Sonsuz listeleri besleyen iki yaygın sayfalandırma biçimi vardır. Ofset sayfalandırması sayfa numarasına veya atlama sayısına göre istek gönderirken imleç sayfalandırması, son görülen öğeyi gösteren opak bir imleçten sonraki öğeleri ister.

İmleç sayfalandırması, canlı ve değişen veriler için genellikle daha güvenilirdir; çünkü öğeler eklendiğinde ofsetlerin neden olabileceği kaymaları ve yinelemeleri önler.

React Query useInfiniteQuery, sanallaştırmayla doğal biçimde uyumludur. Çekilen sayfaları, sonraki imleci ve yükleme ile hata durumlarını yönetirken react-window, düzleştirilmiş sayfaları verimli biçimde oluşturur.

Sayfaları liste için tek bir dizi hâline getirir ve onItemsRendered eşiğinizden fetchNextPage'i çağırırsınız; böylece önbelleğe alma ve yeniden deneme özelliklerinden ek çaba göstermeden yararlanırsınız.

Sanallaştırılmış bir sonsuz listede ne zaman daha fazla veri çekileceğini belirleyin.

Sonsuz kaydırma, kullanıcı sona yaklaştıkça sayfaları yükler. onItemsRendered indeksleri bildirir; overscanStopIndex ile itemCount'ı karşılaştırmak, yinelenen isteklere karşı koruma sağlayarak ne zaman veri çekileceğini gösterir.

Yer tutucu ve hata satırlarını, kayıt tutma için react-window-infinite-loader'ı ve canlı veriler için imleç sayfalandırmasını kullanın. React Query useInfiniteQuery, sayfaları, imleçleri ve durumları react-window oluşturmasıyla birlikte yönetir.