Web uygulamaları büyük miktarda veriyi yönetir. Örneğin, e-ticaret uygulamaları, milyarlarca veriyi hem düzenli hem de görsel olarak çekici bir şekilde görüntüler. Temel olarak, verilerin kullanıcıların anlaması ve gezinmesi kolay bir şekilde sunulması gerekir.

Ancak, tüm verilerin tek bir sayfada işlenmesi performans sorunlarına, daha yavaş yükleme sürelerine ve zayıf kullanıcı deneyimlerine yol açabilir. Bu nedenle, sayfalandırma mantığının uygulanması bu sorunları önemli ölçüde azaltabilir.

React'te, sayfalandırma kitaplıkları tarafından sağlanan önceden oluşturulmuş bileşenleri kullanmayı tercih edebilirsiniz, alternatif olarak, React kancalarını kullanarak özel bir sayfalandırma sistemi oluşturabilirsiniz.

İstemci Tarafında Sayfalandırmayı Uygulama

Uygulamalarda sayfalandırmayı uygulamanın iki yolu vardır: istemci tarafı ve sunucu tarafı sayfalandırma. Bununla birlikte, seçtiğiniz format ne olursa olsun, temel konsept aynı kalır. İstemci tarafında sayfalandırma, kullanıcının tarayıcısında, istemci tarafında sayfalandırma mantığının işlenmesini içerir.

Çeşitli teknikler kullanarak istemci tarafı sayfalandırmayı uygulayabilirsiniz. Bu teknikler şunları içerir:

1. Sayfa tabanlı sayfalandırma: Bu yöntem, verileri genellikle sayfa başına belirli sayıda öğe görüntüleyerek sabit boyutlu parçalara veya sayfalara bölmeyi içerir. Kullanıcılar, sayfa numaraları veya önceki ve sonraki düğmeleriyle etiketlenmiş gezinme bağlantılarını veya düğmelerini kullanarak sayfalar arasında gezinebilir. Bu, arama motorları ve e-ticaret uygulamaları ile popüler bir uygulamadır.
2. sonsuz kaydırma: Bu yöntem, kullanıcı sayfayı aşağı kaydırırken dinamik olarak yeni verilerin yüklenmesini ve işlenmesini içerir, böylece sorunsuz ve sürekli bir göz atma deneyimi yaratır. Bu teknik, sosyal medya beslemeleri gibi sürekli genişleyen büyük veri kümeleriyle uğraşırken özellikle yararlıdır.

React Hooks Kullanarak Sayfa Tabanlı Sayfalandırmayı Uygulama

Başlamak için bir React projesi oluşturun. Şunu kullanabilirsiniz: Temel bir React uygulaması kurmak için create-react-app JavaScript komutuyerel olarak veya bir React projesi oluşturmak için Vite'ı kullanma makinenizde.

Bu eğitimde Vite kullanılmıştır, bu projenin kodunu burada bulabilirsiniz. GitHub deposu.

React projenizi kurduktan sonra, sayfa tabanlı sayfalandırmayı uygulamaya geçelim React Hooks'u kullanma.

Veri Kümesini Yapılandırma

İdeal olarak, genellikle bir veritabanından veri alır ve görüntülersiniz. Ancak, bu öğretici için, bir kukladan veri alacaksınız JSONYer Tutucu API'sı yerine.

İçinde kaynak dizin, yeni bir tane oluştur bileşenler/sayfalama dosyasını açın ve aşağıdaki kodu ekleyin.

1. Bir React işlevsel bileşeni oluşturun ve aşağıdaki durumları tanımlayın.

   içe aktarmak Tepki, { useEffect, useState } itibaren"tepki";
   içe aktarmak"./style.component.css";
   işlevsayfalandırma() {
   sabit [veri, setData] = useState([]);
   sabit [currentPage, setcurrentPage] = useState(1);
   sabit [itemsPerPage, setitemsPerPage] = useState(5);
   sabit [pageNumberLimit, setpageNumberLimit] = useState(5);
   sabit [maxPageNumberLimit, setmaxPageNumberLimit] = useState(5);
   sabit [minPageNumberLimit, setminPageNumberLimit] = useState(0);
   geri dönmek (
    <>
   
    Sayfalandırma Bileşeni</h1> 
   >
   
    </>
    );
   }
   ihracatvarsayılan sayfalandırma;

2. Sahte API'den veri almak için mantığı uygulayın. İçinde sayfalandırma bileşen, aşağıdakini ekleyin.

    useEffect(() => {
    gidip getirmek(" https://jsonplaceholder.typicode.com/todos")
    .Daha sonra((cevap) => yanıt.json())
    .Daha sonra((json) => setData (json));
    }, []);
   sabit ekranVeri = (veri) => {
   geri dönmek (
   
   
    {veri.uzunluk > 0 &&
    veri.harita((yapılacaklar, dizin) => {
   geri dönmek<lianahtar={dizin}>{todo.title}li>;
    })}
    </ul>
    );
    };
   

   Yukarıdaki kod iki ana amaca hizmet eder. İlk olarak, bileşen takıldıktan sonra, useEffect kanca, daha sonra JSON formatına dönüştürülen harici API uç noktasından veri almak için tetikler. Ortaya çıkan JSON verileri daha sonra güncellemek için kullanılır. veri getirilecek yapılacaklar verileriyle durum değişkeni. ikinci olarak, ekran verisi işlev, getirilen verileri bir bağımsız değişken olarak alır ve verileri sırasız bir yapılacaklar listesi olarak işler.
3. Geri dönüş bölümünde sayfalandırma bileşen, dahil ekran verisi getirilen verileri tarayıcıda işlemek için işlev. İşte kodun güncellenmiş bir versiyonu:

   geri dönmek (
    <>
    Sayfalandırma Bileşeni</h1> 
   >
    {displayData (veri)}
    </>
   );
   

   Arayarak displayData (veri) JSX öğesi içinde ve veri durum değişkenini bir parametre olarak kullanırsanız, işlev getirilen verileri tarayıcıda sırasız bir liste olarak işler.

Bu özel durumda, işlenen liste iki yüz yapılacak işlerden oluşur. Ancak, gerçek dünya senaryolarında uygulamalar büyük miktarda veriyi yönetecektir. Tüm bu verileri tek bir web sayfasında görüntülemek, yavaş yükleme süreleri ve genel olarak zayıf uygulama performansı gibi performans sorunlarına neden olabilir.

Bunu ele almak için, her sayfanın kullanıcıların gezinme düğmelerini kullanarak ayrı ayrı erişebileceği sınırlı sayıda öğe içerdiğinden emin olmak için sayfalandırma işlevini dahil etmek uygun olacaktır.

Bu yaklaşım, kullanıcıların veriler arasında daha yönetilebilir ve düzenli bir şekilde gezinmesine olanak tanıyarak uygulamanın genel performansını ve kullanıcı deneyimini iyileştirir.

Sayfa Başına Sınırlı Sayıda Öğe Görüntülemek İçin Sayfalandırma Mantığını Uygulama

Her sayfada hangi yapılacak iş öğelerinin oluşturulacağını belirlemek için gerekli mantığı uygulamamız gerekir. Ancak devam etmeden önce, mevcut yapılacaklar öğelerine göre gereken toplam sayfa sayısını belirlemek önemlidir.

Bunu başarmak için aşağıdaki kodu ekleyebilirsiniz. sayfalandırma bileşen:

sabit sayfalar = [];
için (izin vermek ben = 1; ben <= Matematik.ceil (veri.uzunluk / sayfa başına öğeler); ben++) {
 sayfalar.push (i);
 }

Yukarıdaki kod parçacığı, veri dizinin uzunluğunu bölerek gereken toplam sayfa sayısını hesaplar. veri sayfa başına istenen öğe sayısına göre sıralayın—sayfa başına ilk öğe sayısı, itemPerage durum.

Bununla birlikte, mantığı test etmek için bu sayıyı gerektiği gibi güncelleyebilirsiniz. Son olarak, her sayfa numarası daha sonra listeye eklenir. sayfalar sıralamak. Şimdi sayfa başına bir dizi öğe görüntüleme mantığını uygulayalım.

sabit indexOfLastItem = currentPage * itemPerPage;
sabit indexOfFirstItem = indexOfLastItem - itemPerPage;
sabit pageItems = data.slice (indexOfFirstItem, indexOfLastItem);

Bu kod, tarayıcı sayfasında işlenecek yapılacakları belirler. geçerli sayfa Ve itemPerage değişkenler—dilim yöntemini kullanarak veri dizisinden yapılacaklar kümesi için karşılık gelen dizinleri çıkarır. Dizinler daha sonra istenen sayfaya ait belirli yapılacak işleri almak için kullanılır.

Şimdi, yapılacak işleri görüntülemek için ekran verisi geçirerek işlev sayfa Öğeleri parametre olarak. İşte kodun güncellenmiş bir versiyonu:

geri dönmek (
 <>
 Sayfalandırma Bileşeni</h1> 
>
 {displayData (pageItems)}
 </>
);

Bu güncellemeyi yaparak, ekran verisi işlevi, geçerli sayfayı yansıtacak şekilde sınırlı sayıda yapılacak iş öğesini uygun şekilde işleyecektir.

Gezinme Düğmeleri ile Sayfa Erişimini ve Gezinmeyi Kolaylaştırma

Kullanıcıların farklı sayfalarda kolayca gezinmesini ve içeriğe erişmesini sağlamak için, belirli sayfa numaralarını belirten düğmelerin yanı sıra önceki ve sonraki düğmeleri eklemeniz gerekir.

İlk olarak, sayfa numarası düğmelerinin mantığını uygulayalım. İçinde sayfalandırma bileşen, aşağıdaki kodu ekleyin.

sabit handleClick = (etkinlik) => {
 geçerliSayfayı ayarla(Sayı(event.target.id));
 };
sabit renderPageNumbers = sayfalar.map((sayı) => {
eğer (sayı < maxPageNumberLimit +1 && sayı > minPageNumberLimit) {
geri dönmek (
 anahtar={sayı}
 id={sayı}
 onClick={handleClick}
 className={currentPage == sayı? "aktif": hükümsüz}
 >
 {sayı}
 </li>
 );
 } başka {
geri dönmekhükümsüz;
 }
 });

bu koluTıklayın işlev, bir kullanıcı bir sayfa numarası düğmesine tıkladığında tetiklenir. Bu eylem daha sonra günceller geçerli sayfa seçilen sayfa numarası ile durum değişkeni.

bu renderSayfaNumaraları değişken kullanır harita üzerinde yineleme yöntemi sayfalar dizi ve dinamik olarak her sayfa numarasını temsil eden liste öğeleri oluşturur. Tanımlanan maksimum ve minimum sayfa sayısı sınırlarına göre hangi sayfa numaralarının oluşturulacağını belirlemek için koşullu mantık uygular.

Son olarak, sonraki ve önceki düğmelerin kodunu ekleyin.

sabit handleNextbtn = () => {
 setcurrentPage (currentPage + 1);
eğer (geçerli Sayfa + 1 > maxPageNumberLimit) {
 setmaxPageNumberLimit (maxPageNumberLimit + pageNumberLimit);
 setminPageNumberLimit (minPageNumberLimit + pageNumberLimit);
 }
 };
sabit handlePrevbtn = () => {
 setcurrentPage (currentPage - 1);
eğer ((geçerli sayfa - 1) % sayfaSayıSınırı == 0) {
 setmaxPageNumberLimit (maxPageNumberLimit - pageNumberLimit);
 setminPageNumberLimit (minPageNumberLimit - pageNumberLimit);
 }
 };

Gezinme düğmelerini oluşturmak için JSX öğelerini aşağıdaki gibi güncelleyin:

geri dönmek (
 <>
 Sayfalandırma Bileşeni</h1> 
>
 {displayData (pageItems)}
"sayfa numaraları">




 onClick={handlePrevbtn}
 disable={currentPage == sayfalar[0]? doğru: YANLIŞ}
 > Önceki
 </button>
 </li>

 {renderPageNumbers}


 onClick={handleNextbtn}
 disable={currentPage == sayfalar[pages.length - 1]? doğru: YANLIŞ}
 > İleri
 </button>
 </li>
 </ul>
 </>
 );

Bileşen oluşturulduğunda, sayfa numaralarını, önceki ve sonraki düğmeleri ve geçerli sayfa için karşılık gelen veri öğelerini görüntüler.

Sayfalandırma Kitaplıkları ve Özel Sayfalandırma Sistemleri Arasında Seçim Yapma

Sayfalandırma kitaplıklarını kullanmak veya özel bir sayfalandırma sistemi oluşturmak arasında karar vermek söz konusu olduğunda, seçim çeşitli faktörlere bağlıdır. React-paginate gibi sayfalandırma kitaplıkları, önceden oluşturulmuş bileşenler ve işlevsellik sağlayarak hızlı ve basit uygulamaya izin verir.

Öte yandan, React kancalarını kullanarak özel bir sayfalandırma sistemi oluşturmak, sayfalandırma mantığı ve kullanıcı arabirimi üzerinde daha fazla esneklik ve kontrol sunar. Karar nihai olarak özel ihtiyaç ve tercihlerinize bağlı olacaktır.