Введение

Для Frontend Engineer красота приложения зависит не только от внешнего вида, но и от гибкого доступа к приложению. В настоящее время с сервера/API извлекается бесчисленное количество данных, и если они не обрабатываются должным образом, это может привести к сбою приложения.

Кроме того, вы, возможно, были в ситуации, когда вы хотите, чтобы пользователи могли беспрепятственно извлекать свои данные, не позволяя им нажимать кнопку, прежде чем они получат больше пакетов своих данных.

Если вы хотели выполнить вышеупомянутое и получить беспрепятственный поток данных при прокрутке окна, выполнить разбиение на страницы из внешнего интерфейса, использовать React-Query — использовать обработчик запросов для управления запросами и изучить лучшие практики, то эта статья для вас. для тебя.

Чему стоит научиться

В этой статье я расскажу вам, как сделать следующее:

  • Управляйте данными пользователей с помощью хуков ReactJs,
  • Как использовать react-query, хук useQuery для обработки запросов,
  • Обработка бесконечной прокрутки,
  • Обрабатывать разбиение на страницы из внешнего интерфейса,

Предпосылки:

  • Знать Javascript
  • Знать основы ReactJS
  • Установить узел/Npm

Настройка вашей среды

Чтобы создать новый проект реакции, используйте следующую ссылку и назовите ее react-infinite-loop. В вашем терминале установите axios и response-query, как показано ниже:

cd Desktop
cd react-infinite-loop
npm i react-query -save
npm i -D axios -save
code .

В приведенном выше фрагменте я зашел в папку на рабочем столе, перешел к созданному проекту и установил две зависимости: react-query, которая представляет собой хук, помогающий мне управлять HTTP-запросами, библиотеку, axios за запрос и, наконец, открыл проект в vscode с кодом точка (.).

Инициализация React-запроса

Давайте перейдем к компоненту приложения и добавим следующее, как показано ниже:

В приведенном выше фрагменте был создан экземпляр клиента, назначенный переменной client, а затем переданный в параметр client QueryClientProvider, чтобы все упакованные компоненты имели доступ к клиенту.

Создать структуру папок

Перейдем к терминалу и запустим следующее:

cd  src
mkdir Component Query View
cd Component
touch List.jsx
cd ..
cd View
touch Home.js

В приведенном выше фрагменте я зашел в папку src и создал три разные папки с именами Component, View и Query. Я создал два файла: List.jsx, который находится внутри папки компонента, и файл Home.js, который находится внутри папки View.

Обработчик запросов

Внутри папки Query, которую я создал выше, создайте файл и назовите его util.js, внутри него добавьте следующий фрагмент кода:

В приведенном выше фрагменте я создал функцию fetchPost, которая будет обрабатывать выборку сообщений из API, поисковый запрос page и limit был передан вместе с запросом в other, чтобы ограничить объем данных, которые будут извлечены за один раз. из API, и я также установил Content-Type запроса на application/json и установил формат кодировки на UTF-8.

Страница и лимит — это параметры, которые будут переданы из того места, где я буду выполнять функцию fetchPost. Так как я буду использовать хук useQuery в качестве менеджера API, я деструктурировал свойство queryKey. Свойство queryKey будет массивом, имеющим два свойства: ключ для запроса и другие параметры (страница/лимит).

Поскольку мне нужны были только параметры, мне пришлось использовать запятую, чтобы выделить ключ к запросу, а затем деструктурировать страницу и ограничить. Подробнее о react-query(useQuery) можно прочитать здесь.

Получение запроса с использованием хука UseQuery

Давайте перейдем к компоненту Home, который я создал выше, и добавим к нему следующее:

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

Давайте перейдем к извлечению сообщений onMount страницы с помощью хука useQuery из react-query, как показано ниже:

В приведенном выше фрагменте я использовал хук useQuery для управления почтовым запросом после монтирования компонента Home, я импортировал функцию fetchPost, которая обрабатывает вызовы API, в качестве параметра useQuery и передал массив, содержащий запрос queryKey. и другие параметры (страница и ограничение).

Я использовал свойство retry для повторного запуска запроса в случае неудачи изначально, я установил задержку в три секунды перед повторной попыткой запроса и избегал выполнения запроса к API при каждом фокусе на окне. Хук UseQuery дает нам свойства onError и onSuccess, которые управляют ошибкой и успешным ответом на запрос. Поэтому, как только запрос выполнен успешно, я устанавливаю возвращаемые данные в пост-состояние, которое я создал выше.

Рендеринг полученных данных

В приведенном выше фрагменте, когда компонент Home смонтирован, я использовал условный рендеринг, чтобы проверить, были ли сообщения возвращены из HTTP-запроса, который я сделал, проверив, что длина пост-состояния больше нуля.

Как только он становится больше нуля, я перебираю массив сообщений и деструктурирую свойства сообщений, которые будут отображаться для пользователей, и передаю их в качестве реквизита компоненту списка, который я создал ранее.

Помните, я деструктурировал isFetching и isLoading из хука useQuery, они используются в качестве флага для отслеживания, когда запрос пытается получить некоторые данные и когда он обновляет кэшированные данные с последними изменениями в данных.

Давайте добавим приведенный ниже фрагмент кода, чтобы управлять тем, что происходит, пока я жду завершения моего запроса:

Сразу после рендеринга сообщений добавьте приведенный выше фрагмент, чтобы показать пользователю, что сообщение еще не загружено.

Давайте перейдем к компоненту List и визуализируем свойства, как и ожидалось, как показано ниже:

Я деструктурировал реквизит и визуализировал его в соответствующих элементах. Давайте зайдем в браузер и посмотрим, что я сделал до сих пор в приведенном ниже фрагменте:

В приведенном выше фрагменте я успешно отобразил полученные сообщения в браузере, заголовок, идентификатор пользователя и тело сообщений. Теперь, когда пост отрендерен, давайте посмотрим, как загрузить больше постов, как только я дойду до конца каждой выбранной страницы.

Бесконечная прокрутка (пагинация при прокрутке)

Чтобы мы могли получить следующую страницу данных при прокрутке, мне нужно установить следующие проверки:

  • Получить, когда пользователь прокручивает вниз,
  • Установить флаг,
  • Добавить данные следующей страницы к предыдущей извлеченной

Получать, когда пользователь прокручивает страницу вниз

В компонент Home добавим следующий фрагмент кода:

В приведенном выше фрагменте я использовал хук под названием useLayoutEffect, этот хук импортирован из библиотеки реагирования, он полезен, когда вы хотите прочитать макет из DOM и синхронно перерендерить.

прокрутка сверху; используется для получения высоты документа при прокрутке, начиная с нуля, scrollHeight; используется для получения высоты браузера, а clientHeight: используется для получения видимой высоты документа, все они были получены из тела документа, и, наконец, я передал функцию handleScroll прослушивателю событий для выполнения в любое время, когда пользователь прокручивает.

Внутри метода handleScroll сразу после объявлений добавьте следующий фрагмент кода:

Установить флажок

Выше я вычитаю общую текущую высоту документа (scrollTop) из общей высоты документа (scrollHeight) и проверяю, равна ли она видимой высоте документа (clientHeight) в прокрутке d, и присваиваю значение setPaginateFlag — логическое значение.

После этого я проверял, достиг ли пользователь нижней части видимой высоты, если это так, я устанавливаю флаг в состояние, называемое setMorePosts, если morePosts имеет значение true и есть еще данные для извлечения, то я извлекаю следующие данные.

Ранее useLayoutEffect был настроен на выполнение onMount, но я также хочу, чтобы он запускался повторно при обновлении morePosts и nextPage, поэтому давайте установим morePosts и nextPage в массиве зависимостей useLayoutEffect, как показано ниже:

Состояние setMorePosts и setNextPage объявляется над функцией useQuery, как показано ниже:

Обработка нумерации страниц

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

По умолчанию общее количество данных из API составляет сто (100). Я делю общее количество данных на количество данных на странице, чтобы получить totalPage. Я проверил, больше ли totalPage, чем текущая страница.

Если да, я увеличиваю страницу на 1, которая получает следующую страницу, в противном случае я возвращаю текущую страницу и, наконец, устанавливаю nextPage в переменную nextPage — это происходит каждый раз, когда запрос успешен. Переменная limit становится единицей, если я устанавливаю для нее значение меньше единицы.

Следует отметить, что для неисчисляемых данных вам, возможно, придется получить все, а затем написать приведенный выше алгоритм для разбивки на страницы или, скорее, получить общее количество, отправленное вам бэкэнд-инженером.

Добавить данные следующей страницы к предыдущей извлеченной

Далее мне нужно будет объединить данные следующей страницы с текущими данными, как показано в следующем фрагменте:

В приведенном выше фрагменте я изменил функцию setPosts и использовал оператор распространения для объединения текущих сообщений и следующего пакета сообщений, полученных из запроса.

Демо

Я думаю, пришло время взглянуть на то, что я сделал до сих пор, используя следующую демо-ссылку.

Заключение

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

Если эта статья была вам полезна, ставьте лайки, комментируйте и подписывайтесь на меня в Linkedin и Medium, чтобы увидеть больше моей статьи. Нажмите на следующую ссылку, чтобы получить доступ к исходному коду.

Не стесняйтесь оставлять любые предложения/комментарии. если у вас есть тема, основанная на экосистеме Javascript/React.js, пожалуйста, свяжитесь с нами, и я буду рад написать об этом. Спасибо.

Если этот пост был полезен, пожалуйста, несколько раз нажмите кнопку аплодисментов 👏, чтобы выразить свою поддержку автору 👇

🚀Разработчики: учитесь и развивайтесь, не отставая от того, что важно, ПРИСОЕДИНЯЙТЕСЬ К FAUN.