Динамическая пагинация на React JS. Подгрузка при скролле страницы React JS
HTML-код
- Опубликовано: 2 окт 2024
- В этом уроке мы сделаем динамическую пагинацию, другими словами подгрузку данных при скролле страницы на React js.
Мой курс "Продвинутый Frontend. В production на React" - ulbitv.ru/fron...
Поддержать меня и мой канал вы можете по ссылкам ниже.
Qiwi кошелек - www.qiwi.com/n...
Яндекс деньги - yoomoney.ru/to...
![Как сделать пагинацию на React.js ? [React Pagination]](/img/1.gif)
Откровенно говоря, я на этом канале встречаю то, что действительно интересно увидеть и посмотреть. Канал просто пушка. Удачи и благополучия:)
В самом конце у автора опечатка: в проверке scrollHandler должно быть photos.length === totalCount, а не photos.length < totalCount
PS Отличный урок, огромное спасибо
Большое спасибо за такой контент, быстро, кратко и по делу. Надеюсь у вас в жизни все будет хорошо
Спасибо за урок! Уже несколько раз применяю данный метод в рабочем проекте
Как всегда - лучший!
Если после добавления общего количества страниц контент при скролле не загружается, то во втором useEffect вторым аргументом нужно передать не пустой массив, а totalCount:
useEffect(() => {
document.addEventListener('scroll', scrollHandler);
return () => {
document.removeEventListener('scroll', scrollHandler)
}
}, [totalCount])
спасибо!
Спасибо, у меня новые данные не приходили в scrollHandler, а теперь работает
и там надо не только totalCount но и те объекты что мы получаем, чтобы сравнение работало для конца скролла
Спасибо тебе ! Выручил
всем лойсы, комменты в жилу!
отличный материал!!!
Ох парень, ты как всегда. Ролик на 10 минут, но все четко. По делу, и с комментариями. Приятно следить!
большое спасибо ulbi tv
Спасибо бро
добрый вечер, подскажите, а почему у меня переменные photos и totalCount внутри функции scrollHandler равны пустому массиву и нулю?! уже 3 раза пересмотрел
Добрый вечер, трудно сказать так, надо видеть код, можете написать мне в контакте)
useEffect для слушателя скролла должен так же срабатывать при fetching == true
useEffect(() => {
document.addEventListener('scroll', scrollHandler)
return function () {
document.removeEventListener('scroll', scrollHandler)
}
}, [fetching])
Иначе стейты для хэндлеров менятся не будут.
Потому, что скролХендлер замыкается с теми данными, что попали при инициализации и они там остаются навечно навсегда 😅
есть ссылка на гит данного урока ?
А что делать, если у меня в запросе на сервер помимо currentPage есть и другие запросы, например sort , который тоже меняется? И + запрос хранится в reducer(redux-thunk)
лайк
за пагинацию
Привет! Очень полезноє видео как и контент канала! Спасибо что уделяєш время интересным и обучающим видео!
как избавится от скачущего экрана.. перерисовывает копоненту... вместо скролла использовал обсервер
IntersectionObserver кагбы существует. Он удобнее
Привет. Делал также как в твоём видео, при скролле у меня почему-то загружает 3-5 страниц и после останавливается, хотя через раз работает нормально и может прогрузить все страницы. Поигрался с зависимостями в useEffect в котором добавляется обработчик скролла, добавлял туда totalCount и fetching по отдельности и вместе, но не помогло. Не знаешь в чём может быть дело? Заранее спасибо за крутые обучающие ролики!
Спасибо за урок динамической пагинации на React!
Спасибо за видео. Насколько знаю у такой пагинации есть траблы с СЕО оптимизацией, особенно у яндекса, поэтому в каких то интернет магазинах лучше делать классическую постраничную пагинацию, ну это так, на случай если кому то понадобится
Возможно) Честно говоря с СЕО не особо знаком
У любом спа траблы с сео. Потому что по факту у тебя страница с одним div#root и скриптами. Это решается ssr и другими вариантами.
Привет! Крутые видео, спасибо. Ты будто чувствуешь что нужно)
Хотел узнать, работал ли со styled-component?
Привет, спасибо большое) со styled component не работал, не приходилось)
@@UlbiTV понял. Было бы интересно узнать твоё мнение, как будет свободное время)
Несколько раз на пед проектах пытаюсь подключить, но что-то не заходит, хотя идея интересная. Стили прям в компоненте. Но появляется проблема, когда много стилей, компонента превращается в портянку, этого конечно можно избежать создавая отдельные js файлы со стилями, но тогда смысл теряется.
Лол, сам ответил на свою просьбу
@@bigenough2122 ахах, ну да, сам и ответил, компоненты максимально уменьшать надо, выносить из них логику/состояние и уж тем более стили, особенно если проект большой, иначе это трудно поддерживать) Но в небольших можно хоть инлайн стили писать, тут уже дело удобства
@@UlbiTV а кст, контейнерные компоненты в приложении считается хорошим тоном?
+
Если же у вас не срабатывает document.addEventListener('scroll', handleScroll) то добавьте третим аргументом true и всё сработает document.addEventListener('scroll', handleScroll, true)
Классная инфа!
Почему выбрал реакт, а не вью? Недавно на вью начал проект, переходиться легко и назад не сильно хочется 😄
С реакта начинал, а так я и с вью тоже работаю) Одно и тоже по сути, в разной оболочке)
@@UlbiTV в принципе да, на вью за день два основы понял) Просто вижу что уроки только по реакту, думаю может больше нравится)
@@TheProfessionalGambler вью проще? что в нем нрав, и почему решил перейти?)
@@TheProfessionalGambler реакт роднее как то 😁
@@bigenough2122 мне показался проще, на я уже знал реакт. Может с 0 тоже казался сложным) Появилась работа на вью вот и изучил. Вью как более молодой взял лучшее от реакта и ангуляра. Например v-model, отделение 'модели' и разметки, автобиндинг this. Один из главных плюсов, это что вью фреймворк и централизовагный стейт с роутом очень легко встраивается + все это можно посмотреть в одном расширении хрома. Можно сказать, что реакт + мобх похож на вью.
Неплохо. Лёгкий ненапряжный урок.
Благодарю, стараюсь для вас)
Интересует как подобное реализовать на Next JS. Я так понимаю данный метод не подойдет ибо рендеринг будет только на стороне клиента. А решений без перехода на другую страницу я так и не нашел.
Допустим я подгрузил несколько пользователей 20 штук , хочу удалить первых 2 , они удалятся из базы данных но не в реальном времени удалятся только после перезагрузки страницы , я не могу понять как это можно сделать
Best all the best
Бля, чел, я работаю и пользуюсь твоими видосами. Просто кайф, что можно не ебать себе мозги по поводу таких штук и сосредоточиться на других, еще не решенных задачах. Красава)) Лайк
Как всегда отлично преподнес информацию, спасибо, полезная штука. И тут появился вопрос - я сейчас балуюсь со switch кейсом, а именно собрал несколько вариантов для показа страницы (в зависимости от значения view меняется контент, идея в том, чтобы обернуть контент в приятную анимацию и фактически убрать переходы по страницам) и соответственно вопрос, разумно ли было бы использовать динамическую пагинацию и хранить данные на том же mongodb, а погружать при смене значения view? Это исключительно теоретический вопрос, поскольку, понятное дело запросы и ответы будут требовать времени и могут ловить лишние ошибки. Просто интересно, где еще, кроме погрузки фактического контента можно использовать этот инструмент... Мне пришло в голову только возможность догружать темы, скажем, если взять тот же проект с mern-cloud-disc, то добавлять персональные темы, а настройки хранить под ключом юзера. Сорри за большой текст:)
Значение view храню в state*
Большой текст это всегда круто, значит человеку действительно интересно) пиши столько, сколько считаешь нужным, всегда постараюсь ответить) Ну вообще, конкретно вот такая пагинация нужна только лишь для подгрузки поэтапной каких то данных, другой кейс даже придумать не могу)
Для поддержки канала)) Давай серию уроков про jest, тестировать можно одно из тех приложений что ты делал в предыдущих видео. Думаю многим будет актуально.
Спасибо!!!👍
Видос топчик, продолжай снимать! Если решить попасть в тренды ютуба, юзай Вибум, а с промокодом ST1234581 будет неплохая скидка
Спасибо)
top
Спасибо. Отличное видео про динамическую пагинацию. React рулит.
Спасибо, Константин!
Курто, полезно !
Благодарен.
#reactjs
Благодарю вас!)
Спасибо за видео. Тимур а сможете показать как реализовать SideBar с навигацией, с выпадающими списками, с активным роутом и т.д. , например как у ютуб)
Сразу оговорюсь, что я новичок, а потому сомневаюсь в своем ответе, да и не уверен, о том ли спрашивали, но в курсе про клауд диск на канале есть очень понятные объяснения как делать навигацию с роутами(при помощи react-router-dom), кстати, он же позволяет упростить создание и работу с попап(если нужен выпадающий поверх сайдбар), но если нужен сдвиг контента, то я бы описал 2 класса в CSS и использовал state, как триггер(в том же курсе, видео про loader очень понятно объясняет)... Но дождемся ответа спецов:))))
И вам спасибо за комментарий, Максим) есть видео про бургер меню, там та же навигация по сути) Но вообще что то связанное с грамотной навигацией я сниму наверное чуть позже)
@@ipa_stor да ты все правильно сказал)) спасибо!)
@@UlbiTV все видео с канала:))) помогают
@@ipa_stor Очень приятно это слышать, постараюсь сделать еще как можно больше полезных видео) Скоро будет полный курс по MobX
Как всегда спасибо) единственное хотел задать вопрос: что нужно делать чтоб typescript не ругался на unexpected arrow functions ( функция onLoad по дефолту в твоем видео) ?
Зашел поставил лайк, спс за инфу
Спасибо друг, ценю!)
Очень помог
Привет, все круто, все обалденно, но пожалуйста кидай код, бывает не когда переписывать.
Почему так быстро все? приходится замедлять в 2 раза!
В коде присутствует ошибка, чтобы получить общее количество элементов надо писать:
response.headers.get(‘x-total-count’)
response.headers.get is not a function
А код из видео вполне работает.
@Егор Леро , благодарю за информацию, пол часа искал причину почему нет доступа к значению данного заголовка, либо что-то поменялось в получении заголовков с момента выпуска видео до текущего, но вариант с видео, не работает, выдает undefined, так как заголовки обернуты в symbol и просто так к ним уже не получить доступ, а вот через get(‘x-total-count’), все отлично получает, но с другой стороны @HaDaGaRa утверждает, что все на оборот, как бы там ни было вариант от Егора у меня работает, а как на видео нет, к справке, я использовал данную пагинацию на redux, redux-saga, next.js, а автор использует простой react и хуки, хотя скорее всего это дело в axios возможно он как-то преобразует доступ к заголовкам и не только, в общем те у кого не работает, пробуйте оба варианта.
Супер
Бомболейло! Теперь такое прикручу куда угодно!
Спасибо огромное за крутой контент. Есть вопросик. У меня при скролле функция Handler отрабатывает 2 раза и подгружается сразу по 2 новые страницы. Почему так может быть?
UPD: оказывается, что такое происходит только c открытым окном devtools в chrome)) А вот почему??
Интересная информация 👍
Благодарю!)
А куда пропала обычная пагинация?
Не совсем понял вопрос?
Просто шикарно, не большой ролик, тема хорошо раскрыта, всё чётко и понятно и нет воды. Популярна тема среди зарубежных ютуберов - разработка клона какого-то приложения, подумайте над этим вариантом. Кого можете посоветовать из англоязычных авторов ? из ютуба или юдеми. Даже не могу представить, сколько времени у вас уходит на создание видео в таком режиме, очень часто они выходят, лишь бы вы не выгорели, не забывайте отдыхать!
Спасибо друг!) Я сам давно уже не смотрю ролики, как то времени не хватает, только по конкретным темам, поэтому наврядли кого то посоветую) Отдыхать успеваю, хотя хотелось бы побольше!) Спасибо вам!
Дай бог тебе здоровьечка на все органы!
Спасибо всё классно изложено, но у меня не useState, ни import не работают....
функция scrollHandler - не работает как задумывалось. В ней значение page на момент создания и следовательно при прокрутке контента не меняется .
У тебя в конце не правильно, scrollHandler не видит стейт переменные -
The scrollHandler function in the code you provided is not directly accessing the state variables because it is a separate function and does not have direct access to the component's state.
Чувак, спасибо конечно за видео, но где код? Или ты предлагаешь пользователям стать стеногрфистками и записывать на слух?
возникает резонный вопрос, почему в реакте мы не используем родное onScroll? зачем обращаться к глобальной переменной, да еще и навешивать события?
Еще вопрос, на сколько правильно в реакт приложении использовать document?
Отлично. А как насчет скрытия / удаления уже просмтренной информации?
Спасибо, а зачем?
@@UlbiTV Например для оптимизации
А у меня скролл плашка остается на месте, т.е отрисовываются новые табы, и прокрутка как была < 100 так и остается. В чем может быть проблема?
Улби напиши плиз, зачем использовать замут с юзЭффектом если можно просто повесить на див онСкрол?
Спасибо за полезное видео. Очень помогли
Интересная тема. Только в моем случае это будет не высота всей страницы, а отдельного блока. Ну, концепцию нужно будет поменять немного, а так всё тоже самое.
А если вот наперед забегать, что используется в реальности для пагинации при скролле в реальных проектах?
Есть проблема при такой же пагинации при скролле вверх)
its cool
Спасибо, отличный материал.
Благодарю!
Супер-полезный канал, спасибо большое!!!
Гигант не только мысли, но и дела
Ну прям гигант)) спасибо!)
лайк, ролик топ! решал проблему и тут прям все есть. автору респект!
Спасибо за видео
Очень крутой контент, спасибо)
Спасибо, как всегда материал огонь
Хорошо, но вместо скролла лучше использовать developer.mozilla.org/ru/docs/Web/API/Intersection_Observer_API
Не знал об этом, действительно, то что нужно, спасибо за инфу)
в поддержку топового канала
очень годно! очень!
Спасибо помог !
Бро, ты супер. Спасибо тебе большое.
Как всегда полезно, сжато, но ёмко!
Спасибо за видео)
Лучшее видео в своем роде.
спасибо.
Спасибо!
Я так думаю, что допустим ты долистал до 10 страницы, зачем у пользователя показывать предыдущие, если их можно убрать. А если назад отскроллился, то запрос за ними сделать. Как я понимаю, это все в оперативке находится, и ее может так не хватить
Для этого есть виртуальные списки
Есть еще такая штука как -- IntersectionObserver Насколько целесообразно использовать её?
Лучше использовать её, автор на момент создания ролика не знал о ней
Так хлопцы идея конечно хорошая но есть нюансы, этот код не совсем рабочий, длинна загруженных постов не будет изеняться в коллбеке потому что она будет браться из замыкания, соответственно проверка на загрузку всех постов не сработает никогда. Если добавить массив загруженных постов в массив зависимостей ЮЗЕффекта то начинаются баги в виде сбоя порядка и очередности загрузки страниц. Я думаю что намного проще и целесообразнее делать динамическую пагинацию с использованием IntersectionObserver API.
P.S. Если я не прав то поправьте пожалуйста
В его фундаментальном курсе по реакт он как раз использует IntersectionObserver
Сейчас такое лучше реализовывать через обзервэбл апи
Еба, обычно я вас всех на скорости х2.5 смотрю и мне медленно, но без звука кажется всё таким быстрым.
А по поводу видео, спасибо за видео.
Великолепное видео, попробовал, просто и круто, благодарность автору!)