Bizim uygulama sonsuz kaydırma heterojen öğelerin büyük listeleri gezinmek için kullanır. Bir iki yöntem vardır:

• Kullanıcılarımızın 10.000 öğe listesi için ameliyat oldu ve 3 K kaydırmak gerekiyor .
• Bu sadece DOM tarayıcı önce performans kabul edilemez olur, bir kaç yüz var, böylece zengin öğeler vardır.
• Öğeleri Yükseklikleri farklı.
• Öğeleri görüntüler içerebilir ve kullanıcı belirli bir tarihe atlamak için izin verir. Bu kullanıcı yüklediğinizde içeriği aşağı iteceğini olan görüş yukarıda görüntüleri yüklemek için gereken listesinde bir noktaya atlayabilir, çünkü zor. Bunu işlemek için başarısız kullanıcı bir tarih atlamak anlamına gelir, ama daha erken bir tarihe kaymıştır.

Bilinen, eksik çözümler:

• https://github.com/guillaumervls/react-infinite-scroll - Bu sadece basit bir daha alt" bileşeni. çıktığımızda "yük. Binlerce ürün üzerine ölür yani DOM herhangi bir itlaf yok.

• http://blog.vjeux.com/2013/javascript/scroll-position-with-react.html - üst takarken ve kaydırma konumu deposu geri yüklemek için nasıl Gösteriryaalt ekleme, ancak her ikisini de bir arada.

Komple bir çözüm (bu harika olurdu.) için kod aramıyorum Bunun yerine, aradığım "bu durum modeli". Tepki Kaydırma konumu devlet mi, değil mi? Ne devlet listesinde pozisyonumu korumak için takip edilmesi gerekir? Ne devlet alt kısmındaki kaydırma ben ne zaman yeni bir işlemek veya işlenmiş ne üst tetik ben o kadar tutmam gerekir mi?

Bu sonsuz bir masa ve sonsuz kaydırma bir senaryo bir karışımıdır. Bunun için bulduğum en iyi Özet şudur:

Genel bakış

Bir dizi alır <List> bir bileşentümçocuklar. Hazır olmadığımız için, çok ucuz sadece onları ayırmak ve onları atmak. Eğer 10k ayırmalarını çok büyük ise, bir dizi alır ve öğeleri döndüren bir işlevi yerine iletebilirsiniz.

<List>
  {thousandelements.map(function() { return <Element /> })}
</List>

List bileşen kaydırma konumu ne izlemek ve sadece görünümünde olan çocuklar işlemek tutuyor. İşlenmez önceki öğeler sahte başında büyük boş bir div ekler.

Şimdi, ilginç bölümü Element bir bileşen oluşturulur sonra, onun yüksekliğini ölçmek ve List içinde saklayın. Bu spacer yüksekliğini hesaplamak ve birçok öğe görünümünde görüntülenen nasıl olması gerektiğini haber verir.

Resim

Resim yüklerken her şeyi "" aşağı. atlama yapıyorlar diyorsunuz Bunun için çözüm ımg etiketi görüntü boyutlarını ayarlamak için. . Bu şekilde tarayıcı beklemek görüntülenen olacak bilmeden önce indirmek gerek yok. Bu biraz altyapı gerektirir ama buna değer.

Eğer boyutu bilirsen mi önceden, sonra resim yüklendiğinde dinleyicileri ekleyin ve yüklendiği zaman sonra görüntülenen boyutunu ölçmek ve saklı satır yüksekliğini güncelleme ve kaydırma konumunu dengelemek.

Rastgele bir öğe atlama

Eğer listeden rastgele bir eleman atlamak için aradaki öğelerin boyutunu bilmediğin için kaydırma konumu ile bazı hile gerektirir. Senin için önerim zaten hesaplanmış ve son yükseklik biliyor kaydırma konumu (eleman sayısı * ortalama) atlamak zorunda unsurları Yükseklikleri ortalama.

Bu tam olmadığından son bilinen pozisyonu ulaştığınızda sorunlara neden oluyor. Bir çatışma olduğunda, sadece bunu düzeltmek için kaydırma konumunu değiştirmek. Bu kaydırma çubuğunu biraz hareket gelecek, ama onu çok fazla etkilemez.

Ayrıntıları Tepki

İşler arasında tutulan tüm işlenen öğeler için key sağlamak istiyorsunuz. İki strateji vardır: (1) sadece n tuşları (0, 1, 2, ... n) n görüntüleyebilirsiniz elemanları maksimum sayıdır ve n. modül konumlarını kullanın (2) elemanı başına farklı bir anahtar var. Eğer tüm öğeleri benzer bir yapı paylaşırsanız iyi kullanmak (1) yeniden dom düğümleri tutmak için. Eğer öyleyse neden kullanmıyorlar diye (2).

Sadece devlet Tepki iki parça ederdim: ilk öğenin dizini ve öğelerin sayısı görüntülenir. Geçerli kaydırma konumunu ve tüm unsurları yüksekliği doğrudan this bağlı olacaktır. SetState kullanırken aslında sadece aralığı değiştiğinde gerçekleşmesi gereken bir rerender yapıyorsun.

Burada sonsuz bir liste, bu cevap olarak tanımlarım bazı teknikler kullanarak bir örnek http://jsfiddle.net/vjeux/KbWJ2/9/. Bazı iş ama Tepki kesinlikle sonsuz bir liste uygulamak için iyi bir yoldur :) olacak