Работа с пагинацией и хуками на ReactJS

Основной принцип React состоит в создании компонентов, которые отображают и управляют состоянием пользовательского интерфейса. Одним из основных аспектов разработки с использованием ReactJS является работа с пагинацией и хуками. Пагинация - это процесс разделения длинного списка данных на несколько страниц, чтобы упростить навигацию пользователю. Пагинация может быть особенно полезна, когда необходимо отобразить большое количество данных и при этом сохранить производительность приложения. Хуки - это новая функциональность, появившаяся в ReactJS 16.8. Они позволяют использовать состояние и другие возможности React внутри функциональных компонентов. Хуки делают код более читабельным, улучшают его структуру и сокращают объем необходимого кода. Давайте рассмотрим, как работать с пагинацией и хуками на ReactJS для функциональных компонентов.

Шаг 1: Создание компонента и состояния

Сначала создайте функциональный компонент с помощью хука useState. Этот хук позволяет добавить состояние в функциональный компонент.

import React, { useState } from 'react';

const PaginationComponent = () => {
  const [currentPage, setCurrentPage] = useState(1);

  return (
    <div>
      {/* Вставьте здесь свои компоненты для отображения данных */}
    </div>
  );
}

export default PaginationComponent;

Шаг 2: Создание функций для обработки пагинации

Создайте функции для обработки пагинации, такие как переключение на предыдущую и следующую страницу.

import React, { useState } from 'react';

const PaginationComponent = () => {
  const [currentPage, setCurrentPage] = useState(1);

  const goToPreviousPage = () => {
    setCurrentPage((prev) => prev - 1);
  };

  const goToNextPage = () => {
    setCurrentPage((prev) => prev + 1);
  };

  return (
    <div>
      {/* Вставьте здесь свои компоненты для отображения данных */}
      <button onClick={goToPreviousPage}>Предыдущая страница</button>
      <button onClick={goToNextPage}>Следующая страница</button>
    </div>
  );
}

export default PaginationComponent;

Шаг 3: Использование состояния для отображения данных

Используйте текущую страницу для отображения соответствующих данных. Например, вы можете отобразить только 10 элементов на странице.

import React, { useState } from 'react';

const PaginationComponent = () => {
  const [currentPage, setCurrentPage] = useState(1);

  const goToPreviousPage = () => {
    setCurrentPage((prev) => prev - 1);
  };

  const goToNextPage = () => {
    setCurrentPage((prev) => prev + 1);
  };

  // Предположим, у вас есть массив данных, который вам нужно отобразить
  const data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];
  const itemsPerPage = 10;
  const startIndex = (currentPage - 1) * itemsPerPage;
  const displayedData = data.slice(startIndex, startIndex + itemsPerPage);

  return (
    <div>
      {/* Отображение данных */}
      {displayedData.map((item) => (
        <div key={item}>{item}</div>
      ))}

      {/* Навигация по страницам */}
      <button onClick={goToPreviousPage} disabled={currentPage === 1}>
        Предыдущая страница
      </button>
      <button onClick={goToNextPage} disabled={currentPage === Math.ceil(data.length / itemsPerPage)}>
        Следующая страница
      </button>
    </div>
  );
}

export default PaginationComponent;

Это основы работы с пагинацией и хуками на ReactJS для функциональных компонентов. Вы можете настроить логику пагинации и функции обработки в зависимости от ваших потребностей. Помните, что React предлагает огромную гибкость при создании пользовательского интерфейса, и пагинация с хуками - только один из множества способов использования этой библиотеки.

Хук useResize довольно часто встречается в React приложениях. useResize - хук, который прослушивает изменения ширины экрана. Далее на основе ширины можно, например, скрывать или показывать компоненты на экране. useResize будет использовать стандартные размеры экрана из bootstrap.

Брейкпоинт	id	Размер экрана
Small	sm	≥576px
Medium	md	≥768px
Large	lg	≥992px
Extra large	xl	≥1200px
Extra extra large	xxl	≥1400px

Добавим эти брейкпоинты в файл констант размеров экрана.

// const-breakpoints.js
export const SCREEN_SM = 576;
export const SCREEN_MD = 768;
export const SCREEN_LG = 992;
export const SCREEN_XL = 1200;
export const SCREEN_XXL = 1400;

useResize будет возвращать ширину экрана, а также индикаторы достижения брейкпоинтов. Подпишемся на событие resize из window. Значение ширины экрана будем читать из поля innerWidth.

// use-resize.js
import { useState, useEffect } from 'react';
import {
  SCREEN_SM, SCREEN_MD, SCREEN_LG, SCREEN_XL, SCREEN_XXL,
} from './const-breakpoints';

export const useResize = () => {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = (event) => {
      setWidth(event.target.innerWidth);
    };
    window.addEventListener('resize', handleResize);
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return {
    width,
    isScreenSm: width >= SCREEN_SM,
    isScreenMd: width >= SCREEN_MD,
    isScreenLg: width >= SCREEN_LG,
    isScreenXl: width >= SCREEN_XL,
    isScreenXxl: width >= SCREEN_XXL,
  };
};

Пример работы

При достижении ширины экрана 799px, флаги isScreenSm и isScreenMd будут иметь значения true. Исходный код