Динамическая пагинация на React JS. Подгрузка при скролле страницы React JS
ฝัง
- เผยแพร่เมื่อ 5 ก.พ. 2025
- В этом уроке мы сделаем динамическую пагинацию, другими словами подгрузку данных при скролле страницы на React js.
Мой курс "Продвинутый Frontend. В production на React" - ulbitv.ru/fron...
Поддержать меня и мой канал вы можете по ссылкам ниже.
Qiwi кошелек - www.qiwi.com/n...
Яндекс деньги - yoomoney.ru/to...
Откровенно говоря, я на этом канале встречаю то, что действительно интересно увидеть и посмотреть. Канал просто пушка. Удачи и благополучия:)
Ох парень, ты как всегда. Ролик на 10 минут, но все четко. По делу, и с комментариями. Приятно следить!
Спасибо за урок динамической пагинации на React!
Спасибо за урок! Уже несколько раз применяю данный метод в рабочем проекте
Большое спасибо за такой контент, быстро, кратко и по делу. Надеюсь у вас в жизни все будет хорошо
Неплохо. Лёгкий ненапряжный урок.
Благодарю, стараюсь для вас)
Просто шикарно, не большой ролик, тема хорошо раскрыта, всё чётко и понятно и нет воды. Популярна тема среди зарубежных ютуберов - разработка клона какого-то приложения, подумайте над этим вариантом. Кого можете посоветовать из англоязычных авторов ? из ютуба или юдеми. Даже не могу представить, сколько времени у вас уходит на создание видео в таком режиме, очень часто они выходят, лишь бы вы не выгорели, не забывайте отдыхать!
Спасибо друг!) Я сам давно уже не смотрю ролики, как то времени не хватает, только по конкретным темам, поэтому наврядли кого то посоветую) Отдыхать успеваю, хотя хотелось бы побольше!) Спасибо вам!
Зашел поставил лайк, спс за инфу
Спасибо друг, ценю!)
Бомболейло! Теперь такое прикручу куда угодно!
Спасибо за полезное видео. Очень помогли
Привет! Очень полезноє видео как и контент канала! Спасибо что уделяєш время интересным и обучающим видео!
Как всегда - лучший!
Спасибо!!!👍
лайк, ролик топ! решал проблему и тут прям все есть. автору респект!
Супер-полезный канал, спасибо большое!!!
Бля, чел, я работаю и пользуюсь твоими видосами. Просто кайф, что можно не ебать себе мозги по поводу таких штук и сосредоточиться на других, еще не решенных задачах. Красава)) Лайк
Спасибо. Отличное видео про динамическую пагинацию. React рулит.
Спасибо, Константин!
Как всегда полезно, сжато, но ёмко!
большое спасибо ulbi tv
Интересная информация 👍
Благодарю!)
Курто, полезно !
Благодарен.
#reactjs
Благодарю вас!)
Если после добавления общего количества страниц контент при скролле не загружается, то во втором useEffect вторым аргументом нужно передать не пустой массив, а totalCount:
useEffect(() => {
document.addEventListener('scroll', scrollHandler);
return () => {
document.removeEventListener('scroll', scrollHandler)
}
}, [totalCount])
спасибо!
Спасибо, у меня новые данные не приходили в scrollHandler, а теперь работает
и там надо не только totalCount но и те объекты что мы получаем, чтобы сравнение работало для конца скролла
Спасибо тебе ! Выручил
всем лойсы, комменты в жилу!
Бро, ты супер. Спасибо тебе большое.
Лучшее видео в своем роде.
Спасибо, отличный материал.
Благодарю!
отличный материал!!!
В самом конце у автора опечатка: в проверке scrollHandler должно быть photos.length === totalCount, а не photos.length < totalCount
PS Отличный урок, огромное спасибо
Для поддержки канала)) Давай серию уроков про jest, тестировать можно одно из тех приложений что ты делал в предыдущих видео. Думаю многим будет актуально.
Спасибо, как всегда материал огонь
Спасибо бро
в поддержку топового канала
Супер
Очень крутой контент, спасибо)
IntersectionObserver кагбы существует. Он удобнее
Спасибо за видео
Спасибо за видео)
Спасибо за видео. Насколько знаю у такой пагинации есть траблы с СЕО оптимизацией, особенно у яндекса, поэтому в каких то интернет магазинах лучше делать классическую постраничную пагинацию, ну это так, на случай если кому то понадобится
Возможно) Честно говоря с СЕО не особо знаком
У любом спа траблы с сео. Потому что по факту у тебя страница с одним div#root и скриптами. Это решается ssr и другими вариантами.
лайк
за пагинацию
Best all the best
Гигант не только мысли, но и дела
Ну прям гигант)) спасибо!)
Очень помог
Великолепное видео, попробовал, просто и круто, благодарность автору!)
Спасибо!
очень годно! очень!
Спасибо помог !
Интересует как подобное реализовать на Next JS. Я так понимаю данный метод не подойдет ибо рендеринг будет только на стороне клиента. А решений без перехода на другую страницу я так и не нашел.
спасибо.
top
Классная инфа!
Почему выбрал реакт, а не вью? Недавно на вью начал проект, переходиться легко и назад не сильно хочется 😄
С реакта начинал, а так я и с вью тоже работаю) Одно и тоже по сути, в разной оболочке)
@@UlbiTV в принципе да, на вью за день два основы понял) Просто вижу что уроки только по реакту, думаю может больше нравится)
@@TheProfessionalGambler вью проще? что в нем нрав, и почему решил перейти?)
@@TheProfessionalGambler реакт роднее как то 😁
@@bigenough2122 мне показался проще, на я уже знал реакт. Может с 0 тоже казался сложным) Появилась работа на вью вот и изучил. Вью как более молодой взял лучшее от реакта и ангуляра. Например v-model, отделение 'модели' и разметки, автобиндинг this. Один из главных плюсов, это что вью фреймворк и централизовагный стейт с роутом очень легко встраивается + все это можно посмотреть в одном расширении хрома. Можно сказать, что реакт + мобх похож на вью.
Спасибо за видео. Тимур а сможете показать как реализовать SideBar с навигацией, с выпадающими списками, с активным роутом и т.д. , например как у ютуб)
Сразу оговорюсь, что я новичок, а потому сомневаюсь в своем ответе, да и не уверен, о том ли спрашивали, но в курсе про клауд диск на канале есть очень понятные объяснения как делать навигацию с роутами(при помощи react-router-dom), кстати, он же позволяет упростить создание и работу с попап(если нужен выпадающий поверх сайдбар), но если нужен сдвиг контента, то я бы описал 2 класса в CSS и использовал state, как триггер(в том же курсе, видео про loader очень понятно объясняет)... Но дождемся ответа спецов:))))
И вам спасибо за комментарий, Максим) есть видео про бургер меню, там та же навигация по сути) Но вообще что то связанное с грамотной навигацией я сниму наверное чуть позже)
@@ipa_stor да ты все правильно сказал)) спасибо!)
@@UlbiTV все видео с канала:))) помогают
@@ipa_stor Очень приятно это слышать, постараюсь сделать еще как можно больше полезных видео) Скоро будет полный курс по MobX
добрый вечер, подскажите, а почему у меня переменные photos и totalCount внутри функции scrollHandler равны пустому массиву и нулю?! уже 3 раза пересмотрел
Добрый вечер, трудно сказать так, надо видеть код, можете написать мне в контакте)
useEffect для слушателя скролла должен так же срабатывать при fetching == true
useEffect(() => {
document.addEventListener('scroll', scrollHandler)
return function () {
document.removeEventListener('scroll', scrollHandler)
}
}, [fetching])
Иначе стейты для хэндлеров менятся не будут.
Потому, что скролХендлер замыкается с теми данными, что попали при инициализации и они там остаются навечно навсегда 😅
Как всегда отлично преподнес информацию, спасибо, полезная штука. И тут появился вопрос - я сейчас балуюсь со switch кейсом, а именно собрал несколько вариантов для показа страницы (в зависимости от значения view меняется контент, идея в том, чтобы обернуть контент в приятную анимацию и фактически убрать переходы по страницам) и соответственно вопрос, разумно ли было бы использовать динамическую пагинацию и хранить данные на том же mongodb, а погружать при смене значения view? Это исключительно теоретический вопрос, поскольку, понятное дело запросы и ответы будут требовать времени и могут ловить лишние ошибки. Просто интересно, где еще, кроме погрузки фактического контента можно использовать этот инструмент... Мне пришло в голову только возможность догружать темы, скажем, если взять тот же проект с mern-cloud-disc, то добавлять персональные темы, а настройки хранить под ключом юзера. Сорри за большой текст:)
Значение view храню в state*
Большой текст это всегда круто, значит человеку действительно интересно) пиши столько, сколько считаешь нужным, всегда постараюсь ответить) Ну вообще, конкретно вот такая пагинация нужна только лишь для подгрузки поэтапной каких то данных, другой кейс даже придумать не могу)
Допустим я подгрузил несколько пользователей 20 штук , хочу удалить первых 2 , они удалятся из базы данных но не в реальном времени удалятся только после перезагрузки страницы , я не могу понять как это можно сделать
А что делать, если у меня в запросе на сервер помимо currentPage есть и другие запросы, например sort , который тоже меняется? И + запрос хранится в reducer(redux-thunk)
Привет. Делал также как в твоём видео, при скролле у меня почему-то загружает 3-5 страниц и после останавливается, хотя через раз работает нормально и может прогрузить все страницы. Поигрался с зависимостями в useEffect в котором добавляется обработчик скролла, добавлял туда totalCount и fetching по отдельности и вместе, но не помогло. Не знаешь в чём может быть дело? Заранее спасибо за крутые обучающие ролики!
Интересная тема. Только в моем случае это будет не высота всей страницы, а отдельного блока. Ну, концепцию нужно будет поменять немного, а так всё тоже самое.
А если вот наперед забегать, что используется в реальности для пагинации при скролле в реальных проектах?
Привет! Крутые видео, спасибо. Ты будто чувствуешь что нужно)
Хотел узнать, работал ли со styled-component?
Привет, спасибо большое) со styled component не работал, не приходилось)
@@UlbiTV понял. Было бы интересно узнать твоё мнение, как будет свободное время)
Несколько раз на пед проектах пытаюсь подключить, но что-то не заходит, хотя идея интересная. Стили прям в компоненте. Но появляется проблема, когда много стилей, компонента превращается в портянку, этого конечно можно избежать создавая отдельные js файлы со стилями, но тогда смысл теряется.
Лол, сам ответил на свою просьбу
@@bigenough2122 ахах, ну да, сам и ответил, компоненты максимально уменьшать надо, выносить из них логику/состояние и уж тем более стили, особенно если проект большой, иначе это трудно поддерживать) Но в небольших можно хоть инлайн стили писать, тут уже дело удобства
@@UlbiTV а кст, контейнерные компоненты в приложении считается хорошим тоном?
Как всегда спасибо) единственное хотел задать вопрос: что нужно делать чтоб typescript не ругался на unexpected arrow functions ( функция onLoad по дефолту в твоем видео) ?
есть ссылка на гит данного урока ?
Отлично. А как насчет скрытия / удаления уже просмтренной информации?
Спасибо, а зачем?
@@UlbiTV Например для оптимизации
Дай бог тебе здоровьечка на все органы!
Чувак, спасибо конечно за видео, но где код? Или ты предлагаешь пользователям стать стеногрфистками и записывать на слух?
Еще вопрос, на сколько правильно в реакт приложении использовать document?
its cool
В коде присутствует ошибка, чтобы получить общее количество элементов надо писать:
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)) А вот почему??
возникает резонный вопрос, почему в реакте мы не используем родное onScroll? зачем обращаться к глобальной переменной, да еще и навешивать события?
Привет, все круто, все обалденно, но пожалуйста кидай код, бывает не когда переписывать.
Если же у вас не срабатывает document.addEventListener('scroll', handleScroll) то добавьте третим аргументом true и всё сработает document.addEventListener('scroll', handleScroll, true)
функция scrollHandler - не работает как задумывалось. В ней значение page на момент создания и следовательно при прокрутке контента не меняется .
Еба, обычно я вас всех на скорости х2.5 смотрю и мне медленно, но без звука кажется всё таким быстрым.
А по поводу видео, спасибо за видео.
А у меня скролл плашка остается на месте, т.е отрисовываются новые табы, и прокрутка как была < 100 так и остается. В чем может быть проблема?
Спасибо всё классно изложено, но у меня не useState, ни import не работают....
У тебя в конце не правильно, 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.
Так хлопцы идея конечно хорошая но есть нюансы, этот код не совсем рабочий, длинна загруженных постов не будет изеняться в коллбеке потому что она будет браться из замыкания, соответственно проверка на загрузку всех постов не сработает никогда. Если добавить массив загруженных постов в массив зависимостей ЮЗЕффекта то начинаются баги в виде сбоя порядка и очередности загрузки страниц. Я думаю что намного проще и целесообразнее делать динамическую пагинацию с использованием IntersectionObserver API.
P.S. Если я не прав то поправьте пожалуйста
В его фундаментальном курсе по реакт он как раз использует IntersectionObserver
Хорошо, но вместо скролла лучше использовать developer.mozilla.org/ru/docs/Web/API/Intersection_Observer_API
Не знал об этом, действительно, то что нужно, спасибо за инфу)
Есть еще такая штука как -- IntersectionObserver Насколько целесообразно использовать её?
Лучше использовать её, автор на момент создания ролика не знал о ней
Я так думаю, что допустим ты долистал до 10 страницы, зачем у пользователя показывать предыдущие, если их можно убрать. А если назад отскроллился, то запрос за ними сделать. Как я понимаю, это все в оперативке находится, и ее может так не хватить
Для этого есть виртуальные списки
А куда пропала обычная пагинация?
Не совсем понял вопрос?
+
Сейчас такое лучше реализовывать через обзервэбл апи
Есть проблема при такой же пагинации при скролле вверх)
как избавится от скачущего экрана.. перерисовывает копоненту... вместо скролла использовал обсервер
Почему так быстро все? приходится замедлять в 2 раза!
Видос топчик, продолжай снимать! Если решить попасть в тренды ютуба, юзай Вибум, а с промокодом ST1234581 будет неплохая скидка
Спасибо)