Компоненты высшего порядка в React (Higher-Order Components)
ฝัง
- เผยแพร่เมื่อ 14 มี.ค. 2017
- #react #hoc
Код на GitHub: github.com/codedojo/react-hoc
Higher-Order Components: facebook.github.io/react/docs...
---
Обучение программированию и разработке: codedojo.ru
Следи за новостями проекта в группе ВКонтакте: codedojo
Следи за готовностью курсов, делись идеями и голосуй за новые курсы в Trello: trello.com/b/HIKnMb1X
На сколько я знаю не хорошо изпользовать в setState референс на свое собственное значение, так как это вроде как асинхронная функция и ожидаемое значение может быть иным, не в этом примере конечно же, а правильно делать так - setState( (prevState, props) => {
count: prevState.count +1
} ,)
Спасибо за урок. Как всегда - круто.
Очень круто, спасибо!
Огромное спасибо за видео)
Спасибо, всё чётно и понятно! Какой шрифт в редакторе используешь?
спасибо
Почему на 5:08 в консоль выводится только свойство count, ведь передаются еще два метода через свойства?
Смотрел раздел "Компоненты" в курсе "Знакомство с Реакт", попытался просмотреть ваш сайт в расширении для Хрома, но не распознает как реакт. Значит ли это что вы переписали сайт на Aurelia или Angular2, или может какой другой фреймворк, очень интересно?
спасибо, еще можно было упомянуть про синтаксис декораторов
Именно! Т.к декоратор по факту и есть HOC , только записывается изящнее. но и минусы свои есть да
давно не слышал такой классный английский
good
Это типа Делегирование, только называется иначе?
А зачем писать DisplayName если и без него так же отображается в Inspector React Chrome
Очень крутые видео! Спасибо за ваш труд. У меня вопрос про HOC. Для их создания мы используем композицию?
Добрый день! Уточните что вы понимаете под композицией?
@@codedojo примесь какие либо сущностей
Здесь я бы сказал используется функциональная композиция, когда одна функция оборачивает другую функцию что-то делает и в итоге вызывает начальную функцию. В ООП композицию можно рассмотреть как наличие в объекте ссылки на другой объект. Ну это все нюансы терминологии, но в общем я бы сказал что да, это композиция :)
@@codedojo ок, спасибо!
Почему Вы и канал IT-KAMASUTRA, используете японскую стилистику?
Код на github недоступен. Удалили?
Почему мы в классе WithCrud пишем по-приколу state = { ... } - так же нельзя писать, стейт через this должен объявляться в конструкторе, разве нет?
И про методы в классах тоже вопрос, это что за синтаксис такой?)
Это предлагаемый синтаксис для объявления свойств класса (babeljs.io/docs/plugins/transform-class-properties/).
Это также синтаксис свойств класса в качестве значения которого функция. Благодаря этому синтаксису не нужно привязывать методы к контексту.
Значит state = { ... } будет работать только в es7, но в es6 - не будет?
Denis Sidorov Получается, что это просто нестандартная возможность языка, которую умеет компилировать Babel. Попадет ли данная возможность в стандарт языка, покажет время.
Всё классно, но не используй в рендере setState, это же могут смотреть дети! )
Что за ИДЕ?
visual studio code
громко сказано конечно, ide, но как редактор оч даже хорош. Вот когда php шторм лень запускать, VS Code самое то.
ну как бы смешновато получается использовать hoc в таком примере )
Очень классний урок. Жаль что в исходиках кроме .gitignore и README.md ничего нету. Ни `logger` ни `crud`. Очень хотелось би посмотреть в работе ветку `crud`. Восстановите пожалуста если не трудно.
смотри внимательно. люди же находят. в мастере нету, так ты другие ветки смотри
Только хотел писать а как же декораторы, но потом вспомнил, что их до Лиза меняют так часто, что только самоубийца рискнёт их использовать, хотя имхо удобнейшая штука, говорю как питонист)
Декораторы - это круто, но важно и понимать как они работают. Лично я, как и с async/await, жду официальной поддержки.
Прошел год и кода на гитхаб нет
ну вообще-то есть, зайди по ссылке в репозиторий и выбери ветку crud
В вашем исходнике нету Hoc
Есть. Попробуйте посмотреть и другие ветки, а не только master
Если честно, чет сложно ... Нет, в целом логика ясна, но как это в деле применять?
LiguidCool практических примеров не достаточно? В реальности этот подход используют на каждом ходу - и в редуксе, и в роутере и тд
LiguidCool что бы стало понятней почитай на хабре статью про декораторы в питоне, там очень круто описывают, все что в этом видео, только в простых примерах. Видео, кстати зачёт!
Насчёт практики, мидлвари по схожей логике работают
Очень было НЕ круто НЕ упомянуть то что
componentwillreceiveprops()
componentdidmount()
facebook.github.io/react/docs/react-component.html#componentwillreceiveprops
facebook.github.io/react/docs/react-component.html#componentdidmount
это методы родные класса React.component;
Ты просто сказал что "определил свойство".
Ввело это меня лично в заблуждение.
За видос отдельное спасибо. Было интересно.
Мне почему-то вспомнились сервисы в angular.js;
Делая видео я исходил из того что люди уже знают про методы жизненного цикла.
Ужос! В трёх кнопках мне объяснили, что я нихрена не знаю в Реакте!
ох уж этот акцент
нихера не понятно((((