React JS #15 Контекст (React Context)
HTML-код
- Опубликовано: 6 дек 2018
- #YauhenK #webDev #React #Redux #ReactRouter
Всех приветствую в курсе «React JS».
В данном видео-курсе мы с вами рассмотрим базовые понятия библиотеки React JS. Научимся создавать свои компоненты приложения. Разберёмся, как подключается и как работает React Router и с его помощью напишем простое одностраничное приложение. А так же рассмотрим такой подход контроля данных в приложении, как Redux.
Дополнительные темы, которые мы рассмотрим:
- Валидация пропсов с помощью библиотеки PropTypes
- Работа с реальным API
- Создание роутинга одностраничного приложения с помощью React Router
- Работа с менеджером состояний Redux
✒ Репозиторий курса:
✔ GitHub: github.com/YauhenKavalchuk/re...
✒ Полезные курсы на канале:
✔ ES6: • ES6
✒ Используемые ресурсы и инструменты:
✔ Atom (Редактор кода): atom.io/
✔ Create React App (рабочее окружение): github.com/facebook/create-re...
✔ React Developer Tools (расширение для браузера): chrome.google.com/webstore/de...
✔ Redux Devtools (расширение для браузера): chrome.google.com/webstore/de...
✔ Redux Devtools (репозиторий): github.com/zalmoxisus/redux-d...
✔ Fake online REST API (моковый API): jsonplaceholder.typicode.com/
✔ Hacker News (ресурс): hn.algolia.com/?query=&sort=b...
✔ Hacker News (описание API): hn.algolia.com/api
✔ Redux-LocalStorage-Simple (репозиторий): www.npmjs.com/package/redux-l...
✒ Полезные ссылки:
✔ React (документация): reactjs.org/docs/getting-star...
✔ Redux (документация): redux.js.org/
✔ React анимации (документация): reactcommunity.org/react-tran...
✔ Redux (документация): redux.js.org/
✔ React lifecycle methods +16.3 (ресурс со ссылками): projects.wojtekmaj.pl/react-li...
✔ React lifecycle methods less 16.3 (картинка): webjustify.com/wp-content/upl...
✔ React Transition Group (документация): reactcommunity.org/react-tran...
✔ React Router (репозиторий): github.com/ReactTraining/reac...
✒ Полный список готовых и планируемых курсов:
✔ Trello: trello.com/b/R6rD7qq8
✒ Автор курса:
✔ RUclips: / yauhenkavalchuk
✔ Instagram: / yauhenkavalchuk
✔ Twitter: / yauhenkavalchuk
✔ VK: YauhenKavalchuk
✔ LinkedIn: / yauhenkavalchuk
✔ GitHub: github.com/YauhenKavalchuk
✔ VK (Группа): webdevcom
✒ Поддержать развитие канала: github.com/YauhenKavalchuk/yo...
![NOSFERATU - Official Teaser Trailer [HD] - Only In Theaters December 25](http://i.ytimg.com/vi/b59rxDB_JRg/mqdefault.jpg)
Четкие уроки! Круто что рассказываете все лайфхаки, которые не объясняют другие)
Спасибо большое за отзыв!
Спасибо! Четко и лаконично! Straight to the point!!!! Respect!
Спасибо за отзыв!)
Отличное объяснение, спасибо.
Пожалуйста
Этот материал здорово помог понять, что есть контекст и как его в реакте юзать )
👍
Спасибо за урок. Все четко и понятно!
Всегда пожалуйста
спасибо! все круто объяснил)
Пожалуйста
Снова огонь, спасибо!
Пожалуйста!)
Серый Мокко)
Я очень благодарен за этот видеоурок. 🤝 Он был настолько понятным и легким в усвоении. 🧩
Пожалуйста
Супер!!! Молодец!
Спасибо большое!
Спасибо! отлично
Пожалуйста!
Дай вам Бог здоровья добрый человек)
Спасибо
Отличный пример 👍
Спасибо
отличное объяснение !
Спасибо
Спасибо!
Пожалуйста
спасибо, Евгений. изучаю реакт и хочу написать приложение где хорошо бы было разделить ui и логику, а в редакс пока вникать не хочу. так что вы довольно хорошо помогли понять как это сделать
Приятно слышать)
Блин! Это лучший урок по контексту. Кучу других пересмотрел и нихрена не понял. Здесь на пальцах!
Спасибо
Я бразилец и не могу писать на португальском, но ваше видео мне помогло !!! Спасибо !!!
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!
спасибо!
Пожалуйста!
наконец-то я нашёл норм видос по useContext, спасибо
Пожалуйста
Спасибо ,
Пожалуйста
Этот канал - просто о сложном
👍
Штука прикольная, но на практике юзается не очень часто. В частности из-за того, что все привыкли к редаксу
Инфа 100%)))
=)))
Редакс очень громозкий.
👍
👍
Все круто, понятно и методично. По моему скромному субъективному мнению улучшить ролики можно убрав из них слова о представлении автора, имя и фамилию можно просто выводить с низу аккуратной плашкой(как это делают кореспонденты новостей) пока автор рассказывает о теме видео, имхо.
Спасибо большое за подробный отзыв!
Идеально подойдет для вхождения в тему Context, но потом лучше почитать официальную документацию в React тк многое опущено.
В уроках, к сожалению, всё не расскажешь...
Здравствуйте. Поясните пожалуйста (на счетчике видео 6:54) - Если мы в 32й строке value присваиваем стрингу. То почему мы в строке 21 используем title а не value... и почему. Спасибо
Потому что внутри consumer в функции, я переопределил имя с value на 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 настроил? Или чего то не понимаю...
Тогда, возможно, проблемы в настройках
Подскажите пожалуйста, если мы присваиваем результат вызова функции createContext в переменную TitleContext и далее используем в компонентах TitleContext.Provider и TitleContext.Consumer, то как быть с модульностью? Как получить доступ к переменной TitleContext, если вложенные компоненты расположены в разных файлах? Нужно создать эту переменную в отдельном файле, а потом импортировать её в нужные файлы?
Создание контекста можно вынести в отдельный файл. После чего импортировать его, как обычный модуль в требуемые компоненты. Похожий пример есть в обои подкастах по Реакт, на канале)
@@YauhenKavalchuk Спасибо! :)
Пожалуйста)
Отлично объяснил. Минимум воды
Спасибо
А как возможно предавать методы компонента-родителя дальше по дереву через контекст? У меня получилось предать метод, добавив вот такое поле в объект контекста 'clickHandler: () => this.handleClick.call()'. Хотелось бы узнать, есть ли альтернативная запись для этого
Можно ли делать тоже самое только наоборот, снизу вверх по иерархии компонентов?
Нет, данные всегда идут сверху вниз, т.е. от родителя к ребёнку. Это однонаправленный поток данных, точно так же, как и в Redux.
@@YauhenKavalchuk Но как тогда можно что-то сделать в родителе если что-то меняется в ребенке
Для этого есть или стейт, или контекст. Эти данные вы пробрасываете в ребёнка в виде пропсов, или контекста. Там их меняете, родитель видит изменения в объекте за которым он наблюдает и обновляется.
+
Спасибо за видео! А можно через этот метод передавать данные от детей к родителю?
Можно. Фактически, это нативная реализация Redux
@@YauhenKavalchuk Можно реализовать передачу на прямую или всеравно использовать коллбек?
Подскажите, я так понимаю контекст - это замена Redux на уровне самой библиотеки?
Ну в целом, да. По ключевой роли - очень похоже. Хотя думаю, для действительно больших приложений не применимо.
А если, например, на втором уровне тоже пробрасывается контекст, он не перезапишется? Как его использовать правильно? Тоже врапнуть в ещё один контекст консумер?
А зачем вам нужно 2 контекста? Почему не определить все нужные данные в одном? Подход, как в Redux - стор для хранения всего
ну это конечно прикольно. Я бы сказал в самом начале пути меня это прокидывание пропсов через компоненты сильно бесило. Отличная замена)
Благодаря этой идее, на некоторых проектах начинают отказываться от Redux
что означает синтаксис {title => {title}}?
а как можно сделать через контекст если надо от родителя к ребенку просто передать булевое значение что типа ребенок используется в этом родителе или нет?
Это синтаксис стрелочной функции: () => {};
Если передать от родителя к ребёнку, то контекст вам вообще не нужен, достаточно пропсов.
Контекст используется, когда значениея нужно передавать через несколько уровней, минуя эти уровни.
@@YauhenKavalchuk Спасибо, так в том то и дело что компонент содержит еще много уровней к ребенку, поэтому не хотелось бы использовать пропсы
Я понял, просто звучало по другому, но не суть. Попробуйте повторить пример как в виде, просто заменить значение со строчного на булевое.
Но что делать если компоненты находятся в разных файлах, родитель и ребенок, как тогда настраивать контекст?
Подключать библиотеку для контроля за состояние Redux, MobX. Или всё-равно находить родителя и оборачивать компонент
Функция внутри TitleContext.Consumer выступает как компонент внутри, без имени, или как? Потому как здесь нету вызова этой анонимной функции... Или я чего-то недопонял?
На текущий момент синтаксис "контекста" чуть упростился. Можете посмотреть плейлист React podcast, там есть пример
@@YauhenKavalchuk окей, спасибо.
Я вообще не понял прикола существования createContext. С таким же успехом можно создать файл storeContext создать там обычный объект, импортировать его в index положить в него нужные данные, импортировать в нужный компонент и получить эти данные. Работает в точности так же. При всём при этом оборачивать ничего не нужно ни в какие Provider и Consumer. А создать в отдельном файле чтоб не было подключений import export в обе стороны. А ещё использовав Consumer мы не имеем доступа к значениям выше методы render в классах, приходиться использовать специальное свойство класса static contextType = Context. после можем обращаться к объекту context. Но как я и сказал обычный объект это спокойно решает.
Разве нельзя импорт сделать с передачей необходимых state или методов?, прослушка событий?
Это все выглядит довольно грязно и это норма в React?, где красота)?
Контекст - это новое API, которое было добавлено. С версией 16.6 синтаксис немного упростился - нету лишних обёрток. А вообще импорт стейта и методов - это не по канонам React, скажем так).
Но в целом API очень полезное, если вы работали с Реакт длительно время, то оно действительно помогает решить Props Drilling, а этого, раньше, и не хватало)
useContext
👍
А что мешает создать банальный объект и в него положить данные?
А там, где нужно, эти данные из объекта считать.
По сути, в этом уроке показано сохранение данных в контекст через Провайдер, и извлечение данных через Консумер.
Такой себе наворот поверх обычного объекта, который может то же самое. Но тут еще провайдер, консумер, функция для извлечения.
Ну мудрят хлопцы - им реально нечем там заняться в Фейсбуке, или где там тот Реакт делают :-)
Скорее всего, есть юзекейсы, где нужен именно такой контекст, а простой объект не подойдет.
Мне просто Реакт заходит через силу, потому что по работе надо разобраться.
Постоянно ищу в нем недостатки.
Как классно работалось раньше - не было всего вот этого замеса из кучи технологий. На пхп и жквери любой сайт делался.
крик души
Уж как есть
На react context api можно сделать свой redux. А этот сам redux выкинуть, нах он нужен, он ужасен
В целом это возможно, но я знаю осень много людей, которые бы поспорили с вами!
В redux при изменении стор перерендривается только те компоненты которые подписаны на него, а контекста получается рендрится все начиная с корневого компонента.
Спасибо!
Пожалуйста