KZhead

Открываем все секреты React Context API

АйТи Синяк
2024 ж. 20 Мам.
21 312 Рет қаралды
Жүктеу

Если вы пропустили видео на канале о Context API, доклад на конференции HolyJS 2022 (Санкт-Петербург) будет отличной заменой. В рамках доклада учтены комментарии от подписчиков и даже один Pull Request, в котором с вами поделились реальным фидбеком о замене Redux на Context API.
Ссылка на презентацию: squidex.jugru.team/api/assets...
Ссылка на репозиторий: github.com/Sin9k/useContextPl...
Поддержать Айти Синяка можно здесь:
KZhead: / @it-sin9k
boosty: boosty.to/sin9k
Patreon: / itsin9k
00:00 Подводка
06:39 Вступление в доклад
09:34 Глава 1. Исходники
18:53 Глава 2. Redux vs Context API
22:31 Демо
29:41 Реальный фидбек
35:14 Глава 3. Эффективный контекст
42:30 Итоги доклада
44:30 Вопросы и ответы
Подписаться на канал: / @it-sin9k
Twitter: / it_sin9k
________________
Канал о Фронтенде, который хочется порекомендовать (telegram):
t.me/frontendnoteschannel
-------------------------
Данный канал создан для инициирования бесед на различные темы IT сферы (социальные / технические), а также для тех кому короткая видео выжимка статьи, выступления на конференции или же просто личных мыслей, являются более удобным форматом

Пікірлер

  • Очень интересный доклад, зразу же лайк!И личная просьба выпускай больше видео о React, уж очень качественно

    @Napolion4ik@Napolion4ik Жыл бұрын

    • Спасибо!

      @it-sin9k@it-sin9k Жыл бұрын

  • Спасибо за доклад, очень интересно! Keep doing what you doing!

    @Nuts_Cracker@Nuts_Cracker Жыл бұрын

  • Крутой доклад ! Спасибо !

    @alexandrdermenji2428@alexandrdermenji2428 Жыл бұрын

  • Субъективное непопулярное мнение: сам факт наличия лекций, которые сравнивают Context API (который не предназначен для управления реактивным состоянием) cо state manager'ами только путает людей еще больше. Context API и библиотеки управления состоянием решают две совершенно разные задачи. Context API решает задачу представления доступа к "X", игнорируя глубину вложенности элемента(aka внедрение зависимостей, поскольку мы вместо того, чтобы прокидывать этот "аргумент" явно, берем его из некоего контейнера, который спрятан внутри React). Библиотеки управления состоянием же помогают хранить состояние и реагировать на его изменение. Перекладывая на термины Angular(может кому-то будет понятнее): Context'ы - это InjectionToken'ы, которые помогают внедрять сервисы в конструкторы. Поэтому у Context API и нет конфликта с Redux'ом, react-redux пользуется механизмом внедрения зависимостей react'а, чтобы получить доступ к хранилищу из любой точки приложения, а как ты далее будешь реагировать на изменения этого хранилища - это совершенно другой вопрос. Поэтому ответ на вопрос "Почему из коробки нет `useSelector`'а?" должен быть следующим: Context API не решает задачу хранения реактивных данных, и, соответственно, не решает задачу оптимизации ре-рендеров компонентов тоже. В общем и целом правило "Если ты складываешь результат работы `useState` (или его производные с помощью `useMemo`) как `value` в контекст, то, скорее всего, ты что-то делаешь не так" работает великолепно. Храните реактивное состояние в state manager'ах, а Context API используйте для внедрения зависимостей и будет вам счастье.

    @temoncher@temoncher Жыл бұрын

  • Отличный доклад!

    @kostyakozlov5289@kostyakozlov5289 Жыл бұрын

  • Спасибо большое, очень помогает освежить знания)

    @TheTexPro@TheTexPro Жыл бұрын

  • доклад отличный, спасибо!

    @dmitrykorovin4356@dmitrykorovin4356 Жыл бұрын

  • Крутой доклад!

    @user-yk3if2ku4e@user-yk3if2ku4e Жыл бұрын

  • Как всегда Отлично) ждем примеров про мобыху🙆

    @xD-hu3gw@xD-hu3gw Жыл бұрын

  • Спасибо за доклад

    @wev_dev_pro@wev_dev_pro Жыл бұрын

  • Благодарю за доклад, удивил)

    @serhiisynianskyi8348@serhiisynianskyi8348 Жыл бұрын

    • Надеюсь в хорошем плане удивил)

      @it-sin9k@it-sin9k Жыл бұрын

  • Спасибо за интересный доклад! Проблему с rerender многие библиотеки решают при помощи Proxy. Не могли бы вы в одном из следующих видео затронуть архитектуру построения и общения mobx store через контекст, так как у них ссылка одинаковая проблем не будет, но раз у вас есть подобный опыт было очень интересно его послушать.

    @sergei_sergeevu4@sergei_sergeevu4 Жыл бұрын

  • Спасибо большое! Очень интересно слушать, а самое главное все понятно!

    @user-vr6zs6lv9j@user-vr6zs6lv9j Жыл бұрын

    • Спасибо! Я очень старался)

      @it-sin9k@it-sin9k Жыл бұрын

  • ВОУ!!!!! Вот на такие доклады - ходил и ходил бы!!! Лайк, Спасибо !

    @vlads4332@vlads4332 Жыл бұрын

    • Спасибо!

      @it-sin9k@it-sin9k Жыл бұрын

  • Очень круто! Классно! Теперь я знаю больше! Спасибо!) Попутного тебе ветра, добрый человек) и организаторам спасибо)

    @vsevolodzorin5725@vsevolodzorin5725 Жыл бұрын

    • Спасибо!

      @it-sin9k@it-sin9k Жыл бұрын

  • Держался молодцом!

    @kostyakozlov5289@kostyakozlov5289 Жыл бұрын

    • Спасибо!) во второй половине уже чувствовал себя по свободней))

      @it-sin9k@it-sin9k Жыл бұрын

  • Респект парням, АЙ Синяк разрывной персонаж, очень крутой! Таких больше нет!!! настолько доходчиво объясняет.

    @theoty-js-react@theoty-js-react Жыл бұрын

    • Спасибо!

      @it-sin9k@it-sin9k Жыл бұрын

  • Вот это подгон, дружище!

    @MrCortc@MrCortc Жыл бұрын

  • Кайф!

    @user-zu1hr3nb9e@user-zu1hr3nb9e Жыл бұрын

  • лайк твоему братану)

    @Chat-Mayevskogo@Chat-Mayevskogo Жыл бұрын

  • Писали писали без redux с контекстом и в итоге получился Redux..

    @RaLLy869@RaLLy869 Жыл бұрын

  • Доклад действительно интересный👍👍👍

    @reactnext13@reactnext13 Жыл бұрын

    • Спасибо!

      @it-sin9k@it-sin9k Жыл бұрын

  • класс!

    @orucqarayev4759@orucqarayev4759 Жыл бұрын

  • Столкнулся также с неким неудобством в typescript, когда надо типизировать контекст при его создании (при установке дефолтного значения). С самими сущностями можно определиться, а вот сеттеры к ним, которые используют сеттеры useState в компоненте провайдера, можно определить только после вызова useState в этом компоненте. И приходится эти сеттеры делать опциональными при описании типа контеста. И потом, при вызове в дереве компонентов либо делать проверку на undefined, либо использовать "!". В принципе, наверное, создание контекста можно затащить в компонент провайдера и заюзать для этого ref, но тогда его нельзя экспортировать, и надо объявлять наверху переменную для него неинициализированную, в общем, выглядит это не очень.

    @CJIu3eHb@CJIu3eHb Жыл бұрын

  • В случае с toolkit-ом не вижу смысла useReducer-а. Создаём ещё один slice и все.

    @vazgenaleksanyan2929@vazgenaleksanyan2929 Жыл бұрын

  • не нужно решать проблемы context API никакими пакетами. Просто не используете его не по назначению. Context отлично подходит для передачи не изменяемых(или редко изменяемых) даных. Для всего остального он не подходит А кейс когда мы импортировали переменную userActions вместо засыввания их в контекст мы вообще скрестили ежа с ужом. Попробуйте теперь заиметь два провайдера такого "контекста" в дереве и вас ждут интересные открытия. Так же распространное заблудение "redux прокидывается данные через контектс". Это не правда. Редакс(а точнее react-redux) не прокидывает данные через контектс. Он прокидывает стор, не данные. Это принципиальная разница. Стор у нас не изменяемый на протежении всей сессии работы с приложением, в то время как данные - изменыемы. А почему противопставили единый источник истины и мультисторовые решения вообще не понятно. Они никак друг другу не противоречат

    @user-yw9wx4lv2w@user-yw9wx4lv2w Жыл бұрын

    • А если данные часто изменямые (инпут к примеру), то как хранить эти данные глобально если нужен к нему доступ из нескольких других компонентов?

      @rgaliev04@rgaliev045 ай бұрын

  • гуд

    @vladserhiychuk8925@vladserhiychuk8925 Жыл бұрын

  • Спасибо за доклад, освежил память по context. Ты сказал, что в последнее время не использовал context, а что насчет steppers ( форма с шагами или подобные карусели ), когда нету целесообразности выносить это в store ( нет разницы, mobx или redux ), но в тоже время нужно шарить данные между шагами? Что ты используешь в той структуре?

    @Spirtikyss@Spirtikyss Жыл бұрын

    • по разному бывает, что то в роутере храню (там етсь state), что то в sessionStorage. Все по ситуации

      @it-sin9k@it-sin9k Жыл бұрын

  • Сначала стоит лайкнуть, потом посмотреть. А то некст ролика ждать дольше придется

    @windus08@windus08 Жыл бұрын

  • 38:38 - правильно ли я понял что здесь точнее будет не undefined а defaultValue которое мы указали в createContext()?

    @ivanvaneck@ivanvaneck9 ай бұрын

    • Отредактировал сообщение) пересмотрел ролик) По идее там будет undefined. Ведь эта часть дерева вообще не покрыта контекстом, поэтому ничего не вернет

      @it-sin9k@it-sin9k9 ай бұрын

    • @@it-sin9k Блин, походу мое сообщение с линком на кодсендбокс удалилось, хотел показать тебе как это работает в коде :( Раз уж тут как-то странно со ссылками, загугли пожалуйста Specifying a fallback default value in React Context, цитата: > If React can’t find any providers of that particular context in the parent tree, the context value returned by useContext() will be equal to the default value that you specified when you created that context Изначальное сообщение не видел так что все норм)

      @ivanvaneck@ivanvaneck9 ай бұрын

  • Я использую контекст в кастомных филдах для форм.

    @user-tj8yn5tl2h@user-tj8yn5tl2h Жыл бұрын

  • Я часто разбираю х... имходники реакта. Так точно мою работу ещё н кто не описывал 😂

    @vitaliktrebko6436@vitaliktrebko64369 ай бұрын

  • Спасибо! А можно ссылку на репозиторий? В описании не нашёл.

    @maksimmnatsakanov2853@maksimmnatsakanov2853 Жыл бұрын

    • Неужели я забыл добавить)) github.com/Sin9k/useContextPlusUseReducer

      @it-sin9k@it-sin9k Жыл бұрын

  • кратко заменит ли контекст Редакс - НЕТ, где использовать контекст - NPM пакеты без обид но возможно профи уловили тонкости мне лично немного пользы

    @woodDacha@woodDacha Жыл бұрын

  • Полезное видео для того, чтобы понять, как отказ от контроллеров, ViewModel и DomainEntity в конечном итоге приводит ко множеству проблем и костылей, когда пытаешься управлять состоянием и рендерингом. По сути использование нескольких контекст-провайдеров или сторов - это использование слабовыраженных сущностей предметной области, которые и должны хранить и состояние, и функционал, и быть цельными и изолированными от окружающего мира. Вместо этого мы наблюдаем расчленёнку, где в сторах оказывается состояние DomainEntity, а функционал DomainEntity где-то разбросан по ui-компонентам или экшенам, делая код запутанным и перегружая ui-слой, куда начинает протекать бизнес-логика. Если и делать кастомное управление состоянием, то не на основе контекста, а на базе mobX. MobX - не идеален, но задаёт правильный вектор.

    @kai.hexendorf@kai.hexendorf10 ай бұрын

    • согласен) для разбиения данных на разные сущности, я бы тоже либу юзал, а не context)

      @it-sin9k@it-sin9k9 ай бұрын

  • Приблизительно 3 года без Redux и уже третий проект на Context + GraphQL.

    @alexeysvetlenko2217@alexeysvetlenko2217 Жыл бұрын

    • Сильно!

      @it-sin9k@it-sin9k Жыл бұрын

    • На сколько большой проект ? Какие проблемы всплывали в ходе разработки ?

      @sergeys4732@sergeys4732 Жыл бұрын

    • @@sergeys4732 Вот здесь я задавал такие же вопросы. И в докладе использовал эту информацию: github.com/Sin9k/useContextPlusUseReducer/pull/1

      @it-sin9k@it-sin9k Жыл бұрын

    • @@it-sin9k данке))

      @sergeys4732@sergeys4732 Жыл бұрын

  • Меня интересует насколько удобно работать с файлами 3000+ строк, или разработчики React их конкатенируют перед тем как положить на github?

    @ilikecola378@ilikecola37811 ай бұрын

    • думаю, это они так пишут)

      @it-sin9k@it-sin9k11 ай бұрын

  • А можно ссылку на презентацию со всеми ссылками уже в ней? )

    @rinatvaliullov3247@rinatvaliullov3247 Жыл бұрын

    • Привет :) Добавил в описание, ссылку прямо из конференции скачать слайды. Если не работает, напиши пожалуйста, еще куда залью)

      @it-sin9k@it-sin9k Жыл бұрын

  • Всё классно, респект. Но тема эффективного использования не раскрыта, к сожалению. Сделал свой стейт менеджер, который прокидывается через контекст. Причем в нем можно менять состояние "напрямую", условно говоря. Геттеры, сеттеры кто-то юзает...?)) В общем, если интересно, могу скинуть реализацию. Кода очь мало, а использование максимально простое.

    @KissMyS@KissMyS Жыл бұрын

    • Спасибо :) Можешь поделиться здесь создав пул реквест github.com/Sin9k/useContextPlusUseReducer/pulls

      @it-sin9k@it-sin9k Жыл бұрын

    • @@it-sin9k +

      @KissMyS@KissMyS Жыл бұрын

  • Зачем вы это сделали? Это был секрет и всех это устраивало…

    @liganshow@liganshow Жыл бұрын

  • Такую элементарную вещь мусолить это нужно уметь

    @pluto2656@pluto2656 Жыл бұрын

    • Спасибо!

      @it-sin9k@it-sin9k Жыл бұрын

  • Я решил придумать костыль! И это весь реакт - такой! Костыль придумали, расхайпились. А потом полезли грабли и новые костыли, что подпереть костыли на костылях. Про редакс вообще молчу! Дичь несусветная. И приходится с этим ГЭ периодически работать.

    @olezhonnv3215@olezhonnv3215 Жыл бұрын

    • А если еще приправить все это тайпскриптом, и проект развивается пару лет. Ой, мама! Какой бардак там будет! И это все проекты на реакт такие. Без исключения.

      @olezhonnv3215@olezhonnv3215 Жыл бұрын

    • это пройдёт

      @andTutin@andTutin Жыл бұрын

    • Есть варианты?

      @jorjodell@jorjodell Жыл бұрын

  • Чето синяк совсем не синяк) Где мешкари под глазами, где треники с растянутыми коленками) Я один что ли пью когда кодю 😢

    @Mr.Bellamy@Mr.Bellamy11 ай бұрын

    • Так перед выступлением привел себя немного в порядок)) а то неудобно как то)

      @it-sin9k@it-sin9k11 ай бұрын

  • Контекст Провайдер это тупо scope компонента. Это обеспечивает изоляцию логики-состояния, никто вне скопа, не полезет своими грязными рученками в эти данные.

    @alexs7931@alexs7931 Жыл бұрын

  • Дизлайкнул. Не понравилось. Я начинающий и тут какое-то бурление показали. Не разделяю оптимизма докладчка. Хрень.

    @serhioramires3166@serhioramires31662 ай бұрын

    • Из всего комментария, понял только, что не понравилось)

      @it-sin9k@it-sin9k2 ай бұрын

    • @@it-sin9k ) а что дизлайкнул не поняли?

      @serhioramires3166@serhioramires31662 ай бұрын

    • к сожалению, нет. Если подробнее ответите, буду благодарен :)

      @it-sin9k@it-sin9k2 ай бұрын
KZhead