Легко добавить пагинацию

Пагинация

Разбивка на страницы — довольно часто используемый метод для более разумного управления производительностью веб-сайта. В настоящее время мы часто предоставляем бесконечную прокрутку страницы, что означает, что как только пользователь прокручивает вниз, новые данные извлекаются или разбиваются на страницы.

Я добавляю эту технику пагинации на свой сайт iHateReading. Технический стек, который я использовал, — это ответный запрос для вызовов API и кэширования данных.

Я также использовал Browser Intersection API. Этот API в основном помогает браузеру отслеживать и обнаруживать исключительную позицию элемента DOM. Intersection API помогает отслеживать положение элемента DOM и вызывает метод обратного вызова при превышении порогового значения.

Пример реального мира

  • Допустим, у нас есть кнопка «Загрузить еще» в самом низу длинного списка блогов.
  • Кнопка «Загрузить больше» нажата или появляется в представлении, мы будем получать новые данные с помощью API.

API-интерфейс Intersection в основном помогает нам отслеживать просмотр кнопки «Загрузить больше» и вызывать метод обратного вызова во время пересечения.

Реагировать на запрос

Запрос React — это набор хуков, которые помогают кэшировать и извлекать данные во внешнем интерфейсе. Я не буду вдаваться в детали реагирующего запроса, так как я уже рассказал о нем кучу историй.

Введение в React Query Shorts

Статья с ответным запросом

Как добавить пагинацию

Давайте разделим методы на 2 этапа: один — это вызов API, а другой — разбиение на страницы или номер страницы.

Вызов API для извлечения данных
Вызов API берет номер страницы, с которой элемент должен быть извлечен из базы данных. Например, первая страница получит 10 элементов, затем номер страницы = 2 будет извлекать элементы, начиная с 11-го по 20-й элемент и так далее.

const {data, isLoading } = useQuery(["blogs"], 
 async() => { 
  const data = await fetchBlogs(pageNumber);
  return data;
 }
);

Номер страницы
Номер страницы отслеживается и поддерживается пользовательским интерфейсом. Как только пользователь нажимает кнопку «Загрузить больше», API-интерфейс пересечения вызывает метод обратного вызова и увеличивает номер страницы на 1. Это продолжается до тех пор, пока номер страницы не достигнет последнего значения.

const [pageNumber, setPageNumber] = useState(0);
const [isIntersecting, setIntersecting] = useState(false);
const observer = new IntersectionObserver(([entry]) =>
 setIntersecting(entry.isIntersecting));
useEffect(() => {
 observer.observe(ref.current);
   return () => observer.disconnect();
}, []);

API извлекает данные с разбивкой на страницы

  • Как только мы дойдем до кнопки загрузки, состояние isIntersection изменится на true.
  • Функция обратного вызова API пересечения будет получена, и значение номера страницы увеличится на единицу.
  • useQuery снова вызовет вызов API, вызвав fetchBlogs метод, передав обновленное значение pageNumber. Следовательно, будут извлечены наши разбитые на страницы данные или следующие 10 элементов. Запрос React автоматически кэширует эти новые данные, чтобы обеспечить лучший пользовательский интерфейс и уменьшить количество вызовов API.

Заключение

Это довольно легко реализовать с помощью API-интерфейса response-query и пересечения. В противном случае нам пришлось бы отслеживать расположение кнопки «Загрузить больше» каждый раз, когда пользователь прокручивал веб-страницу, а затем увеличивать номер страницы и снова вызывать API, чтобы получить следующие 10 элементов.
Становится немного грязно, и производительность также снижается. затруднено, но с помощью API-интерфейса реакции и пересечения мы избегаем ненужного повторного рендеринга, повышая производительность приложения.

Продолжайте развивать
Shrey
iHateReading

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord . Заинтересованы в хакинге роста? Ознакомьтесь с разделом Схема.