Пишем библиотеку для виртуального скролла с нуля | React | часть 2

Поделиться
HTML-код
  • Опубликовано: 13 янв 2025

Комментарии • 38

  • @АнатолийГорбов-о1ь

    Очень нравится контент на канале, особенно про разные практические реализации, спасибо!

  • @Максим-д1у4щ
    @Максим-д1у4щ Год назад +4

    Большое спасибо за видео! Ждем дальше!

  • @НикитаШевченко-ы8я

    Как всегда полезный видос, спасибо большое!

  • @Victor-il9gm
    @Victor-il9gm Год назад +1

    Огонь контент! спасибо большое!!

  • @SamSiMmP
    @SamSiMmP 7 месяцев назад +1

    Спасибо большое

  • @LRXAORLOV
    @LRXAORLOV Год назад +3

    А как сделать поиск по такому листу ? Чтобы была подсветка текста и скрол к следующему подходящему результату ?

  • @bapydev
    @bapydev Год назад

    сииильнныыый разбор, спасибо!))

  • @sergeyfrantsev4449
    @sergeyfrantsev4449 Год назад

    Вдохновляеш мЭЭЭЭЭН)!
    Спасибо за видосы!

  • @yuridukhanin19
    @yuridukhanin19 Год назад +1

    Привет. Тема не банальная, это радует.
    Можешь ещё ролик снять с бесконечной лентой по подгрузки динамически элементов со стороны api

    • @RdmHeroe
      @RdmHeroe Год назад

      инфинити скролл - не банально?)

    • @ayub_begimkulov
      @ayub_begimkulov  Год назад

      Привет! Обычно добавляют обработчик onRenderEnd, который вызывается, когда человек дошел до низа текущего списка. И там уже догружают элементы. В готовых решениях все это обычно есть. Или ты хотел, чтобы мы в кастомное добавили?

    • @yuridukhanin19
      @yuridukhanin19 Год назад

      @@ayub_begimkulov а почему не через IntersectionObserver?

    • @rustamakhmetyanov4404
      @rustamakhmetyanov4404 Год назад

      ​@@ayub_begimkulovтож интересует такая тема, надо ещё при этом учитывать примененные к списку фильтры, и то что например когда юзер открывает карточку товара из списка и возвращается назад как именно ему показать список, как все это сохранять и следить за всем))

  • @artyomtaranenko2267
    @artyomtaranenko2267 Год назад +1

    Интересная тема, хоть я так ни разу не сталкивался и, скорее всего, выбрал бы либу

    • @baileysli6235
      @baileysli6235 Год назад +1

      Я один раз сталкивался и набросал своё решение, просто потому что я не знал про виртуальный скроллинг, но при этом логически до него догадался. Плюс мне не подходили стандартные практики, потому что нужен был поиск по странице (CTRL F), поэтому те строки таблицы, что пользователь не видел состояли из одной ячейки, а те что видел были полноценной вьюшкой

    • @ayub_begimkulov
      @ayub_begimkulov  Год назад

      Ну да, это видео больше для понимания того, что там под капотом творится.

  • @v.demchenko
    @v.demchenko Год назад +1

    топ

  • @ОтабекБег
    @ОтабекБег Год назад +1

    Удачи

  • @Joi-w2t
    @Joi-w2t Год назад +1

    скажите пожалуйста, к какому уровню относится данная практика? Теория то ладно, но например тот же Джун должен уметь написать это сам с нуля сам?

    • @ayub_begimkulov
      @ayub_begimkulov  Год назад +2

      Нет, Джун не должен уметь. Уровень тут точно начиная от сильного мидла)

  • @IT-therapy
    @IT-therapy Год назад +1

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

    • @ayub_begimkulov
      @ayub_begimkulov  Год назад

      Привет! А почему в сторону готовых решений не посмотрел? @tanstack/virtual могу рекомендовать.
      А так в 3-й части я это фиксил.

    • @IT-therapy
      @IT-therapy Год назад

      @@ayub_begimkulov пришел в итоге к этому решению )

  • @sololive352
    @sololive352 Год назад +2

    у тебя пропадает весь список, если проскролить до конца

    • @ayub_begimkulov
      @ayub_begimkulov  Год назад

      Да, поправил в 4-й части. Там чут-чуть логика с индексами поменяться должна. Можно вот тут посмотреть: github.com/Ayub-Begimkulov/youtube-tutorials/blob/master/virtualization-from-scratch/src/examples/Grid.tsx#L251-L288

  • @GrowProgHunter
    @GrowProgHunter Год назад +1

    Топ

  • @njkzbby6174
    @njkzbby6174 Год назад +1

    Жду комментарий Максима тут

  • @ummyusuf8206
    @ummyusuf8206 Год назад +1

    🎉🎉🎉🎉🎉

  • @HEX_CAT
    @HEX_CAT Год назад +1

    ❤🎉😊

  • @fedordostoevskiy4209
    @fedordostoevskiy4209 Год назад +1

    👏👏👏

  • @МарияЧерешня-у2й
    @МарияЧерешня-у2й Год назад +1

    🎉🎉🎉🎉🎉