Повысьте эффективность своего приложения, интегрировав в React систему разбиения на страницы на основе страниц.
Веб-приложения управляют большими объемами данных. Например, приложения электронной коммерции отображают миллиарды данных организованным и визуально привлекательным способом. По существу, данные должны быть представлены таким образом, чтобы пользователям было легко их понять и ориентироваться.
Однако отображение всех данных на одной странице может привести к проблемам с производительностью, замедлению загрузки и ухудшению взаимодействия с пользователем. По этой причине реализация логики разбиения на страницы может значительно облегчить эти проблемы.
В React вы можете использовать предварительно созданные компоненты, предоставляемые библиотеками разбиения на страницы, или же вы можете создать пользовательскую систему разбиения на страницы, используя хуки React.
Реализация пагинации на стороне клиента
Существует два способа реализации пагинации в приложениях: на стороне клиента и на стороне сервера. Тем не менее, независимо от выбранного вами формата, основная концепция остается неизменной. Разбивка на страницы на стороне клиента включает в себя обработку логики разбиения на страницы на стороне клиента в браузере пользователя.
Вы можете реализовать пагинацию на стороне клиента, используя различные методы. Эти методы включают в себя:
- Постраничная разбивка на страницы: этот метод включает в себя разделение данных на фрагменты или страницы фиксированного размера, обычно отображающие определенное количество элементов на странице. Пользователи могут перемещаться по страницам с помощью навигационных ссылок или кнопок, помеченных номерами страниц, или кнопок «предыдущая» и «следующая». Это популярная реализация в поисковых системах и приложениях электронной коммерции.
- Бесконечная прокрутка: этот метод включает динамическую загрузку и визуализацию новых данных по мере того, как пользователь прокручивает страницу вниз, создавая плавный и непрерывный просмотр. Этот метод особенно полезен при работе с большими наборами данных, которые постоянно расширяются, например, с лентами социальных сетей.
Реализация постраничной разбивки на страницы с помощью React Hooks
Для начала создайте проект React. Вы можете либо использовать Команда JavaScript create-react-app для настройки базового приложения Reactлокально или использовать Vite для создания проекта React на вашей машине.
В этом руководстве используется Vite, вы можете найти код этого проекта в этом Репозиторий GitHub.
После настройки вашего проекта React давайте приступим к реализации разбиения на страницы на основе страниц. с помощью React-хуков.
Настройка набора данных
В идеале вы обычно извлекаете и отображаете данные из базы данных. Однако в этом руководстве вы будете извлекать данные из фиктивного API-интерфейс JSONPlaceholder вместо.
в источник каталог, создайте новый компоненты/пагинация файл и добавьте следующий код.
- Создайте функциональный компонент React и определите следующие состояния.
Импортировать Реагировать, {useEffect, useState} от"реагировать";
Импортировать"./style.component.css";функцияПагинация() {
константа [данные, setData] = useState([]);константа [текущая страница, setcurrentPage] = useState (1);
константа [itemsPerPage, setitemsPerPage] = useState(5);константа [pageNumberLimit, setpageNumberLimit] = useState(5);
константа [maxPageNumberLimit, setmaxPageNumberLimit] = useState(5);
константа [minPageNumberLimit, setminPageNumberLimit] = useState(0);
возвращаться (
<>Компонент пагинации</h1>
>
</>
);
}экспортпо умолчанию Пагинация; - Реализуйте логику для получения данных из фиктивного API. Внутри Пагинация компонент, добавьте ниже.
Приведенный выше код служит двум основным целям. Во-первых, после монтирования компонента использованиеЭффект триггеры ловушек для извлечения данных из внешней конечной точки API, которые затем преобразуются в формат JSON. Полученные данные JSON затем используются для обновления данные переменная состояния с данными о выбранных задачах. Во-вторых, Данные дисплея функция будет принимать полученные данные в качестве аргумента и отображать данные в виде неупорядоченного списка задач.использоватьЭффект(() => {
принести(" https://jsonplaceholder.typicode.com/todos")
.затем((ответ) => ответ.json())
.затем((json) => установить данные (json));
}, []);константа отображаемые данные = (данные) => {
возвращаться (
{данные.длина > 0 &&
данные.карта((дела, указатель) => {
возвращаться<лиключ={индекс}>{задача.название}ли>;
})}
</ul>
);
}; - В обратном сегменте Пагинация компонент, в том числе Данные дисплея функция для отображения полученных данных в браузере. Вот обновленная версия кода:
Позвонив displayData (данные) внутри элемента JSX и передачи данные state в качестве параметра, функция затем отобразит полученные данные в виде неупорядоченного списка в браузере.возвращаться (
<>Компонент пагинации</h1>
>
{displayData (данные)}
</>
);
В данном конкретном случае отображаемый список состоит из двухсот задач. Однако в реальных сценариях приложения будут управлять большими объемами данных. Отображение всех этих данных на одной веб-странице может привести к проблемам с производительностью, таким как медленная загрузка и общая низкая производительность приложения.
Чтобы решить эту проблему, было бы целесообразно включить функцию разбиения на страницы, чтобы гарантировать, что каждая страница содержит ограниченное количество элементов, к которым пользователи могут получить доступ отдельно с помощью кнопок навигации.
Такой подход позволяет пользователям перемещаться по данным более управляемым и организованным образом, повышая общую производительность и удобство работы с приложением.
Реализация логики разбиения на страницы для отображения ограниченного количества элементов на странице
Чтобы определить, какие элементы списка дел будут отображаться на каждой странице, нам нужно реализовать необходимую логику. Однако, прежде чем продолжить, важно определить общее количество необходимых страниц на основе доступных элементов списка дел.
Для этого вы можете добавить следующий код в Пагинация компонент:
константа страницы = [];
для (позволять я = 1; я <= Математика.ceil(data.length/itemsPerPage); я++) {
страницы.push (я);
}Приведенный выше фрагмент кода повторяет данные массив, вычисляя общее количество страниц, необходимых путем деления длины данные массив на желаемое количество элементов на странице — начальное количество элементов на странице установлено равным пяти в пункты на странице состояние.
Тем не менее, вы можете обновить это число по мере необходимости, чтобы проверить логику. Наконец, каждый номер страницы затем добавляется в страницы множество. Теперь давайте реализуем логику отображения количества элементов на странице.
константа indexOfLastItem = CurrentPage * itemsPerPage;
константа indexOfFirstItem = indexOfLastItem - ItemsPerPage;
константа pageItems = data.slice(indexOfFirstItem, indexOfLastItem);Этот код определяет задачи для отображения на странице браузера на основе текущая страница и пункты на странице переменные — он извлекает соответствующие индексы для набора задач из массива данных, используя метод slice. Затем индексы используются для извлечения конкретных задач, принадлежащих нужной странице.
Теперь, чтобы отобразить задачи, обновите Данные дисплея функцию, передав pageItems как параметр. Вот обновленная версия кода:
возвращаться (
<>
Компонент пагинации</h1>
>
{displayData (элементы страницы)}
</>
);
Сделав это обновление, Данные дисплея функция будет соответствующим образом отображать ограниченное количество элементов списка дел, отражая текущую страницу.
Оптимизация доступа к страницам и навигации с помощью кнопок навигации
Чтобы пользователи могли легко перемещаться и получать доступ к содержимому на разных страницах, вам необходимо добавить кнопки «Назад» и «Далее», а также кнопки, указывающие конкретные номера страниц.
Во-первых, давайте реализуем логику для кнопок номеров страниц. в Пагинация компонент, добавьте приведенный ниже код.
константа дескрипторклик = (событие) => {
установить текущую страницу (Число(событие.target.id));
};
константа renderPageNumbers = страницы.карта((число) => {
если (число < maxPageNumberLimit +1 && число > minPageNumberLimit) {
возвращаться (
ключ = {число}
идентификатор = {число}
onClick={handleClick}
className={currentPage == номер? "активный": нулевой}
>
{число}
</li>
);
} еще {
возвращатьсянулевой;
}
});
ручкаклик Функция срабатывает, когда пользователь нажимает кнопку с номером страницы. Затем это действие обновляет текущая страница переменная состояния с выбранным номером страницы.
рендерпаженуберс переменная использует карта метод для перебора страницы массив и динамически генерирует элементы списка, представляющие каждый номер страницы. Он применяет условную логику, чтобы определить, какие номера страниц отображать на основе заданных пределов максимального и минимального количества страниц.
Наконец, добавьте код для следующей и предыдущей кнопок.
константа ручкаNextbtn = () => {
setcurrentPage (текущая страница + 1);
если (текущая страница + 1 > maxPageNumberLimit) {
setmaxPageNumberLimit (maxPageNumberLimit + pageNumberLimit);
setminPageNumberLimit (minPageNumberLimit + pageNumberLimit);
}
};
константа дескрипторPrevbtn = () => {
setcurrentPage (текущая страница - 1);
если ((текущая страница - 1) % pageNumberLimit == 0) {
setmaxPageNumberLimit (maxPageNumberLimit - pageNumberLimit);
setminPageNumberLimit (minPageNumberLimit - pageNumberLimit);
}
};
Чтобы отобразить кнопки навигации, обновите элементы JSX следующим образом:
возвращаться (
<>Компонент пагинации</h1>
>
{displayData (элементы страницы)}"номер страницы"
>
onClick={handlePrevbtn}
disabled={currentPage == страницы[0]? истинный: ЛОЖЬ}
> Предыдущий
</button>
</li>
{renderPageNumbers}
onClick={handleNextbtn}
disabled={currentPage == страницы[pages.length - 1]? истинный: ЛОЖЬ}
> Далее
</button>
</li>
</ul>
</>
);
Как только компонент отобразится, он отобразит номера страниц, кнопки «Назад» и «Далее» и соответствующие элементы данных для текущей страницы.
Выбор между библиотеками пагинации и пользовательскими системами пагинации
Когда дело доходит до выбора между использованием библиотек разбивки на страницы или созданием собственной системы разбивки на страницы, выбор зависит от различных факторов. Библиотеки разбиения на страницы, такие как react-paginate, предоставляют готовые компоненты и функциональные возможности, что позволяет быстро и просто реализовать их.
С другой стороны, создание пользовательской системы разбивки на страницы с использованием хуков React обеспечивает большую гибкость и контроль над логикой разбиения на страницы и пользовательским интерфейсом. В конечном итоге решение будет зависеть от ваших конкретных потребностей и предпочтений.