ТОП 7 Антипаттернов React. Ошибки, которые УГРОБЯТ твой проект

แชร์
ฝัง
  • เผยแพร่เมื่อ 13 ม.ค. 2025

ความคิดเห็น • 76

  • @jacktwinn
    @jacktwinn หลายเดือนก่อน +11

    я бы добавил еще сюда излишнюю переиспользуемость. Когда пишут компоненты которые используются условно в двух-трех местах, например это какой нить блок на сайте. Но часто приходят правки от бизнеса поправить в одном блоке что нибудь, и этот компонент начинает разрастаться конфигами, условиями и тд. Вместо того чтобы написать три разных блока, но использовать в них более мелкие компоненты типа ui-kit

    • @Kysok410
      @Kysok410 หลายเดือนก่อน

      о дарова Сань)

    • @Kysok410
      @Kysok410 หลายเดือนก่อน

      можно было бы еще рассказать про compound подход
      пример с таблицами был бы хороший

    • @jacktwinn
      @jacktwinn หลายเดือนก่อน

      @@Kysok410 салют))

    • @ggfff5572
      @ggfff5572 29 วันที่ผ่านมา

      @@Kysok410только хотел написать, что если есть одинаковые компоненты которые мало чем отличаются идеально подходит compound component и переиспользуемость становится практичнее и можно его использовать для разделения кода тоже. Возможно для людей, которые только на проект зашли запомнить сразу тяжело, но при поддержке проекта становится очень просто внести в какие то компоненты изменения

  • @olegdegterov1595
    @olegdegterov1595 29 วันที่ผ่านมา

    Спасибо за поднятие актуальных проблем, ждем курс по паттернам!

  • @АндрейЛейкин-ф6у
    @АндрейЛейкин-ф6у หลายเดือนก่อน +16

    Очень классное видео. Лично мне не хватило на каждый антипаттерн итог "как бы это выглядело при хорошем подходе"

    • @factorealrus
      @factorealrus หลายเดือนก่อน +2

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

    • @АлександрКоваль-д3щ
      @АлександрКоваль-д3щ หลายเดือนก่อน

      ​@@factorealrus он же вроде сказал в следующем ролике здесь скажет

    • @le6ka71
      @le6ka71 หลายเดือนก่อน

      @@factorealrus ну а почему б не сходить тогда? если курс будет тебе полезен

    • @factorealrus
      @factorealrus หลายเดือนก่อน

      @@le6ka71 это был сарказм. Не приемлю все эти курсы как явление.

    • @НаильШайхинуров-п7л
      @НаильШайхинуров-п7л หลายเดือนก่อน

      @@factorealrus И в школе тоже не учились?

  • @rhost-9968
    @rhost-9968 หลายเดือนก่อน +1

    Проблемы "state coupling" не понял, обычно же если ты хочешь чтобы компонент использовался только в рамках одного стора то ты "завязываешь" его на одном сторе, если нужно что-то общее как например Table, TableCell etc. то ты делаешь "глупые компонент" так как просто не можешь завязывать это на стор

  • @Тим-д9д
    @Тим-д9д หลายเดือนก่อน +1

    А нельзя ли будет приобрести курс отдельно про паттерны ? Если нет возможности оплатить вход в сообщество.

    • @paromovevg
      @paromovevg  หลายเดือนก่อน

      Стоимость курса отдельно, также как у сообщества, выгоднее не будет)
      Если возможности приобрести сообщество нет, могу предложить разделить оплату на 2 части. Для этого напиши в поддержку в телеграм @microcourses_support

  • @strogalev
    @strogalev หลายเดือนก่อน

    Спасибо, очень полезно.
    Какой плагин в vscode показывает зависимости переменной или компонента без использования Find?

    • @bring_you_up
      @bring_you_up 20 วันที่ผ่านมา

      ПКМ по переменной => Find all references
      либо
      Command + P => вводим #{{variableName}}

  • @baileysli6235
    @baileysli6235 หลายเดือนก่อน +11

    1. God Component. Сразу ДА. Как же раздражает. Просто без сепарации ответственности столько проблем на ровном месте создают
    450 строк это ещё по божески. Постоянно попадаются легаси у которых 1000 или 2000 строк. Это же просто невозможно поддерживать

    • @jacktwinn
      @jacktwinn หลายเดือนก่อน

      бл**$#* после того как разобрался в подобном легаси, нормальный код кажется уж банально простым))

    • @HiroNakamura1991
      @HiroNakamura1991 หลายเดือนก่อน

      но эт явно не на react js писаные !

    • @jacktwinn
      @jacktwinn หลายเดือนก่อน

      ​@HiroNakamura1991 встречаю такие и на react) при чем не легаси. Иногда импорты только строк на 50)
      Тут правда еще от преттиера зависит, можно и в одну строку всё отобразить)

    • @ginhop1057
      @ginhop1057 29 วันที่ผ่านมา

      такая жиза, на одном проекте было множество компонентов в среднем от 300 и до 1200 строк, тут даже слов не подобрать

    • @TheRainGameTM
      @TheRainGameTM 28 วันที่ผ่านมา

      @@jacktwinn аналогичная ситуация, причем даже это не классовые компоненты, а функциональные с РКТ

  • @stpk8900
    @stpk8900 25 วันที่ผ่านมา

    Очень много годной инфы и слушать приятно🔥🔥🔥

  • @gagate81
    @gagate81 หลายเดือนก่อน +1

    Хорошее видео, лайк. Про components folder непонятно только. Хуки (хелперы, константы) выносятся в папку так как они переиспользуются (или могут переиспользоваться) в разных компонентах. Разве нет?

    • @factorealrus
      @factorealrus หลายเดือนก่อน +2

      переиспользуемые (глобальные) сущности выносятся на глобальный уровень. здесь была речь о локальных сущностях, тесно связанных друг с другом и которые без друг друга не используются. вот их нужно хранить рядом. часто ВСЕ хуки выносят в папку hooks в корне проекта просто потому что эта папка уже есть и кажется что там нужно хранить все хуки. но это не так

  • @volodya_kod6
    @volodya_kod6 29 วันที่ผ่านมา

    Спасибо большое, очень интересно и полезно!

  • @АлександрКоваль-д3щ
    @АлександрКоваль-д3щ หลายเดือนก่อน +1

    Спасибо. А как во вью решаются данные проблемы ?

    • @paromovevg
      @paromovevg  หลายเดือนก่อน

      Ровно также, как и в реакт. Но, к сожалению, во вью распространена мутабельные структуры данных, поэтому там ещё все хуже

    • @xyozy8
      @xyozy8 หลายเดือนก่อน

      зато ререндеры оптимизировать не нужно и нести чушь по преждевременную оптимизацию)

  • @windus08
    @windus08 หลายเดือนก่อน

    1:02:03 Так, а где мы будем выполнять сайдэффекты, например ajax?)
    Вариант с танстаком юзает эффект

    • @vladd9107
      @vladd9107 หลายเดือนก่อน

      На сервере, но опять же, не все нужен ssr. Так что считаю этот антипаттерн притянутым за уши. А если люди пишут логику в useEffect как показано в видео, то возникают вопросы о их квалификации и даже джуны такое не напишут в здравом уме, особенно кто доку по react прочитает.
      P.s. все же есть еще вариант который не указал. react-router loader api

    • @paromovevg
      @paromovevg  หลายเดือนก่อน +1

      К сожалению пишут и не джуны, очень очень много пишут (как человек который видел много проектов и с многими людьми общался говорю)
      По поводу useEffect есть кейсы где он нужен, но как и написано в доке это не должно быть настолько часто

    • @hrustalevdev
      @hrustalevdev หลายเดือนก่อน

      Не не не. Сам часто сталкивался с тем, что в компоненте по 2-3 useEffect-a тупо для того, чтобы засетать стейт на основе другого стейта. Прям бесит. Видимо - самое простое, что приходит в голову неопытному или ленивому спецу.

  • @AndreyAndrey-nx6uj
    @AndreyAndrey-nx6uj หลายเดือนก่อน +1

    Благодарю. Евгений лучший учитель и ментор🎉

  • @denpol9956
    @denpol9956 27 วันที่ผ่านมา +1

    30:40
    Зачем хвастаться тем, что ты импользуешь другие методы оптимизации, не сказав про них практически ни слова? ))

  • @gamerecord_online
    @gamerecord_online 27 วันที่ผ่านมา

    React 19 не бурет разве работу useMemo на себя?

  • @_Classical
    @_Classical หลายเดือนก่อน

    Просто лучший, спасибо тебе

  • @Bondarev_Igor
    @Bondarev_Igor หลายเดือนก่อน

    Отличны ролик! Огромное спасибо! Очень полезная информация.

  • @headstrong1968
    @headstrong1968 28 วันที่ผ่านมา +2

    Говорить в начале видео, что все пишут хреново, потому что не знают КАК и не сказать за час КАК писать то

    • @romanbrandt7986
      @romanbrandt7986 25 วันที่ผ่านมา

      Сэкономил время, спасибо друг

  • @denpol9956
    @denpol9956 27 วันที่ผ่านมา

    39:30 Ну если нет навыка разделять бизнес-логику от UI - не поможет ни стм, ни пропрс-дриллинг 😅

  • @НиколайХамдамов
    @НиколайХамдамов หลายเดือนก่อน

    Классный видос, спасибо

  • @ГеннадийГорохов-ц8н
    @ГеннадийГорохов-ц8н 29 วันที่ผ่านมา

    Отлично!!!

  • @nilsen1879
    @nilsen1879 หลายเดือนก่อน

    Пункт №4 - это моя боль. Мозгов не хватает, как бы это решить. Посмотрел паттерн медиатор, и я тоже в этом направлении смотрел, но как от этого профит получить, не понял. Как по мне, лучше уж локальные стейты с редюсером и контекстом иметь их можно переиспользовать. Но тогда будут перерендеры на каждый чих. Ну хотя бы серверные данные c swr / react-query использовать уже неплохо.

    • @levsonc
      @levsonc หลายเดือนก่อน

      Да легко решается. Тот же принцип единой ответственности по сути. На глобальный стейт должен завязываться и управлять компонент на том максимальном уровне, который с ним работает. Например, компонент, управляющий страницей или крупным блоком на странице. А внутри него уже «глупые компоненты», которые просто принимают параметры и колбэки на определённые события. Это немного противоречит проблеме проп-дриллинга, но на самом деле не так страшен проп-дриллинг, как неверное его использование (неправильная декомпозиция). Контекст тоже не всегда подходит: он ререндерит все подписанные компоненты при изменении своего значения.
      Также не надо всё вподряд тащить в глобальный стейт. Например, раскрыт ли визуально тот или иной компонент или показана ли подсказка.
      транице.

    • @vladd9107
      @vladd9107 หลายเดือนก่อน

      @@nilsen1879 «медиатор» довольно распыленный паттерн, его можно увидеть во многих паттернах отчасти. Многие путают его с «наблюдателем», но он больше подходит к «шине событий».

  • @ru_irina
    @ru_irina 4 วันที่ผ่านมา

    Шестой попал в мою боль.

  • @kimanowka
    @kimanowka หลายเดือนก่อน

    а когда будет видео с тем, как ты показываешь, как правильно?

    • @paromovevg
      @paromovevg  หลายเดือนก่อน +1

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

  • @nikr4740
    @nikr4740 หลายเดือนก่อน

    Ну получается, 5 правил SOLID свели получается, к одному, что получается, мучились раньше 🤔

  • @sammylain
    @sammylain 26 วันที่ผ่านมา

    Смысл хороший, но было бы здорово, если бы это всё было ужато максимум в 20 минут

  • @AleksandrMaltsev-jm8ph
    @AleksandrMaltsev-jm8ph หลายเดือนก่อน +5

    Первая ошибка реакт разработчика - писать на реакт

    • @kitsunaana9783
      @kitsunaana9783 26 วันที่ผ่านมา

      конструктивно

  • @baileysli6235
    @baileysli6235 หลายเดือนก่อน

    3. Даааааа, какая же жиза

  • @gamerecord_online
    @gamerecord_online 27 วันที่ผ่านมา

    Что за AI писал проекты?

  • @alexandernikolaev7208
    @alexandernikolaev7208 หลายเดือนก่อน

    Топ

  • @chuchumba4211
    @chuchumba4211 หลายเดือนก่อน

    Евгений Паромов | Front-end, наверное тебе нужно изменить react на svelte, vue, solid.

  • @voldmir1
    @voldmir1 หลายเดือนก่อน +2

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

    • @paromovevg
      @paromovevg  หลายเดือนก่อน +2

      Буквально пару видосов назад этим заболел(
      Сейчас активно исправляю...

  • @IIapazut
    @IIapazut หลายเดือนก่อน

    а никто не заметил миллион "вот это вот все"? после 40 минут видео прям дико бросается в глаза. но сам видос полезный, спасибо