Здравствуйте. Поясните пожалуйста (на счетчике видео 6:54) - Если мы в 32й строке value присваиваем стрингу. То почему мы в строке 21 используем title а не value... и почему. Спасибо
Я бразилец и не могу писать на португальском, но ваше видео мне помогло !!! Спасибо !!! Sou brasileiro e nao consegui conteudo em portugues, mas seu video conseguiu me ajudar !!! Obrigado !!!
Все круто, понятно и методично. По моему скромному субъективному мнению улучшить ролики можно убрав из них слова о представлении автора, имя и фамилию можно просто выводить с низу аккуратной плашкой(как это делают кореспонденты новостей) пока автор рассказывает о теме видео, имхо.
спасибо, Евгений. изучаю реакт и хочу написать приложение где хорошо бы было разделить ui и логику, а в редакс пока вникать не хочу. так что вы довольно хорошо помогли понять как это сделать
Подскажите пожалуйста, если мы присваиваем результат вызова функции createContext в переменную TitleContext и далее используем в компонентах TitleContext.Provider и TitleContext.Consumer, то как быть с модульностью? Как получить доступ к переменной TitleContext, если вложенные компоненты расположены в разных файлах? Нужно создать эту переменную в отдельном файле, а потом импортировать её в нужные файлы?
Создание контекста можно вынести в отдельный файл. После чего импортировать его, как обычный модуль в требуемые компоненты. Похожий пример есть в обои подкастах по Реакт, на канале)
А если, например, на втором уровне тоже пробрасывается контекст, он не перезапишется? Как его использовать правильно? Тоже врапнуть в ещё один контекст консумер?
Для этого есть или стейт, или контекст. Эти данные вы пробрасываете в ребёнка в виде пропсов, или контекста. Там их меняете, родитель видит изменения в объекте за которым он наблюдает и обновляется.
А как возможно предавать методы компонента-родителя дальше по дереву через контекст? У меня получилось предать метод, добавив вот такое поле в объект контекста 'clickHandler: () => this.handleClick.call()'. Хотелось бы узнать, есть ли альтернативная запись для этого
Функция внутри TitleContext.Consumer выступает как компонент внутри, без имени, или как? Потому как здесь нету вызова этой анонимной функции... Или я чего-то недопонял?
Я вообще не понял прикола существования createContext. С таким же успехом можно создать файл storeContext создать там обычный объект, импортировать его в index положить в него нужные данные, импортировать в нужный компонент и получить эти данные. Работает в точности так же. При всём при этом оборачивать ничего не нужно ни в какие Provider и Consumer. А создать в отдельном файле чтоб не было подключений import export в обе стороны. А ещё использовав Consumer мы не имеем доступа к значениям выше методы render в классах, приходиться использовать специальное свойство класса static contextType = Context. после можем обращаться к объекту context. Но как я и сказал обычный объект это спокойно решает.
что означает синтаксис {title => {title}}? а как можно сделать через контекст если надо от родителя к ребенку просто передать булевое значение что типа ребенок используется в этом родителе или нет?
Это синтаксис стрелочной функции: () => {}; Если передать от родителя к ребёнку, то контекст вам вообще не нужен, достаточно пропсов. Контекст используется, когда значениея нужно передавать через несколько уровней, минуя эти уровни.
Во первых, БОЛЬШОЕ ЧЕЛОВЕЧЕСКОЕ СПАСИБО за твои уроки, очень понятно и доходчиво... На них освоил js с нуля, затем react, mobx... пишу вот приложеньку на react-native... Есть вопросец: использую react.context (static contextType = ... ; const context = this.context...). Все замечательно работает, разобрался (с твоей помощью), но постоянно мозолит глаза (в WebStorm) - this.context перечеркнуто и подсвечивает "Deprecated symbol used...". Пакеты: react@16.8.3, @types/react@16.8.22... Уже весь гугл перешерстил - ничего не нашел. Жить конечно можно, но раздражает. Если есть идеи как победить буду спасибо)
Спасибо за отзыв. Видимо ругается на то, что вы используете устаревший синтаксис context. На канале есть плейлист react videocast там я рассказываю о новом синтаксисе контекста. Если проще, то теперь используется статическое свойство
@@YauhenKavalchuk Пересмотрел видеокаст... Я так и делаю: в своем классе добавляю [static contextType = myContext;] а в рендере [const _context = this.context;]. Работать работает, контекст передается и в нем лежит именно то что нужно, но в редакторе (WebStorm) подсвечивает что deprecated... Может я как то неправильно typescript настроил? Или чего то не понимаю...
Разве нельзя импорт сделать с передачей необходимых state или методов?, прослушка событий? Это все выглядит довольно грязно и это норма в React?, где красота)?
Контекст - это новое API, которое было добавлено. С версией 16.6 синтаксис немного упростился - нету лишних обёрток. А вообще импорт стейта и методов - это не по канонам React, скажем так). Но в целом API очень полезное, если вы работали с Реакт длительно время, то оно действительно помогает решить Props Drilling, а этого, раньше, и не хватало)
А что мешает создать банальный объект и в него положить данные? А там, где нужно, эти данные из объекта считать. По сути, в этом уроке показано сохранение данных в контекст через Провайдер, и извлечение данных через Консумер. Такой себе наворот поверх обычного объекта, который может то же самое. Но тут еще провайдер, консумер, функция для извлечения. Ну мудрят хлопцы - им реально нечем там заняться в Фейсбуке, или где там тот Реакт делают :-)
Скорее всего, есть юзекейсы, где нужен именно такой контекст, а простой объект не подойдет. Мне просто Реакт заходит через силу, потому что по работе надо разобраться. Постоянно ищу в нем недостатки.
В redux при изменении стор перерендривается только те компоненты которые подписаны на него, а контекста получается рендрится все начиная с корневого компонента.
![Самая простая нерешённая задача - гипотеза Коллатца [Veritasium]](http://i.ytimg.com/vi/QgzBDZwanWA/mqdefault.jpg)
Четкие уроки! Круто что рассказываете все лайфхаки, которые не объясняют другие)
Спасибо большое за отзыв!
Этот материал здорово помог понять, что есть контекст и как его в реакте юзать )
👍
Спасибо за урок. Все четко и понятно!
Всегда пожалуйста
наконец-то я нашёл норм видос по useContext, спасибо
Пожалуйста
Дай вам Бог здоровья добрый человек)
Спасибо
Этот канал - просто о сложном
👍
Блин! Это лучший урок по контексту. Кучу других пересмотрел и нихрена не понял. Здесь на пальцах!
Спасибо
спасибо! все круто объяснил)
Пожалуйста
Здравствуйте. Поясните пожалуйста (на счетчике видео 6:54) - Если мы в 32й строке value присваиваем стрингу. То почему мы в строке 21 используем title а не value... и почему. Спасибо
Потому что внутри consumer в функции, я переопределил имя с value на title)
@@YauhenKavalchuk а где про этот момент можно найти информацию. Может где то в доках?
отличное объяснение !
Спасибо
Я очень благодарен за этот видеоурок. 🤝 Он был настолько понятным и легким в усвоении. 🧩
Пожалуйста
Спасибо! Четко и лаконично! Straight to the point!!!! Respect!
Спасибо за отзыв!)
Отличное объяснение, спасибо.
Пожалуйста
Я бразилец и не могу писать на португальском, но ваше видео мне помогло !!! Спасибо !!!
Sou brasileiro e nao consegui conteudo em portugues, mas seu video conseguiu me ajudar !!! Obrigado !!!
It is nice to hear it. I hope you know English!) Thanks!
Спасибо!
Пожалуйста
Отличный пример 👍
Спасибо
Штука прикольная, но на практике юзается не очень часто. В частности из-за того, что все привыкли к редаксу
Инфа 100%)))
=)))
Редакс очень громозкий.
Спасибо! отлично
Пожалуйста!
Снова огонь, спасибо!
Пожалуйста!)
Серый Мокко)
Все круто, понятно и методично. По моему скромному субъективному мнению улучшить ролики можно убрав из них слова о представлении автора, имя и фамилию можно просто выводить с низу аккуратной плашкой(как это делают кореспонденты новостей) пока автор рассказывает о теме видео, имхо.
Спасибо большое за подробный отзыв!
спасибо, Евгений. изучаю реакт и хочу написать приложение где хорошо бы было разделить ui и логику, а в редакс пока вникать не хочу. так что вы довольно хорошо помогли понять как это сделать
Приятно слышать)
Супер!!! Молодец!
Спасибо большое!
Спасибо ,
Пожалуйста
Отлично объяснил. Минимум воды
Спасибо
Идеально подойдет для вхождения в тему Context, но потом лучше почитать официальную документацию в React тк многое опущено.
В уроках, к сожалению, всё не расскажешь...
Подскажите пожалуйста, если мы присваиваем результат вызова функции createContext в переменную TitleContext и далее используем в компонентах TitleContext.Provider и TitleContext.Consumer, то как быть с модульностью? Как получить доступ к переменной TitleContext, если вложенные компоненты расположены в разных файлах? Нужно создать эту переменную в отдельном файле, а потом импортировать её в нужные файлы?
Создание контекста можно вынести в отдельный файл. После чего импортировать его, как обычный модуль в требуемые компоненты. Похожий пример есть в обои подкастах по Реакт, на канале)
@@YauhenKavalchuk Спасибо! :)
Пожалуйста)
А если, например, на втором уровне тоже пробрасывается контекст, он не перезапишется? Как его использовать правильно? Тоже врапнуть в ещё один контекст консумер?
А зачем вам нужно 2 контекста? Почему не определить все нужные данные в одном? Подход, как в Redux - стор для хранения всего
Можно ли делать тоже самое только наоборот, снизу вверх по иерархии компонентов?
Нет, данные всегда идут сверху вниз, т.е. от родителя к ребёнку. Это однонаправленный поток данных, точно так же, как и в Redux.
@@YauhenKavalchuk Но как тогда можно что-то сделать в родителе если что-то меняется в ребенке
Для этого есть или стейт, или контекст. Эти данные вы пробрасываете в ребёнка в виде пропсов, или контекста. Там их меняете, родитель видит изменения в объекте за которым он наблюдает и обновляется.
А как возможно предавать методы компонента-родителя дальше по дереву через контекст? У меня получилось предать метод, добавив вот такое поле в объект контекста 'clickHandler: () => this.handleClick.call()'. Хотелось бы узнать, есть ли альтернативная запись для этого
Функция внутри TitleContext.Consumer выступает как компонент внутри, без имени, или как? Потому как здесь нету вызова этой анонимной функции... Или я чего-то недопонял?
На текущий момент синтаксис "контекста" чуть упростился. Можете посмотреть плейлист React podcast, там есть пример
@@YauhenKavalchuk окей, спасибо.
👍
👍
Спасибо за видео! А можно через этот метод передавать данные от детей к родителю?
Можно. Фактически, это нативная реализация Redux
@@YauhenKavalchuk Можно реализовать передачу на прямую или всеравно использовать коллбек?
Я вообще не понял прикола существования createContext. С таким же успехом можно создать файл storeContext создать там обычный объект, импортировать его в index положить в него нужные данные, импортировать в нужный компонент и получить эти данные. Работает в точности так же. При всём при этом оборачивать ничего не нужно ни в какие Provider и Consumer. А создать в отдельном файле чтоб не было подключений import export в обе стороны. А ещё использовав Consumer мы не имеем доступа к значениям выше методы render в классах, приходиться использовать специальное свойство класса static contextType = Context. после можем обращаться к объекту context. Но как я и сказал обычный объект это спокойно решает.
спасибо!
Пожалуйста!
Подскажите, я так понимаю контекст - это замена Redux на уровне самой библиотеки?
Ну в целом, да. По ключевой роли - очень похоже. Хотя думаю, для действительно больших приложений не применимо.
что означает синтаксис {title => {title}}?
а как можно сделать через контекст если надо от родителя к ребенку просто передать булевое значение что типа ребенок используется в этом родителе или нет?
Это синтаксис стрелочной функции: () => {};
Если передать от родителя к ребёнку, то контекст вам вообще не нужен, достаточно пропсов.
Контекст используется, когда значениея нужно передавать через несколько уровней, минуя эти уровни.
@@YauhenKavalchuk Спасибо, так в том то и дело что компонент содержит еще много уровней к ребенку, поэтому не хотелось бы использовать пропсы
Я понял, просто звучало по другому, но не суть. Попробуйте повторить пример как в виде, просто заменить значение со строчного на булевое.
Во первых, БОЛЬШОЕ ЧЕЛОВЕЧЕСКОЕ СПАСИБО за твои уроки, очень понятно и доходчиво... На них освоил js с нуля, затем react, mobx... пишу вот приложеньку на react-native... Есть вопросец: использую react.context (static contextType = ... ; const context = this.context...). Все замечательно работает, разобрался (с твоей помощью), но постоянно мозолит глаза (в WebStorm) - this.context перечеркнуто и подсвечивает "Deprecated symbol used...". Пакеты: react@16.8.3, @types/react@16.8.22... Уже весь гугл перешерстил - ничего не нашел. Жить конечно можно, но раздражает. Если есть идеи как победить буду спасибо)
Спасибо за отзыв. Видимо ругается на то, что вы используете устаревший синтаксис context. На канале есть плейлист react videocast там я рассказываю о новом синтаксисе контекста. Если проще, то теперь используется статическое свойство
@@YauhenKavalchuk Пересмотрел видеокаст... Я так и делаю: в своем классе добавляю [static contextType = myContext;] а в рендере [const _context = this.context;]. Работать работает, контекст передается и в нем лежит именно то что нужно, но в редакторе (WebStorm) подсвечивает что deprecated... Может я как то неправильно typescript настроил? Или чего то не понимаю...
Тогда, возможно, проблемы в настройках
Но что делать если компоненты находятся в разных файлах, родитель и ребенок, как тогда настраивать контекст?
Подключать библиотеку для контроля за состояние Redux, MobX. Или всё-равно находить родителя и оборачивать компонент
Разве нельзя импорт сделать с передачей необходимых state или методов?, прослушка событий?
Это все выглядит довольно грязно и это норма в React?, где красота)?
Контекст - это новое API, которое было добавлено. С версией 16.6 синтаксис немного упростился - нету лишних обёрток. А вообще импорт стейта и методов - это не по канонам React, скажем так).
Но в целом API очень полезное, если вы работали с Реакт длительно время, то оно действительно помогает решить Props Drilling, а этого, раньше, и не хватало)
ну это конечно прикольно. Я бы сказал в самом начале пути меня это прокидывание пропсов через компоненты сильно бесило. Отличная замена)
Благодаря этой идее, на некоторых проектах начинают отказываться от Redux
А что мешает создать банальный объект и в него положить данные?
А там, где нужно, эти данные из объекта считать.
По сути, в этом уроке показано сохранение данных в контекст через Провайдер, и извлечение данных через Консумер.
Такой себе наворот поверх обычного объекта, который может то же самое. Но тут еще провайдер, консумер, функция для извлечения.
Ну мудрят хлопцы - им реально нечем там заняться в Фейсбуке, или где там тот Реакт делают :-)
Скорее всего, есть юзекейсы, где нужен именно такой контекст, а простой объект не подойдет.
Мне просто Реакт заходит через силу, потому что по работе надо разобраться.
Постоянно ищу в нем недостатки.
Как классно работалось раньше - не было всего вот этого замеса из кучи технологий. На пхп и жквери любой сайт делался.
крик души
Уж как есть
useContext
👍
+
На react context api можно сделать свой redux. А этот сам redux выкинуть, нах он нужен, он ужасен
В целом это возможно, но я знаю осень много людей, которые бы поспорили с вами!
В redux при изменении стор перерендривается только те компоненты которые подписаны на него, а контекста получается рендрится все начиная с корневого компонента.
Спасибо!
Пожалуйста