Οι εφαρμογές Ιστού διαχειρίζονται μεγάλες ποσότητες δεδομένων. Για παράδειγμα, οι εφαρμογές ηλεκτρονικού εμπορίου εμφανίζουν δισεκατομμύρια δεδομένα με τρόπο οργανωμένο και οπτικά ελκυστικό. Ουσιαστικά, τα δεδομένα πρέπει να παρουσιάζονται με τρόπο που να είναι εύκολο να κατανοήσουν και να πλοηγηθούν οι χρήστες.

Ωστόσο, η απόδοση όλων των δεδομένων σε μία σελίδα μπορεί να οδηγήσει σε προβλήματα απόδοσης, πιο αργούς χρόνους φόρτωσης και κακές εμπειρίες χρήστη. Για το λόγο αυτό, η εφαρμογή της λογικής σελιδοποίησης μπορεί να μετριάσει σημαντικά αυτά τα προβλήματα.

Στο React, μπορείτε να επιλέξετε να χρησιμοποιήσετε προκατασκευασμένα στοιχεία που παρέχονται από βιβλιοθήκες σελιδοποίησης, εναλλακτικά, μπορείτε να δημιουργήσετε ένα προσαρμοσμένο σύστημα σελιδοποίησης χρησιμοποιώντας τα άγκιστρα React.

Εφαρμογή σελιδοποίησης από την πλευρά του πελάτη

Υπάρχουν δύο τρόποι εφαρμογής σελιδοποίησης σε εφαρμογές: σελιδοποίηση από την πλευρά του πελάτη και από την πλευρά του διακομιστή. Ωστόσο, ανεξάρτητα από τη μορφή που θα επιλέξετε, η υποκείμενη ιδέα παραμένει η ίδια. Η σελιδοποίηση από την πλευρά του πελάτη περιλαμβάνει το χειρισμό της λογικής σελιδοποίησης στην πλευρά του πελάτη, μέσα στο πρόγραμμα περιήγησης του χρήστη.

Μπορείτε να εφαρμόσετε σελιδοποίηση από την πλευρά του πελάτη χρησιμοποιώντας διάφορες τεχνικές. Αυτές οι τεχνικές περιλαμβάνουν:

1. Σελιδοποίηση βάσει σελίδας: Αυτή η μέθοδος περιλαμβάνει τη διαίρεση των δεδομένων σε κομμάτια ή σελίδες σταθερού μεγέθους, που συνήθως εμφανίζουν έναν ορισμένο αριθμό στοιχείων ανά σελίδα. Οι χρήστες μπορούν να πλοηγηθούν στις σελίδες χρησιμοποιώντας συνδέσμους πλοήγησης ή κουμπιά, με ετικέτα αριθμούς σελίδων ή κουμπιά προηγούμενο και επόμενο. Αυτή είναι μια δημοφιλής υλοποίηση με μηχανές αναζήτησης και εφαρμογές ηλεκτρονικού εμπορίου.
2. Άπειρη κύλιση: Αυτή η μέθοδος περιλαμβάνει δυναμική φόρτωση και απόδοση νέων δεδομένων καθώς ο χρήστης κάνει κύλιση προς τα κάτω στη σελίδα, δημιουργώντας μια απρόσκοπτη και συνεχή εμπειρία περιήγησης. Αυτή η τεχνική είναι ιδιαίτερα χρήσιμη όταν αντιμετωπίζουμε μεγάλα σύνολα δεδομένων που επεκτείνονται συνεχώς, όπως ροές μέσων κοινωνικής δικτύωσης.

Εφαρμογή σελιδοποίησης βάσει σελίδας με χρήση React Hooks

Για να ξεκινήσετε, δημιουργήστε ένα έργο React. Μπορείτε είτε να χρησιμοποιήσετε το Δημιουργία-react-app εντολή JavaScript για τη ρύθμιση μιας βασικής εφαρμογής Reactτοπικά ή χρησιμοποιήστε το Vite για να δημιουργήσετε ένα έργο React στο μηχάνημά σας.

Αυτό το σεμινάριο έχει χρησιμοποιήσει το Vite, μπορείτε να βρείτε τον κώδικα αυτού του έργου σε αυτό Αποθετήριο GitHub.

Αφού ρυθμίσετε το έργο React, ας προχωρήσουμε στην εφαρμογή σελιδοποίησης βάσει σελίδας χρησιμοποιώντας React Hooks.

Διαμόρφωση του συνόλου δεδομένων

Στην ιδανική περίπτωση, συνήθως θα λαμβάνατε και θα εμφανίζατε δεδομένα από μια βάση δεδομένων. Ωστόσο, για αυτό το σεμινάριο, θα λάβετε δεδομένα από ένα ομοίωμα JSONPlaceholder API αντι αυτου.

Στο src κατάλογο, δημιουργήστε ένα νέο εξαρτήματα/σελιδοποίηση αρχείο και προσθέστε τον ακόλουθο κώδικα.

1. Δημιουργήστε ένα λειτουργικό στοιχείο React και ορίστε τις ακόλουθες καταστάσεις.

   εισαγωγή React, { useEffect, useState } από"αντιδρώ";
   εισαγωγή"./style.component.css";
   λειτουργίαΣελιδοποίηση() {
   συνθ [data, setData] = useState([]);
   συνθ [currentPage, setcurrentPage] = useState(1);
   συνθ [itemsPerPage, setitemsPerPage] = useState(5);
   συνθ [pageNumberLimit, setpageNumberLimit] = useState(5);
   συνθ [maxPageNumberLimit, setmaxPageNumberLimit] = useState(5);
   συνθ [minPageNumberLimit, setminPageNumberLimit] = useState(0);
   ΕΠΙΣΤΡΟΦΗ (
    <>
   
    Στοιχείο σελιδοποίησης</h1> 
   >
   
    </>
    );
   }
   εξαγωγήΠροκαθορισμένο Σελιδοποίηση;

2. Εφαρμόστε τη λογική για την ανάκτηση δεδομένων από το εικονικό API. μεσα στην Σελιδοποίηση συστατικό, προσθέστε το παρακάτω.

    useEffect(() => {
    φέρω(" https://jsonplaceholder.typicode.com/todos")
    .έπειτα((απάντηση) => answer.json())
    .έπειτα((json) => setData (json));
    }, []);
   συνθ displayData = (δεδομένα) => {
   ΕΠΙΣΤΡΟΦΗ (
   
   
    {data.length > 0 &&
    data.map((todo, ευρετήριο) => {
   ΕΠΙΣΤΡΟΦΗ<liκλειδί={δείκτης}>{todo.title}li>;
    })}
    </ul>
    );
    };
   

   Ο παραπάνω κώδικας εξυπηρετεί δύο βασικούς σκοπούς. Πρώτον, μόλις τοποθετηθεί το εξάρτημα, το useEffect ενεργοποιεί το άγκιστρο για τη λήψη δεδομένων από το εξωτερικό τελικό σημείο API το οποίο στη συνέχεια μετατρέπεται σε μορφή JSON. Τα δεδομένα JSON που προκύπτουν χρησιμοποιούνται στη συνέχεια για την ενημέρωση του δεδομένα μεταβλητή κατάστασης με τα δεδομένα εκκρεμοτήτων που ανακτήθηκαν. Δεύτερον, το εμφάνιση Δεδομένων Η συνάρτηση θα λάβει τα δεδομένα που ανακτήθηκαν ως όρισμα και θα αποδώσει τα δεδομένα ως μια μη ταξινομημένη λίστα υποχρεώσεων.
3. Στο τμήμα επιστροφής του Σελιδοποίηση συστατικό, περιλαμβάνουν το εμφάνιση Δεδομένων λειτουργία για απόδοση των δεδομένων που έχουν ληφθεί στο πρόγραμμα περιήγησης. Ακολουθεί μια ενημερωμένη έκδοση του κώδικα:

   ΕΠΙΣΤΡΟΦΗ (
    <>
    Στοιχείο σελιδοποίησης</h1> 
   >
    {displayData (data)}
    </>
   );
   

   Με την κλήση displayData (δεδομένα) μέσα στο στοιχείο JSX και περνώντας το δεδομένα κατάσταση μεταβλητής ως παράμετρος, η συνάρτηση θα αποδώσει στη συνέχεια τα δεδομένα που ανακτήθηκαν ως μια μη ταξινομημένη λίστα στο πρόγραμμα περιήγησης.

Στη συγκεκριμένη περίπτωση, η αποδοθείσα λίστα αποτελείται από διακόσιες εκκρεμότητες. Ωστόσο, σε σενάρια πραγματικού κόσμου, οι εφαρμογές θα διαχειρίζονται μεγάλες ποσότητες δεδομένων. Η εμφάνιση όλων αυτών των δεδομένων σε μία μόνο ιστοσελίδα μπορεί να έχει ως αποτέλεσμα ζητήματα απόδοσης, όπως αργούς χρόνους φόρτωσης και γενικά κακή απόδοση της εφαρμογής.

Για να αντιμετωπιστεί αυτό, θα ήταν κατάλληλο να ενσωματωθεί η λειτουργία σελιδοποίησης για να διασφαλιστεί ότι κάθε σελίδα περιέχει έναν περιορισμένο αριθμό στοιχείων στα οποία οι χρήστες μπορούν να έχουν πρόσβαση ξεχωριστά χρησιμοποιώντας τα κουμπιά πλοήγησης.

Αυτή η προσέγγιση επιτρέπει στους χρήστες να πλοηγούνται στα δεδομένα με πιο διαχειρίσιμο και οργανωμένο τρόπο, βελτιώνοντας τη συνολική απόδοση και την εμπειρία χρήστη της εφαρμογής.

Εφαρμογή λογικής σελιδοποίησης για εμφάνιση περιορισμένου αριθμού αντικειμένων ανά σελίδα

Για να καθορίσουμε ποια to-do αντικείμενα θα αποδίδονται σε κάθε σελίδα, πρέπει να εφαρμόσουμε την απαραίτητη λογική. Ωστόσο, προτού συνεχίσετε, είναι σημαντικό να προσδιορίσετε τον συνολικό αριθμό των σελίδων που απαιτούνται με βάση τα διαθέσιμα στοιχεία υποχρεώσεων.

Για να το πετύχετε αυτό, μπορείτε να προσθέσετε τον ακόλουθο κώδικα στο Σελιδοποίηση συστατικό:

συνθ σελίδες = [];
Για (αφήνω i = 1; i <= Μαθηματικά.οροφή (data.length / itemsPerPage); i++) {
 pages.push (i);
 }

Το απόσπασμα κώδικα παραπάνω, επαναλαμβάνεται μέσω του δεδομένα πίνακα, υπολογίζοντας τον συνολικό αριθμό των σελίδων που χρειάζονται διαιρώντας το μήκος του δεδομένα πίνακας με τον επιθυμητό αριθμό στοιχείων ανά σελίδα—ο αρχικός αριθμός στοιχείων ανά σελίδα ορίζεται σε πέντε στο αντικείμενα ανά σελίδα κατάσταση.

Ωστόσο, μπορείτε να ενημερώσετε αυτόν τον αριθμό όπως απαιτείται για να δοκιμάσετε τη λογική. Τέλος, κάθε αριθμός σελίδας προστίθεται στη συνέχεια στο σελίδες πίνακας. Τώρα, ας εφαρμόσουμε τη λογική για την εμφάνιση ενός αριθμού στοιχείων ανά σελίδα.

συνθ indexOfLastItem = τρέχουσαΣελίδα * itemsPerPage;
συνθ indexOfFirstItem = indexOfLastItem - itemsPerPage;
συνθ pageItems = data.slice (indexOfFirstItem, indexOfLastItem);

Αυτός ο κώδικας καθορίζει τις εκκρεμότητες που πρέπει να αποδοθούν στη σελίδα του προγράμματος περιήγησης με βάση τρέχουσα σελίδα και αντικείμενα ανά σελίδα μεταβλητές—εξάγει τους αντίστοιχους δείκτες για το σύνολο των εργασιών από τον πίνακα δεδομένων χρησιμοποιώντας τη μέθοδο slice. Στη συνέχεια, τα ευρετήρια χρησιμοποιούνται για την ανάκτηση των συγκεκριμένων εργασιών που ανήκουν στην επιθυμητή σελίδα.

Τώρα, για να εμφανίσετε τις εκκρεμότητες, ενημερώστε το εμφάνιση Δεδομένων λειτουργούν περνώντας το είδη σελίδας ως παράμετρος. Ακολουθεί μια ενημερωμένη έκδοση του κώδικα:

ΕΠΙΣΤΡΟΦΗ (
 <>
 Στοιχείο σελιδοποίησης</h1> 
>
 {displayData (pageItems)}
 </>
);

Κάνοντας αυτήν την ενημέρωση, το εμφάνιση Δεδομένων Η λειτουργία θα αποδώσει κατάλληλα έναν περιορισμένο αριθμό στοιχείων υποχρεώσεων, αντικατοπτρίζοντας την τρέχουσα σελίδα.

Βελτιστοποίηση της πρόσβασης στη σελίδα και της πλοήγησης με κουμπιά πλοήγησης

Για να διασφαλίσετε ότι οι χρήστες πλοηγούνται εύκολα και έχουν πρόσβαση σε περιεχόμενο σε διαφορετικές σελίδες, πρέπει να προσθέσετε κουμπιά προηγούμενου και επόμενου, καθώς και κουμπιά που καθορίζουν τους συγκεκριμένους αριθμούς σελίδων.

Αρχικά, ας εφαρμόσουμε τη λογική για τα κουμπιά αριθμού σελίδας. Στο Σελιδοποίηση στοιχείο, προσθέστε τον παρακάτω κώδικα.

συνθ handleClick = (Εκδήλωση) => {
 setcurrentPage(Αριθμός(event.target.id));
 };
συνθ renderPageNumbers = pages.map((αριθμός) => {
αν (αριθμός < maxPageNumberLimit +1 && αριθμός > minPageNumberLimit) {
ΕΠΙΣΤΡΟΦΗ (
 κλειδί={αριθμός}
 id={number}
 onClick={handleClick}
 className={currentPage == αριθμός; "ενεργός": μηδενικό}
 >
 {αριθμός}
 </li>
 );
 } αλλού {
ΕΠΙΣΤΡΟΦΗμηδενικό;
 }
 });

ο handleClick Η λειτουργία ενεργοποιείται όταν ένας χρήστης κάνει κλικ σε ένα κουμπί αριθμού σελίδας. Αυτή η ενέργεια στη συνέχεια ενημερώνει το τρέχουσα σελίδα μεταβλητή κατάστασης με τον επιλεγμένο αριθμό σελίδας.

ο renderPageNumbers μεταβλητή χρησιμοποιεί το χάρτης μέθοδος επανάληψης πάνω από το σελίδες πίνακα και δημιουργεί δυναμικά στοιχεία λίστας που αντιπροσωπεύουν κάθε αριθμό σελίδας. Εφαρμόζει λογική υπό όρους για να καθορίσει ποιοι αριθμοί σελίδων θα αποδοθούν με βάση τα καθορισμένα όρια μέγιστων και ελάχιστων αριθμών σελίδων.

Τέλος, προσθέστε τον κωδικό για το επόμενο και το προηγούμενο κουμπί.

συνθ handleNextbtn = () => {
 setcurrentPage (currentPage + 1);
αν (τρέχουσα Σελίδα + 1 > maxPageNumberLimit) {
 setmaxPageNumberLimit (maxPageNumberLimit + pageNumberLimit);
 setminPageNumberLimit (minPageNumberLimit + pageNumberLimit);
 }
 };
συνθ handlePrevbtn = () => {
 setcurrentPage (currentPage - 1);
αν ((τρέχουσα σελίδα - 1) % pageNumberLimit == 0) {
 setmaxPageNumberLimit (maxPageNumberLimit - pageNumberLimit);
 setminPageNumberLimit (minPageNumberLimit - pageNumberLimit);
 }
 };

Για να αποδώσετε τα κουμπιά πλοήγησης, ενημερώστε τα στοιχεία JSX ως εξής:

ΕΠΙΣΤΡΟΦΗ (
 <>
 Στοιχείο σελιδοποίησης</h1> 
>
 {displayData (pageItems)}
"Αριθμοί σελίδας">




 onClick={handlePrevbtn}
 disabled={currentPage == σελίδες[0]? αληθής: ψευδής}
 > Προηγούμενο
 </button>
 </li>

 {renderPageNumbers}


 onClick={handleNextbtn}
 disabled={currentPage == σελίδες[pages.length - 1]? αληθής: ψευδής}
 > Επόμενο
 </button>
 </li>
 </ul>
 </>
 );

Μόλις αποδοθεί το στοιχείο, θα εμφανίσει τους αριθμούς σελίδων, τα κουμπιά του προηγούμενου και του επόμενου και τα αντίστοιχα στοιχεία δεδομένων για την τρέχουσα σελίδα.

Επιλογή μεταξύ βιβλιοθηκών σελιδοποίησης και προσαρμοσμένων συστημάτων σελιδοποίησης

Όταν πρόκειται να αποφασίσετε μεταξύ της χρήσης βιβλιοθηκών σελιδοποίησης ή της δημιουργίας ενός προσαρμοσμένου συστήματος σελιδοποίησης, η επιλογή εξαρτάται από διάφορους παράγοντες. Οι βιβλιοθήκες σελιδοποίησης, όπως το react-paginate, παρέχουν προκατασκευασμένα στοιχεία και λειτουργικότητα, επιτρέποντας γρήγορη και απλή υλοποίηση.

Από την άλλη πλευρά, η δημιουργία ενός προσαρμοσμένου συστήματος σελιδοποίησης χρησιμοποιώντας τα άγκιστρα React προσφέρει μεγαλύτερη ευελιξία και έλεγχο στη λογική σελιδοποίησης και στη διεπαφή χρήστη. Η απόφαση θα εξαρτηθεί τελικά από τις συγκεκριμένες ανάγκες και προτιμήσεις σας.