Os aplicativos da Web gerenciam grandes quantidades de dados. Por exemplo, aplicativos de comércio eletrônico exibem bilhões de dados de uma forma organizada e visualmente atraente. Essencialmente, os dados precisam ser apresentados de maneira fácil para os usuários entenderem e navegarem.

No entanto, renderizar todos os dados em uma única página pode levar a problemas de desempenho, tempos de carregamento mais lentos e experiências de usuário insatisfatórias. Por esse motivo, a implementação da lógica de paginação pode aliviar significativamente esses problemas.

No React, você pode optar por utilizar componentes pré-construídos fornecidos por bibliotecas de paginação, como alternativa, você pode criar um sistema de paginação personalizado usando ganchos do React.

Implementando Paginação no Lado do Cliente

Existem duas maneiras de implementar a paginação em aplicativos: paginação do lado do cliente e do lado do servidor. No entanto, independentemente do formato escolhido, o conceito subjacente permanece o mesmo. A paginação do lado do cliente envolve a manipulação da lógica de paginação no lado do cliente, dentro do navegador do usuário.

Você pode implementar a paginação do lado do cliente usando várias técnicas. Essas técnicas incluem:

1. Paginação baseada em página: esse método envolve dividir os dados em partes ou páginas de tamanho fixo, geralmente exibindo um determinado número de itens por página. Os usuários podem navegar pelas páginas usando links ou botões de navegação, rotulados com números de página ou botões anterior e seguinte. Essa é uma implementação popular em mecanismos de pesquisa e aplicativos de comércio eletrônico.
2. Rolagem infinita: esse método envolve o carregamento dinâmico e a renderização de novos dados à medida que o usuário rola a página, criando uma experiência de navegação perfeita e contínua. Essa técnica é particularmente útil ao lidar com grandes conjuntos de dados que estão em constante expansão, como feeds de mídia social.

Implementando Paginação Baseada em Página Usando React Hooks

Para começar, crie um projeto React. Você pode usar o Comando JavaScript create-react-app para configurar um aplicativo React básicolocalmente ou utilizar o Vite para estruturar um projeto React na sua máquina.

Este tutorial utilizou o Vite, você pode encontrar o código deste projeto neste Repositório GitHub.

Depois de configurar seu projeto React, vamos prosseguir com a implementação da paginação baseada em página usando ganchos de reação.

Configurando o conjunto de dados

Idealmente, você normalmente buscaria e exibiria dados de um banco de dados. No entanto, para este tutorial, você buscará dados de um dummy API JSONPlaceholder em vez de.

No origem diretório, crie um novo componentes/paginação arquivo e adicione o código a seguir.

1. Crie um componente funcional do React e defina os seguintes estados.

   importar Reagir, { useEffect, useState } de"reagir";
   importar"./estilo.componente.css";
   funçãoPaginação() {
   const [dados, setData] = useState([]);
   const [currentPage, setcurrentPage] = useState(1);
   const [itemsPerPage, setitemsPerPage] = useState(5);
   const [pageNumberLimit, setpageNumberLimit] = useState(5);
   const [maxPageNumberLimit, setmaxPageNumberLimit] = useState(5);
   const [minPageNumberLimit, setminPageNumberLimit] = useState(0);
   retornar (
    <>
   
    Componente de Paginação</h1> 
   >
   
    </>
    );
   }
   exportarpadrão Paginação;

2. Implemente a lógica para buscar dados da API fictícia. Dentro de Paginação componente, adicione o abaixo.

    useEffect(() => {
    buscar(" https://jsonplaceholder.typicode.com/todos")
    .então((resposta) => resposta.json())
    .então((json) => setData(json));
    }, []);
   const displayData = (dados) => {
   retornar (
   
   
    {dados.comprimento > 0 &&
    data.map((fazer, indexar) => {
   retornar<lichave={índice}>{todo.title}li>;
    })}
    </ul>
    );
    };
   

   O código acima serve a dois propósitos principais. Primeiro, uma vez que o componente é montado, o useEffect gatilhos de gancho para buscar dados do ponto de extremidade externo da API, que é então convertido para o formato JSON. Os dados JSON resultantes são usados ​​para atualizar o dados variável de estado com os dados de tarefas por-fazer buscados. Em segundo lugar, o mostrar dados A função receberá os dados buscados como um argumento e renderizará os dados como uma lista não ordenada de tarefas.
3. No trecho de retorno do Paginação componente, inclua o mostrar dados função para renderizar os dados buscados no navegador. Aqui está uma versão atualizada do código:

   retornar (
    <>
    Componente de Paginação</h1> 
   >
    {displayData (dados)}
    </>
   );
   

   chamando displayData (dados) dentro do elemento JSX e passando o dados variável de estado como um parâmetro, a função renderizará os dados buscados como uma lista não ordenada no navegador.

Neste caso particular, a lista renderizada consiste em duzentas tarefas. No entanto, em cenários do mundo real, os aplicativos gerenciam grandes quantidades de dados. A exibição de todos esses dados em uma única página da Web pode resultar em problemas de desempenho, como tempos de carregamento lentos e baixo desempenho geral do aplicativo.

Para resolver isso, seria adequado incorporar a funcionalidade de paginação para garantir que cada página contenha um número limitado de itens que os usuários possam acessar separadamente usando os botões de navegação.

Essa abordagem permite que os usuários naveguem pelos dados de maneira mais gerenciável e organizada, melhorando o desempenho geral e a experiência do usuário do aplicativo.

Implementando a lógica de paginação para exibir um número limitado de itens por página

Para determinar quais itens de tarefas serão renderizados em cada página, precisamos implementar a lógica necessária. No entanto, antes de prosseguir, é essencial determinar o número total de páginas necessárias com base nos itens de tarefas disponíveis.

Para conseguir isso, você pode adicionar o seguinte código ao Paginação componente:

const páginas = [];
para (deixar eu = 1; eu <= Matemática.ceil (data.length / itemsPerPage); i++) {
 páginas.push (i);
 }

O snippet de código acima itera por meio do dados array, calculando o número total de páginas necessárias dividindo o comprimento do dados array pelo número desejado de itens por página - o número inicial de itens por página é definido como cinco no itens por página estado.

No entanto, você pode atualizar esse número conforme necessário para testar a lógica. Por fim, cada número de página é adicionado ao Páginas variedade. Agora, vamos implementar a lógica para exibir vários itens por página.

const indexOfLastItem = currentPage * itemsPerPage;
const indexOfFirstItem = indexOfLastItem - itensPorPágina;
const pageItems = data.slice (indexOfFirstItem, indexOfLastItem);

Este código determina as tarefas a serem renderizadas na página do navegador com base em pagina atual e itens por página variáveis ​​— ele extrai os índices correspondentes para o conjunto de tarefas do array de dados usando o método slice. Os índices são usados ​​para recuperar as tarefas específicas que pertencem à página desejada.

Agora, para exibir as tarefas, atualize o mostrar dados função passando o pageItems como parâmetro. Aqui está uma versão atualizada do código:

retornar (
 <>
 Componente de Paginação</h1> 
>
 {displayData (pageItems)}
 </>
);

Ao fazer esta atualização, o mostrar dados A função renderizará um número limitado de itens pendentes adequadamente, refletindo a página atual.

Simplificando o acesso à página e a navegação com botões de navegação

Para garantir que os usuários naveguem e acessem facilmente o conteúdo em páginas diferentes, você precisa adicionar os botões anterior e seguinte, bem como botões que especificam os números de página específicos.

Primeiro, vamos implementar a lógica dos botões de número de página. No Paginação componente, adicione o código abaixo.

const handleClick = (evento) => {
 setcurrentPage(Número(event.target.id));
 };
const renderPageNumbers = páginas.map((número) => {
se (número < maxPageNumberLimit +1 && número > minPageNumberLimit) {
retornar (
 chave={número}
 id={número}
 onClick={handleClick}
 className={currentPage == número? "ativo": nulo}
 >
 {número}
 </li>
 );
 } outro {
retornarnulo;
 }
 });

O manipularClique A função é acionada quando um usuário clica em um botão de número de página. Esta ação então atualiza o pagina atual variável de estado com o número da página selecionada.

O renderPageNumbers variável utiliza o mapa método para iterar sobre o Páginas array e gera dinamicamente itens de lista representando cada número de página. Ele aplica a lógica condicional para determinar quais números de página renderizar com base nos limites máximos e mínimos de números de página definidos.

Por fim, adicione o código para os botões seguinte e anterior.

const handleNextbtn = () => {
 setcurrentPage (currentPage + 1);
se (Páginaatual + 1 > maxPageNumberLimit) {
 setmaxPageNumberLimit (maxPageNumberLimit + pageNumberLimit);
 setminPageNumberLimit (minPageNumberLimit + pageNumberLimit);
 }
 };
const handlePrevbtn = () => {
 setcurrentPage (currentPage - 1);
se ((pagina atual - 1) %pageNumberLimit == 0) {
 setmaxPageNumberLimit (maxPageNumberLimit - pageNumberLimit);
 setminPageNumberLimit (minPageNumberLimit - pageNumberLimit);
 }
 };

Para renderizar os botões de navegação, atualize os elementos JSX da seguinte maneira:

retornar (
 <>
 Componente de Paginação</h1> 
>
 {displayData (pageItems)}
"pageNumbers">




 onClick={handlePrevbtn}
 desativado={currentPage == páginas[0]? verdadeiro: falso}
 > anterior
 </button>
 </li>

 {renderPageNumbers}


 onClick={handleNextbtn}
 desativado={currentPage == páginas[pages.length - 1]? verdadeiro: falso}
 > Próximo
 </button>
 </li>
 </ul>
 </>
 );

Depois que o componente for renderizado, ele exibirá os números da página, os botões anterior e seguinte e os itens de dados correspondentes à página atual.

Escolhendo entre bibliotecas de paginação e sistemas de paginação personalizados

Quando se trata de decidir entre usar bibliotecas de paginação ou criar um sistema de paginação personalizado, a escolha depende de vários fatores. As bibliotecas de paginação, como react-paginate, fornecem componentes e funcionalidades pré-criados, permitindo uma implementação rápida e direta.

Por outro lado, construir um sistema de paginação personalizado usando ganchos do React oferece mais flexibilidade e controle sobre a lógica de paginação e a interface do usuário. A decisão dependerá, em última análise, de suas necessidades e preferências específicas.