Como implementar a paginação no React usando React Hooks

As aplicações Web são capazes de tratar grandes quantidades de informação. De facto, as aplicações de comércio eletrónico apresentam milhares de milhões de dados de uma forma organizada e esteticamente agradável. Essencialmente, os dados devem ser transmitidos de uma forma que seja simples para os utilizadores compreenderem e percorrerem.

A paginação é um meio eficaz de resolver os problemas de desempenho que podem surgir da apresentação de uma quantidade excessiva de dados numa única página Web. Ao dividir o conteúdo em várias páginas, os utilizadores podem aceder à informação de forma mais eficiente, ao mesmo tempo que desfrutam de uma experiência de navegação mais rápida e suave. Como tal, a incorporação da lógica de paginação no design de um aplicativo ou site é altamente recomendada para otimizar a funcionalidade geral e aumentar a satisfação do usuário.

O React oferece a opção de empregar componentes prontos oferecidos por bibliotecas de paginação ou construir uma solução de paginação personalizada usando hooks do React.

Implementando a paginação do lado do cliente

A paginação pode ser implementada em aplicativos usando uma abordagem do lado do cliente ou do lado do servidor, mas fundamentalmente ambos os métodos compartilham o mesmo princípio básico. A paginação do lado do cliente é executada pelo navegador Web do utilizador, onde a lógica de navegação da página é tratada sem envolver o servidor.

A paginação, que é um método de divisão de grandes quantidades de dados em porções mais pequenas e mais fáceis de gerir, pode ser implementada no lado do cliente utilizando várias abordagens. Entre esses métodos estão

A utilização da paginação baseada em páginas envolve a partição da informação em porções ou páginas pré-determinadas, normalmente com um número definido de elementos por página. Os utilizadores podem percorrer as páginas através de ligações ou botões de navegação, acompanhados de números de página ou de ícones de anterior e seguinte, o que é comummente implementado em motores de busca e plataformas de comércio eletrónico.

A prática do scrolling infinito envolve o carregamento automático e a apresentação de conteúdos adicionais à medida que o utilizador percorre uma página Web, resultando numa navegação ininterrupta e fluida do sítio. Esta abordagem é especialmente eficaz para lidar com vastas colecções de informação, como as encontradas em plataformas de redes sociais, que estão em constante crescimento.

Implementando a paginação baseada em página usando ganchos do React

use o comando JavaScript “create-react-app” para configurar um aplicativo React fundamental localmente ou use o Vite para criar um projeto React no computador.

Este tutorial emprega o Vite como uma estrutura de desenvolvimento e os

associados Depois que o projeto React tiver sido estabelecido, prosseguiremos com a implementação da paginação baseada em página utilizando o React Hooks.

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 uma API JSONPlaceholder fictícia .

No diretório de origem, crie um novo componente chamado “Paginação” na pasta “componentes” e incorpore o código subsequente.

⭐ Criar um componente funcional React e definir os seguintes estados.

 import React, { useEffect, useState } from "react";
import "./style.component.css";

function Pagination() {
  const [data, 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);
  return (
    <>
    <h1> Pagination Component</h1> <br />
  
    </>
  );
}

export default Pagination;
 

⭐ Implemente a lógica para buscar dados da API fictícia. Dentro do componentePaginação, adicione o seguinte.

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/todos")
      .then((response) => response.json())
      .then((json) => setData(json));
  }, []);

  const displayData = (data) => {
    return (
      <ul>
        {data.length > 0 &&
          data.map((todo, index) => {
            return <li key={index}>{todo.title}</li>;
          })}
      </ul>
    );
  }; 

O código acima tem duas finalidades principais. Primeiro, quando o componente é montado, ouseEffecthook é acionado para buscar dados do ponto de extremidade da API externa, que é então convertido para o formato JSON. Os dados JSON resultantes são então utilizados para atualizar a variáveldatastate com os dados dos to-dos obtidos. Em segundo lugar, a funçãodisplayData recebe os dados obtidos como argumento e apresenta os dados como uma lista não ordenada de to-dos.

⭐ No segmento de retorno do componentePagination , inclua a funçãodisplayData para apresentar os dados obtidos no navegador. Aqui está uma versão actualizada do código:

 return (
  <>
   <h1> Pagination Component</h1> <br />
    {displayData(data)}
  </>
); 

Ao chamardisplayData(data)dentro do elemento JSX e passar a variáveldatastate como parâmetro, a função renderizará os dados obtidos como uma lista não ordenada no navegador.

Num mundo ideal, seria de esperar que as suas aplicações de software funcionassem na perfeição, sem quaisquer problemas ou dificuldades técnicas. Infelizmente, mesmo com os modernos avanços tecnológicos, ainda há casos em que

Para remediar esta situação, a implementação da paginação no sistema seria uma solução adequada. Isto permitiria que cada página contivesse uma quantidade gerível de conteúdo que pode ser acedido individualmente através da utilização de botões de navegação.

A utilização deste método permite que os utilizadores consultem a informação de uma forma mais coerente e estruturada, aumentando assim a eficiência operacional e a satisfação dos utilizadores do software.

Implementação da lógica de paginação para apresentação de um número limitado de itens por página

Para determinar que tarefas devem aparecer em cada página, é imperativo introduzir a estrutura lógica pertinente.No entanto, antes de iniciar este processo, é crucial estabelecer a contagem global de páginas de acordo com as listagens de tarefas disponíveis.

Para implementar a funcionalidade pretendida no componente Paginação, pode incorporar o seguinte código:

  const pages = [];
 for (let i = 1; i <= Math.ceil(data.length / itemsPerPage); i\\+\\+) {
   pages.push(i);
 } 

O fragmento de código acima mencionado percorre a matriz de dados, calculando o número necessário de páginas através da determinação do rácio do comprimento da matriz de dados dividido pelo número especificado de itens por página, em que o valor inicial de itens por página é fixado em cinco na variável de estado.

Não obstante, é possível modificar o valor numérico acima mencionado, conforme necessário, para avaliar o raciocínio associado. Por fim, cada número de página é posteriormente anexado à variável de estado

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

O código calcula os índices das tarefas a serem exibidas na página web, com base nos valores das variáveis “currentPage” e “itemsPerPage”. Obtém estes índices utilizando o método “slice()” na matriz “data”. Estes índices são posteriormente utilizados para recuperar as tarefas específicas que correspondem à página pretendida.

Posso ajudá-lo a refinar o excerto de código fornecido?

 return (
  <>
   <h1> Pagination Component</h1> <br />
    {displayData(pageItems)}
  </>
); 

A alteração feita ao

Simplificar o acesso e a navegação na página com botões de navegação

Para facilitar a navegação e a acessibilidade do utilizador em várias páginas, é imperativo incorporar componentes de botão anteriores e posteriores, para além de elementos de botão específicos da página que permitam uma seleção fácil do número da página.

Para integrar a funcionalidade dos botões de número de página no componente Paginação, pode incorporar a seguinte lógica de implementação no respetivo ficheiro:

   const handleClick = (event) => {
    setcurrentPage(Number(event.target.id));
  };

  const renderPageNumbers = pages.map((number) => {
    if (number < maxPageNumberLimit \\+1 && number > minPageNumberLimit) {
      return (
        <li
          key={number}
          id={number}
          onClick={handleClick}
          className={currentPage == number ? "active" : null}
        >
          {number}
        </li>
      );
    } else {
      return null;
    }
  }); 

A função handleClick é activada quando um utilizador clica num botão de número de página. Como resultado, o número da página atual é atualizado na variável de estado currentPage .

A função renderPageNumbers emprega a utilização do método map para percorrer a matriz de páginas, gerando itens de lista não ordenada para cada número de página. Este processo é efectuado com a ajuda da lógica condicional, que tem em conta os máximos e mínimos predefinidos para a apresentação do número de página.

Por fim, incorpore no seu projeto o código para os botões seguinte e anterior.

   const handleNextbtn = () => {
    setcurrentPage(currentPage \\+ 1);
    if (currentPage \\+ 1 > maxPageNumberLimit) {
      setmaxPageNumberLimit(maxPageNumberLimit \\+ pageNumberLimit);
      setminPageNumberLimit(minPageNumberLimit \\+ pageNumberLimit);
    }
  };

  const handlePrevbtn = () => {
    setcurrentPage(currentPage - 1);
    if ((currentPage - 1) % pageNumberLimit == 0) {
      setmaxPageNumberLimit(maxPageNumberLimit - pageNumberLimit);
      setminPageNumberLimit(minPageNumberLimit - pageNumberLimit);
    }
  }; 

A ação de modificar os componentes de uma forma consistente com o JavaScript e de o utilizar para modificar a interface do utilizador através da atualização das expressões JavaScript é conhecida como renderização dos botões de navegação. Para executar esta tarefa, siga estes passos:

  return (
    <>
      <h1> Pagination Component</h1> <br />
      {displayData(pageItems)}
      <ul className="pageNumbers">
            <li>
            <button
                onClick={handlePrevbtn}
                disabled={currentPage == pages[0] ? true : false}
            > Previous
            </button>
            </li>
   
            {renderPageNumbers}

            <li>
            <button
                onClick={handleNextbtn}
                disabled={currentPage == pages[pages.length - 1] ? true : false}
            > Next
            </button>
            </li>
      </ul>
    </>
  ); 

Após a renderização do componente, este deve exibir os números de página, os botões anteriores e posteriores e os objectos de dados relevantes para a página atual.

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

A escolha entre utilizar bibliotecas de paginação ou construir um sistema de paginação personalizado depende de várias considerações. As bibliotecas de paginação, incluindo react-paginate, oferecem componentes e recursos pré-fabricados, facilitando a integração rápida e descomplicada.

Embora a utilização de bibliotecas pré-construídas para paginação em um aplicativo React possa parecer atraente devido à sua facilidade de implementação, também é possível construir um sistema de paginação personalizado empregando hooks React. Essa abordagem garante maior versatilidade e domínio sobre a lógica de paginação e sua representação visual. Em última análise, a escolha entre essas opções depende das necessidades e inclinações exclusivas de cada um.