Migliora l'efficienza della tua applicazione integrando il sistema di paginazione basato su pagina in React.

Le applicazioni Web gestiscono grandi quantità di dati. Ad esempio, le applicazioni di e-commerce visualizzano miliardi di dati in modo organizzato e visivamente accattivante. In sostanza, i dati devono essere presentati in un modo che sia facile da comprendere e navigare per gli utenti.

Tuttavia, il rendering di tutti i dati su una singola pagina può portare a problemi di prestazioni, tempi di caricamento più lenti e esperienze utente scadenti. Per questo motivo, l'implementazione della logica di impaginazione può alleviare in modo significativo questi problemi.

In React, puoi scegliere di utilizzare componenti predefiniti forniti dalle librerie di impaginazione, in alternativa, puoi creare un sistema di impaginazione personalizzato utilizzando gli hook di React.

Implementazione dell'impaginazione lato client

Esistono due modi per implementare la paginazione nelle applicazioni: paginazione lato client e paginazione lato server. Tuttavia, indipendentemente dal formato scelto, il concetto di base rimane lo stesso. L'impaginazione lato client implica la gestione della logica di impaginazione sul lato client, all'interno del browser dell'utente.

instagram viewer

È possibile implementare l'impaginazione lato client utilizzando varie tecniche. Queste tecniche includono:

  1. Impaginazione basata sulla pagina: questo metodo prevede la divisione dei dati in blocchi o pagine di dimensioni fisse, in genere visualizzando un certo numero di elementi per pagina. Gli utenti possono navigare tra le pagine utilizzando collegamenti o pulsanti di navigazione, etichettati con numeri di pagina o pulsanti precedente e successivo. Questa è un'implementazione popolare con i motori di ricerca e le applicazioni di e-commerce.
  2. Scorrimento infinito: questo metodo comporta il caricamento dinamico e il rendering di nuovi dati mentre l'utente scorre la pagina verso il basso, creando un'esperienza di navigazione senza interruzioni e continua. Questa tecnica è particolarmente utile quando si ha a che fare con set di dati di grandi dimensioni in continua espansione, come i feed dei social media.

Implementazione dell'impaginazione basata su pagina utilizzando React Hooks

Per iniziare, crea un progetto React. Puoi usare il comando JavaScript create-react-app per configurare un'app React di baselocalmente o utilizzare Vite per impalcare un progetto React sulla tua macchina.

Questo tutorial ha utilizzato Vite, puoi trovare il codice di questo progetto in questo Deposito GitHub.

Dopo aver impostato il tuo progetto React, procediamo con l'implementazione dell'impaginazione basata sulla pagina usando React Hooks.

Configurazione del set di dati

Idealmente, in genere dovresti recuperare e visualizzare i dati da un database. Tuttavia, per questo tutorial, recupererai i dati da un manichino API segnaposto JSON Invece.

Nel src directory, creane una nuova componenti/impaginazione file e aggiungere il seguente codice.

  1. Crea un componente funzionale React e definisci i seguenti stati.
    importare Reagisci, {useEffect, useState} da"reagire";
    importare"./style.component.css";

    funzioneImpaginazione() {
    cost [data, setData] = useState([]);

    cost [currentPage, setcurrentPage] = useState(1);
    cost [itemsPerPage, setitemsPerPage] = useState(5);

    cost [pageNumberLimit, setpageNumberLimit] = useState(5);
    cost [maxPageNumberLimit, setmaxPageNumberLimit] = useState(5);
    cost [minPageNumberLimit, setminPageNumberLimit] = useState(0);
    ritorno (
    <>

    Componente di impaginazione</h1>
    >

    </>
    );
    }

    esportarepredefinito Impaginazione;

  2. Implementa la logica per recuperare i dati dall'API fittizia. Dentro il Impaginazione componente, aggiungere quanto segue.
     usaEffetto(() => {
    andare a prendere(" https://jsonplaceholder.typicode.com/todos")
    .Poi((risposta) => risposta.json())
    .Poi((json) => setData(json));
    }, []);

    cost displayData = (dati) => {
    ritorno (


      {dati.lunghezza> 0 &&
      dati.mappa((da fare, indice) => {
      ritorno<lichiave={indice}>{todo.title}li>;
      })}
      </ul>
      );
      };

    Il codice sopra ha due scopi principali. Innanzitutto, una volta montato il componente, il useEffect trigger di hook per recuperare i dati dall'endpoint API esterno che viene quindi convertito in formato JSON. I dati JSON risultanti vengono quindi utilizzati per aggiornare il file dati variabile di stato con i dati delle cose da fare recuperati. In secondo luogo, il mostra dati funzione prenderà i dati recuperati come argomento e renderà i dati come un elenco non ordinato di cose da fare.
  3. Nel segmento di ritorno del Impaginazione componente, includere il mostra dati funzione per rendere i dati recuperati nel browser. Ecco una versione aggiornata del codice:
    ritorno (
    <>

    Componente di impaginazione</h1>
    >
    {displayData (dati)}
    </>
    );

    A chiamata displayData (dati) all'interno dell'elemento JSX e passando il file dati variabile di stato come parametro, la funzione renderà quindi i dati recuperati come un elenco non ordinato nel browser.

In questo caso particolare, l'elenco visualizzato è composto da duecento cose da fare. Tuttavia, negli scenari del mondo reale, le applicazioni gestiranno grandi quantità di dati. La visualizzazione di tutti questi dati su una singola pagina Web può causare problemi di prestazioni, ad esempio tempi di caricamento lenti e prestazioni complessivamente scarse dell'applicazione.

Per risolvere questo problema, sarebbe opportuno incorporare la funzionalità di impaginazione per garantire che ogni pagina contenga un numero limitato di elementi a cui gli utenti possono accedere separatamente utilizzando i pulsanti di navigazione.

Questo approccio consente agli utenti di navigare tra i dati in modo più gestibile e organizzato, migliorando le prestazioni complessive e l'esperienza utente dell'applicazione.

Implementazione della logica di impaginazione per la visualizzazione di un numero limitato di elementi per pagina

Per determinare quali cose da fare verranno visualizzate su ogni pagina, dobbiamo implementare la logica necessaria. Tuttavia, prima di procedere, è essenziale determinare il numero totale di pagine richieste in base alle attività disponibili.

Per ottenere ciò, è possibile aggiungere il seguente codice al file Impaginazione componente:

cost pagine = [];
per (permettere io = 1; io <= Matematica.ceil (data.length / itemsPerPage); i++) {
pagine.push (i);
 }

Lo snippet di codice sopra, itera attraverso il file dati array, calcolando il numero totale di pagine necessarie dividendo la lunghezza del file dati matrice per il numero desiderato di elementi per pagina: il numero iniziale di elementi per pagina è impostato su cinque nel file oggetti per pagina stato.

Tuttavia, puoi aggiornare questo numero come richiesto per testare la logica. Infine, ogni numero di pagina viene quindi aggiunto al file pagine vettore. Ora implementiamo la logica per la visualizzazione di un numero di elementi per pagina.

cost indexOfLastItem = currentPage * itemsPerPage;
cost indexOfFirstItem = indexOfLastItem - elementiPerPagina;
cost pageItems = data.slice (indexOfFirstItem, indexOfLastItem);

Questo codice determina le cose da fare in base alle quali eseguire il rendering nella pagina del browser pagina corrente E oggetti per pagina variabili: estrae gli indici corrispondenti per l'insieme di cose da fare dall'array di dati utilizzando il metodo slice. Gli indici vengono quindi utilizzati per recuperare le cose da fare specifiche che appartengono alla pagina desiderata.

Ora, per visualizzare le cose da fare, aggiorna il file mostra dati funzione passando il pageItems come parametro. Ecco una versione aggiornata del codice:

ritorno (
<>

Componente di impaginazione</h1>
>
{displayData (pageItems)}
</>
);

Effettuando questo aggiornamento, il mostra dati funzione eseguirà il rendering appropriato di un numero limitato di cose da fare, riflettendo la pagina corrente.

Semplificazione dell'accesso alla pagina e della navigazione con i pulsanti di navigazione

Per garantire agli utenti di navigare e accedere facilmente ai contenuti su pagine diverse, è necessario aggiungere pulsanti precedente e successivo, nonché pulsanti che specificano i numeri di pagina specifici.

Innanzitutto, implementiamo la logica per i pulsanti del numero di pagina. Nel Impaginazione componente, aggiungere il codice seguente.

cost handleClick = (evento) => {
setpaginacorrente(Numero(evento.target.id));
};

cost renderPageNumbers = pagine.map((numero) => {
Se (numero < maxPageNumberLimit +1 && numero > minPageNumberLimit) {
ritorno (
chiave={numero}
id={numero}
onClic={handleClick}
className={currentPage == numero? "attivo": nullo}
>
{numero}
</li>
);
} altro {
ritornonullo;
}
});

IL manigliaClic la funzione si attiva quando un utente fa clic su un pulsante del numero di pagina. Questa azione quindi aggiorna il file pagina corrente variabile di stato con il numero di pagina selezionato.

IL renderPageNumbers variabile utilizza il carta geografica metodo per iterare sul pagine array e genera dinamicamente voci di elenco che rappresentano ciascun numero di pagina. Applica la logica condizionale per determinare quali numeri di pagina eseguire il rendering in base ai limiti massimi e minimi definiti dei numeri di pagina.

Infine, aggiungi il codice per i pulsanti successivo e precedente.

cost handleNextbtn = () => {
setpaginacorrente (paginacorrente + 1);
Se (Pagina corrente + 1 > limite massimo numero di pagine) {
setmaxPageNumberLimit (maxPageNumberLimit + pageNumberLimit);
setminPageNumberLimit (minPageNumberLimit + pageNumberLimit);
}
};

cost handlePrevbtn = () => {
impostapaginacorrente (paginacorrente - 1);
Se ((pagina corrente - 1) % pageNumberLimit == 0) {
setmaxPageNumberLimit (maxPageNumberLimit - pageNumberLimit);
setminPageNumberLimit (minPageNumberLimit - pageNumberLimit);
}
};

Per eseguire il rendering dei pulsanti di navigazione, aggiorna gli elementi JSX come segue:

ritorno (
<>

Componente di impaginazione</h1>
>
{displayData (pageItems)}
    "numeri di pagina"
>


  • onClick={handlePrevbtn}
    disattivato={currentPage == pagine[0]? VERO: falso}
    > Precedente
    </button>
    </li>

    {renderPageNumbers}

  • onClick={handleNextbtn}
    disattivato={currentPage == pagine[pagine.lunghezza - 1]? VERO: falso}
    > Avanti
    </button>
    </li>
    </ul>
    </>
    );
  • Una volta eseguito il rendering del componente, verranno visualizzati i numeri di pagina, i pulsanti precedente e successivo e gli elementi di dati corrispondenti per la pagina corrente.

    Scelta tra librerie di impaginazione e sistemi di impaginazione personalizzati

    Quando si tratta di decidere tra l'utilizzo delle librerie di impaginazione o la creazione di un sistema di impaginazione personalizzato, la scelta dipende da vari fattori. Le librerie di impaginazione, come react-paginate, forniscono componenti e funzionalità predefiniti, consentendo un'implementazione rapida e diretta.

    D'altra parte, la creazione di un sistema di impaginazione personalizzato utilizzando gli hook di React offre maggiore flessibilità e controllo sulla logica di impaginazione e sull'interfaccia utente. La decisione dipenderà in ultima analisi dalle tue esigenze e preferenze specifiche.