Las aplicaciones web gestionan grandes cantidades de datos. Por ejemplo, las aplicaciones de comercio electrónico muestran miles de millones de datos de una manera organizada y visualmente atractiva. Esencialmente, los datos deben presentarse de una manera que sea fácil de entender y navegar para los usuarios.

Sin embargo, representar todos los datos en una sola página puede generar problemas de rendimiento, tiempos de carga más lentos y experiencias de usuario deficientes. Por esta razón, implementar la lógica de paginación puede aliviar significativamente estos problemas.

En React, puede optar por utilizar componentes prediseñados proporcionados por bibliotecas de paginación; alternativamente, puede crear un sistema de paginación personalizado utilizando ganchos de React.

Implementación de la paginación del lado del cliente

Hay dos formas de implementar la paginación en las aplicaciones: paginación del lado del cliente y del lado del servidor. No obstante, independientemente del formato que elija, el concepto subyacente sigue siendo el mismo. La paginación del lado del cliente implica manejar la lógica de paginación en el lado del cliente, dentro del navegador del usuario.

Puede implementar la paginación del lado del cliente utilizando varias técnicas. Estas técnicas incluyen:

1. Paginación basada en páginas: este método consiste en dividir los datos en partes o páginas de tamaño fijo y, por lo general, muestra una determinada cantidad de elementos por página. Los usuarios pueden navegar por las páginas utilizando enlaces o botones de navegación, etiquetados con números de página o botones anterior y siguiente. Esta es una implementación popular entre los motores de búsqueda y las aplicaciones de comercio electrónico.
2. Desplazamiento infinito: este método implica la carga dinámica y la representación de nuevos datos a medida que el usuario se desplaza hacia abajo en la página, creando una experiencia de navegación continua y sin inconvenientes. Esta técnica es particularmente útil cuando se trata de grandes conjuntos de datos que se expanden continuamente, como las fuentes de las redes sociales.

Implementación de la paginación basada en páginas mediante ganchos de React

Para comenzar, cree un proyecto de React. Puedes usar el comando JavaScript create-react-app para configurar una aplicación React básicalocalmente o utilizar Vite para andamiar un proyecto React en su máquina.

Este tutorial ha utilizado Vite, puede encontrar el código de este proyecto en este repositorio GitHub.

Después de configurar su proyecto React, procedamos con la implementación de la paginación basada en páginas utilizando ganchos de reacción.

Configuración del conjunto de datos

Idealmente, normalmente buscaría y mostraría datos de una base de datos. Sin embargo, para este tutorial, obtendrá datos de un dummy API de marcador de posición JSON en cambio.

En el origen directorio, crea un nuevo componentes/paginación archivo y agregue el siguiente código.

1. Cree un componente funcional de React y defina los siguientes estados.

   importar Reaccionar, {usarEfecto, usarEstado} de"reaccionar";
   importar"./estilo.componente.css";
   funciónPaginación() {
   constante [datos, establecerDatos] = usarEstado([]);
   constante [páginaActual, establecerPáginaActual] = usarEstado(1);
   constante [itemsPerPage, setitemsPerPage] = useState(5);
   constante [pageNumberLimit, setpageNumberLimit] = useState(5);
   constante [maxPageNumberLimit, setmaxPageNumberLimit] = useState(5);
   constante [minPageNumberLimit, setminPageNumberLimit] = useState(0);
   devolver (
    <>
   
    Componente de paginación</h1> 
   >
   
    </>
    );
   }
   exportarpor defecto Paginación;

2. Implemente la lógica para obtener datos de la API ficticia. Dentro de Paginación componente, agregue lo siguiente.

    usarEfecto(() => {
    buscar(" https://jsonplaceholder.typicode.com/todos")
    .entonces((respuesta) => respuesta.json())
    .entonces((json) => setData (json));
    }, []);
   constante mostrar datos = (datos) => {
   devolver (
   
   
    {datos.longitud > 0 &&
    datos.mapa((todo, índice) => {
   devolver<lillave={índice}>{todo.título}li>;
    })}
    </ul>
    );
    };
   

   El código anterior tiene dos propósitos principales. Primero, una vez que el componente se monta, el efecto de uso desencadenadores de enlace para obtener datos del punto final de la API externa que luego se convierte al formato JSON. Los datos JSON resultantes se utilizan luego para actualizar el datos variable de estado con los datos de las tareas pendientes recuperadas. En segundo lugar, el mostrar datos La función tomará los datos obtenidos como un argumento y representará los datos como una lista desordenada de tareas pendientes.
3. En el tramo de vuelta del Paginación componente, incluye el mostrar datos función para representar los datos obtenidos en el navegador. Aquí hay una versión actualizada del código:

   devolver (
    <>
    Componente de paginación</h1> 
   >
    {displayData (datos)}
    </>
   );
   

   Llamando mostrar datos (datos) dentro del elemento JSX y pasando el datos variable de estado como parámetro, la función mostrará los datos obtenidos como una lista desordenada en el navegador.

En este caso particular, la lista procesada consta de doscientas tareas pendientes. Sin embargo, en escenarios del mundo real, las aplicaciones administrarán grandes cantidades de datos. Mostrar todos estos datos en una sola página web puede generar problemas de rendimiento, como tiempos de carga lentos y un rendimiento general deficiente de la aplicación.

Para abordar esto, sería adecuado incorporar la funcionalidad de paginación para garantizar que cada página contenga una cantidad limitada de elementos a los que los usuarios puedan acceder por separado mediante los botones de navegación.

Este enfoque permite a los usuarios navegar por los datos de una manera más manejable y organizada, mejorando el rendimiento general y la experiencia del usuario de la aplicación.

Implementación de la lógica de paginación para mostrar un número limitado de elementos por página

Para determinar qué tareas se mostrarán en cada página, debemos implementar la lógica necesaria. Sin embargo, antes de continuar, es fundamental determinar el número total de páginas necesarias en función de las tareas pendientes disponibles.

Para lograr esto, puede agregar el siguiente código al Paginación componente:

constante páginas = [];
para (dejar yo = 1; yo <= Matemáticas.ceil (datos.longitud/artículosPorPágina); i++) {
 páginas.push (i);
 }

El fragmento de código anterior itera a través de la datos matriz, calculando el número total de páginas necesarias dividiendo la longitud de la datos matriz por el número deseado de elementos por página: el número inicial de elementos por página se establece en cinco en el Artículos por página estado.

No obstante, puede actualizar este número según sea necesario para probar la lógica. Por último, cada número de página se añade al paginas formación. Ahora, implementemos la lógica para mostrar una cantidad de elementos por página.

constante indexOfLastItem = página actual * elementos por página;
constante indexOfFirstItem = indexOfLastItem - itemsPerPage;
constante pageItems = data.slice (indexOfFirstItem, indexOfLastItem);

Este código determina las tareas pendientes para representar en la página del navegador en función de página actual y Artículos por página Variables: extrae los índices correspondientes para el conjunto de tareas pendientes de la matriz de datos utilizando el método de división. Luego, los índices se utilizan para recuperar las tareas pendientes específicas que pertenecen a la página deseada.

Ahora, para mostrar las tareas pendientes, actualice el mostrar datos función pasando el artículos de página como parámetro. Aquí hay una versión actualizada del código:

devolver (
 <>
 Componente de paginación</h1> 
>
 {displayData (elementos de página)}
 </>
);

Al hacer esta actualización, el mostrar datos La función representará un número limitado de tareas pendientes de manera adecuada, reflejando la página actual.

Optimización del acceso a la página y la navegación con botones de navegación

Para asegurarse de que los usuarios naveguen y accedan fácilmente al contenido en diferentes páginas, debe agregar botones anterior y siguiente, así como botones que especifiquen los números de página específicos.

Primero, implementemos la lógica para los botones de número de página. En el Paginación componente, agregue el código a continuación.

constante handleClick = (evento) => {
 establecerPáginaActual(Número(evento.objetivo.id));
 };
constante renderPageNumbers = páginas.mapa((número) => {
si (número < maxPageNumberLimit +1 && número > minPageNumberLimit) {
devolver (
 clave={número}
 id={número}
 onClick={handleClick}
 className={currentPage == número? "activo": nulo}
 >
 {número}
 </li>
 );
 } demás {
devolvernulo;
 }
 });

El handleClick La función se activa cuando un usuario hace clic en un botón de número de página. Esta acción luego actualiza el página actual variable de estado con el número de página seleccionado.

El renderPageNumbers variable utiliza la mapa método para iterar sobre el paginas matriz y genera dinámicamente elementos de lista que representan cada número de página. Aplica lógica condicional para determinar qué números de página representar en función de los límites de números de página máximos y mínimos definidos.

Finalmente, agregue el código para los botones siguiente y anterior.

constante manejarSiguientebtn = () => {
 setcurrentPage (currentPage + 1);
si (pagina actual + 1 > maxPageNumberLimit) {
 setmaxPageNumberLimit (maxPageNumberLimit + pageNumberLimit);
 setminPageNumberLimit (minPageNumberLimit + pageNumberLimit);
 }
 };
constante handlePrevbtn = () => {
 setcurrentPage (currentPage - 1);
si ((página actual - 1) % límite de número de página == 0) {
 setmaxPageNumberLimit (maxPageNumberLimit - pageNumberLimit);
 setminPageNumberLimit (minPageNumberLimit - pageNumberLimit);
 }
 };

Para representar los botones de navegación, actualice los elementos JSX de la siguiente manera:

devolver (
 <>
 Componente de paginación</h1> 
>
 {displayData (elementos de página)}
"número de páginas">




 onClick={handlePrevbtn}
 disabled={currentPage == páginas[0]? verdadero: FALSO}
 > Anterior
 </button>
 </li>

 {renderPageNumbers}


 onClick={handleNextbtn}
 disabled={currentPage == páginas[páginas.longitud - 1]? verdadero: FALSO}
 > Siguiente
 </button>
 </li>
 </ul>
 </>
 );

Una vez que el componente se procesa, mostrará los números de página, los botones anterior y siguiente y los elementos de datos correspondientes para la página actual.

Elegir entre bibliotecas de paginación y sistemas de paginación personalizados

Cuando se trata de decidir entre usar bibliotecas de paginación o crear un sistema de paginación personalizado, la elección depende de varios factores. Las bibliotecas de paginación, como react-paginate, proporcionan componentes y funciones preconstruidos, lo que permite una implementación rápida y sencilla.

Por otro lado, crear un sistema de paginación personalizado con ganchos de React ofrece más flexibilidad y control sobre la lógica de paginación y la interfaz de usuario. La decisión dependerá en última instancia de sus necesidades y preferencias específicas.