React.js'de Sonsuz Kaydırma Nasıl Eklenir?

Sizin gibi okuyucular MUO'yu desteklemeye yardımcı oluyor. Sitemizdeki bağlantıları kullanarak bir satın alma işlemi gerçekleştirdiğinizde, bir ortaklık komisyonu kazanabiliriz.

Kaydırdıkça daha fazla içerik yükleyen ve görüntüleyen bir web sitesine veya uygulamaya hiç rastladınız mı? Buna sonsuz kaydırma diyoruz.

Sonsuz kaydırma, sayfa yükleme sayısını azaltan popüler bir tekniktir. Ayrıca, özellikle mobil cihazlarda daha sorunsuz bir kullanıcı deneyimi sağlayabilir.

React.js'de sonsuz kaydırmayı uygulayabileceğiniz birkaç farklı yol vardır. Bunun bir yolu, tepki sonsuz kaydırma bileşeni gibi bir kitaplık kullanmaktır. Bu kitaplık, kullanıcı sayfayı aşağı kaydırdığında bir olayı tetikleyecek bir bileşen sağlar. Daha sonra daha fazla içerik yüklemek için bu olayı kullanabilirsiniz.

Sonsuz kaydırmayı uygulamanın başka bir yolu, React'in sağladığı yerleşik işlevleri kullanmaktır. Böyle bir işlev, bir bileşen ilk monte edildiğinde React'in çağırdığı "componentDidMount" işlevidir.

İlk veri yığınını yüklemek için bu işlevi kullanabilir ve ardından kullanıcı aşağı kaydırdığında daha fazla veri yüklemek için “componentDidUpdate” işlevini kullanabilirsiniz. ayrıca yapabilirsin

React kancalarını kullan sonsuz bir kaydırma özelliği eklemek için.

tepki-infinite-scroll-bileşenini kullanmak için, önce onu npm kullanarak kurmanız gerekir:

npm düzenlemek tepki-sonsuz-taslak-bileşen --kaydetmek

Ardından, onu React bileşeninize aktarabilirsiniz.

içe aktarmak Tepki itibaren 'tepki'
içe aktarmak Sonsuz kaydırma itibaren 'react-infinite-scroll-bileşeni'
sınıfUygulamauzanırTepki.Bileşen{
inşaatçı() {
Süper()
Bu.durum = {
öğeler: [],
 daha fazla var: doğru
 }
 }
componentDidMount() {
Bu.veriyi getir(1)
 }
veri getir = (sayfa) => {
sabit yeniÖğeler = []
için (izin vermek ben = 0; ben < 100; ben++) {
yeni öğeler.itmek(Ben )
 }
eğer (sayfa 100) {
Bu.setState({ daha fazla var: YANLIŞ })
 }
Bu.setState({ öğeler: [...this.state.items, ...newItems] })
 }
render() {
geri dönmek (
<div>
<h1>Sonsuz kaydırma</h1>
<Sonsuz kaydırma
 veriUzunluğu={Bu.durum.items.uzunluk}
 sonraki={Bu.veriyi getir}
 daha fazlası var={Bu.state.hasMore}
 yükleyici={<h4>Yükleniyor...</h4>}
 sonMesaj={
<p style={{ textAlign: 'merkez' }}>
<B>Yay! hepsini gördün</B>
</P>
 }
>
 {Bu.state.items.map((öğe, dizin) => (
<div anahtarı={dizin}>
 {öğe}
</div>
 ))}
</InfiniteScroll>
</div>
 )
 }
}
ihracatvarsayılan Uygulama

Bu kod, tepki-infinite-scroll-bileşen kitaplığından React ve InfiniteScroll bileşenini içe aktararak başlar. Daha sonra durum bilgisi olan bir bileşen oluşturur ve durumu boş bir bileşenle başlatır. öğeler dizi ve bir daha fazla var bayrak true olarak ayarlandı.

componentDidMount yaşam döngüsü yönteminde, veriyi getir ile bir yöntem sayfa parametresi 1. fetchData yöntemi, bazı verileri almak için bir API çağrısı yapar. Bu örnek sadece bazı sahte veriler üretir. Daha sonra 100 öğelik bir dizi oluşturur.

Sayfa parametresi 100 ise, başka öğe yoktur, bu nedenle hasMore bayrağını yanlış olarak ayarlayın. Bu, InfiniteScroll bileşeninin başka API çağrıları yapmasını durduracaktır. Son olarak, yeni verileri kullanarak durumu ayarlayın.

Oluşturma yöntemi, InfiniteScroll bileşenini kullanır ve bazı donanımlarda geçer. dataLength prop, items dizisinin uzunluğuna ayarlanır. Bir sonraki pervane, fetchData yöntemine ayarlanmıştır. hasMore prop, hasMore bayrağına ayarlanmıştır. Yükleyici desteği, bileşenin içeriğini bir yükleme göstergesi olarak işlemesine neden olur. Aynı şekilde, tüm verilerin yüklenmesi bittiğinde endMessage prop'u bir mesaj olarak işleyecektir.

InfiniteScroll bileşenine aktarabileceğiniz başka donanımlar da vardır, ancak bunlar en sık kullanacağınız donanımlardır.

Yerleşik İşlevleri Kullanma

React ayrıca, sonsuz kaydırmayı uygulamak için kullanabileceğiniz bazı yerleşik yöntemlere sahiptir.

İlk yöntem bileşenDidUpdate. React, bir bileşeni güncelleştirdikten sonra bu yöntemi çağırır. Bu yöntemi, kullanıcının sayfanın en altına kaydırıp kaydırmadığını kontrol etmek ve kaydırdıysa daha fazla veri yüklemek için kullanabilirsiniz.

İkinci yöntem ise taslak, kullanıcı kaydırdığında React'in çağırdığı. Kaydırma konumunu takip etmek için bu yöntemi kullanabilirsiniz. Kullanıcı sayfanın en altına kaydırdıysa, daha fazla veri yükleyebilirsiniz.

İşte sonsuz kaydırmayı uygulamak için bu yöntemleri nasıl kullanabileceğinize dair bir örnek:

içe aktarmak Tepki, {useState, useEffect} itibaren 'tepki'
işlevUygulama() {
sabit [öğeler, setItems] = useState([])
sabit [hasMore, setHasMore] = kullanımDevlet(doğru)
sabit [sayfa, setPage] = kullanımDevlet(1)
useEffect(() => {
 veri getir (sayfa)
 }, [sayfa])
sabit veri getir = (sayfa) => {
sabit yeniÖğeler = []
için (izin vermek ben = 0; ben < 100; ben++) {
yeni öğeler.itmek(Ben)
 }
eğer (sayfa 100) {
 setHasMore(YANLIŞ)
 }
setItems([...öğeler, ...yeniÖğeler])
 }
sabit onScroll = () => {
sabit kaydırmaÜst = belge.documentElement.scrollTop
sabit kaydırma Yüksekliği = belge.documentElement.scrollHeight
sabit müşteriYüksekliği = belge.documentElement.clientHeight
eğer (scrollTop + clientHeight >= kaydırma Yüksekliği) {
 setPage (sayfa + 1)
 }
 }
useEffect(() => {
 pencere.addEventListener('taslak', onScroll)
 dönüş () => pencere.removeEventListener('taslak', onScroll)
 }, [öğeler])
geri dönmek (
<div>
 {items.map((öğe, dizin) => (
<div anahtarı={dizin}>
 {öğe}
</div>
 ))}
</div>
 )
}
ihracatvarsayılan Uygulama

Bu kod, durumu ve yan etkileri yönetmek için useState ve useEffect kancalarını kullanır.

useEffect kancasında, geçerli sayfayla birlikte fetchData yöntemini çağırır. fetchData yöntemi, bazı verileri almak için bir API çağrısı yapar. Bu örnekte, tekniği göstermek için sadece bazı sahte veriler üretiyorsunuz.

for döngüsü, newItems dizisini 100 tamsayı ile doldurur. Sayfa parametresi 100 ise, hasMore bayrağını yanlış olarak ayarlayın. Bu, InfiniteScroll bileşeninin başka API çağrıları yapmasını durduracaktır. Son olarak, durumu yeni verilerle ayarlayın.

onScroll yöntemi, kaydırma konumunu izler. Kullanıcı sayfanın en altına kaydırdıysa, daha fazla veri yükleyebilirsiniz.

useEffect kancası, scroll olayı için bir olay dinleyicisi ekler. scroll olayı tetiklendiğinde, onScroll yöntemini çağırır.

Sonsuz kaydırma kullanmanın artıları ve eksileri vardır. Özellikle mobil cihazlarda daha akıcı bir deneyim sağlayarak kullanıcı arayüzünü iyileştirmeye yardımcı olabilir. Ancak, görecek kadar aşağı kaydıramayacakları için kullanıcıların içeriği kaçırmasına da yol açabilir.

Artıları ve eksileri tartmak önemlidir sonsuz kaydırma tekniği web sitenize veya uygulamanıza uygulamadan önce.

React.js web sitenize veya uygulamanıza sonsuz kaydırma eklemek, kullanıcı deneyimini iyileştirmeye yardımcı olabilir. Sonsuz kaydırma ile kullanıcıların daha fazla içerik görmek için tıklaması gerekmez. React.js uygulamanızda Infinite Scroll kullanmak, sayfa yükleme sayısını azaltmaya yardımcı olabilir ve bu da performansı artırabilir.

Ayrıca React uygulamanızı ücretsiz olarak Github sayfalarına kolayca dağıtabilirsiniz.