Работа с пагинацией и хуками на ReactJS
месяц назад·2 мин. на чтение
В данной статье мы рассмотрим, как использовать хуки на 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 элементов на странице.Это основы работы с пагинацией и хуками на ReactJS для функциональных компонентов. Вы можете настроить логику пагинации и функции обработки в зависимости от ваших потребностей. Помните, что React предлагает огромную гибкость при создании пользовательского интерфейса, и пагинация с хуками - только один из множества способов использования этой библиотеки.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;
Хук useResize для отслеживания ширины экрана в ReactJS
2 года назад·1 мин. на чтение
В этой статье напишем кастомный React хук для прослушивания ширины экрана - useResize.
Хук
Добавим эти брейкпоинты в файл констант размеров экрана.
Исходный код
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
.
