Компоненты высшего порядка в 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

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

  • @SuperSlippa
    @SuperSlippa 6 ปีที่แล้ว +20

    На сколько я знаю не хорошо изпользовать в setState референс на свое собственное значение, так как это вроде как асинхронная функция и ожидаемое значение может быть иным, не в этом примере конечно же, а правильно делать так - setState( (prevState, props) => {
    count: prevState.count +1
    } ,)

  • @TheKoloky
    @TheKoloky 6 ปีที่แล้ว +3

    Спасибо за урок. Как всегда - круто.

  • @Mihail1985
    @Mihail1985 7 ปีที่แล้ว

    Очень круто, спасибо!

  • @user-su4rf6py8n
    @user-su4rf6py8n 4 ปีที่แล้ว

    Огромное спасибо за видео)

  • @happy_cutman
    @happy_cutman 4 ปีที่แล้ว

    Спасибо, всё чётно и понятно! Какой шрифт в редакторе используешь?

  • @maxpapirovnyk6351
    @maxpapirovnyk6351 5 ปีที่แล้ว

    спасибо

  • @hikkarion
    @hikkarion 6 ปีที่แล้ว

    Почему на 5:08 в консоль выводится только свойство count, ведь передаются еще два метода через свойства?

  • @andriipalchik
    @andriipalchik 7 ปีที่แล้ว

    Смотрел раздел "Компоненты" в курсе "Знакомство с Реакт", попытался просмотреть ваш сайт в расширении для Хрома, но не распознает как реакт. Значит ли это что вы переписали сайт на Aurelia или Angular2, или может какой другой фреймворк, очень интересно?

  • @user-ej6gd8mf6r
    @user-ej6gd8mf6r 7 ปีที่แล้ว +7

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

    • @egorovsa
      @egorovsa 6 ปีที่แล้ว

      Именно! Т.к декоратор по факту и есть HOC , только записывается изящнее. но и минусы свои есть да

  • @edwardkenway9495
    @edwardkenway9495 2 ปีที่แล้ว

    давно не слышал такой классный английский

  • @aziaev
    @aziaev 6 ปีที่แล้ว

    good

  • @abler98_
    @abler98_ 7 ปีที่แล้ว

    Это типа Делегирование, только называется иначе?

  • @ivansidorov5
    @ivansidorov5 6 ปีที่แล้ว

    А зачем писать DisplayName если и без него так же отображается в Inspector React Chrome

  • @swimmwatch
    @swimmwatch 4 ปีที่แล้ว

    Очень крутые видео! Спасибо за ваш труд. У меня вопрос про HOC. Для их создания мы используем композицию?

    • @codedojo
      @codedojo  4 ปีที่แล้ว

      Добрый день! Уточните что вы понимаете под композицией?

    • @swimmwatch
      @swimmwatch 4 ปีที่แล้ว

      @@codedojo примесь какие либо сущностей

    • @codedojo
      @codedojo  4 ปีที่แล้ว

      Здесь я бы сказал используется функциональная композиция, когда одна функция оборачивает другую функцию что-то делает и в итоге вызывает начальную функцию. В ООП композицию можно рассмотреть как наличие в объекте ссылки на другой объект. Ну это все нюансы терминологии, но в общем я бы сказал что да, это композиция :)

    • @swimmwatch
      @swimmwatch 4 ปีที่แล้ว

      @@codedojo ок, спасибо!

  • @Abdul-hy4cy
    @Abdul-hy4cy 2 ปีที่แล้ว

    Почему Вы и канал IT-KAMASUTRA, используете японскую стилистику?

  • @ydela6118
    @ydela6118 6 ปีที่แล้ว

    Код на github недоступен. Удалили?

  • @user-wk6zq5up4y
    @user-wk6zq5up4y 7 ปีที่แล้ว +1

    Почему мы в классе WithCrud пишем по-приколу state = { ... } - так же нельзя писать, стейт через this должен объявляться в конструкторе, разве нет?

    • @user-wk6zq5up4y
      @user-wk6zq5up4y 7 ปีที่แล้ว

      И про методы в классах тоже вопрос, это что за синтаксис такой?)

    • @codedojo
      @codedojo  7 ปีที่แล้ว +2

      Это предлагаемый синтаксис для объявления свойств класса (babeljs.io/docs/plugins/transform-class-properties/).

    • @codedojo
      @codedojo  7 ปีที่แล้ว +2

      Это также синтаксис свойств класса в качестве значения которого функция. Благодаря этому синтаксису не нужно привязывать методы к контексту.

    • @den1161
      @den1161 7 ปีที่แล้ว

      Значит state = { ... } будет работать только в es7, но в es6 - не будет?

    • @user-wk6zq5up4y
      @user-wk6zq5up4y 7 ปีที่แล้ว

      Denis Sidorov Получается, что это просто нестандартная возможность языка, которую умеет компилировать Babel. Попадет ли данная возможность в стандарт языка, покажет время.

  • @uf8398
    @uf8398 5 ปีที่แล้ว +4

    Всё классно, но не используй в рендере setState, это же могут смотреть дети! )

  • @Alex.M.
    @Alex.M. 7 ปีที่แล้ว

    Что за ИДЕ?

    • @user-wk6zq5up4y
      @user-wk6zq5up4y 7 ปีที่แล้ว

      visual studio code

    • @muratkudainetov2957
      @muratkudainetov2957 7 ปีที่แล้ว +3

      громко сказано конечно, ide, но как редактор оч даже хорош. Вот когда php шторм лень запускать, VS Code самое то.

  • @timzeynalov3537
    @timzeynalov3537 3 ปีที่แล้ว

    ну как бы смешновато получается использовать hoc в таком примере )

  • @user-bu7fw1kj6t
    @user-bu7fw1kj6t 5 ปีที่แล้ว

    Очень классний урок. Жаль что в исходиках кроме .gitignore и README.md ничего нету. Ни `logger` ни `crud`. Очень хотелось би посмотреть в работе ветку `crud`. Восстановите пожалуста если не трудно.

    • @user-qj2yg1rn3j
      @user-qj2yg1rn3j 5 ปีที่แล้ว

      смотри внимательно. люди же находят. в мастере нету, так ты другие ветки смотри

  • @MrMassaraksh
    @MrMassaraksh 7 ปีที่แล้ว

    Только хотел писать а как же декораторы, но потом вспомнил, что их до Лиза меняют так часто, что только самоубийца рискнёт их использовать, хотя имхо удобнейшая штука, говорю как питонист)

    • @codedojo
      @codedojo  7 ปีที่แล้ว

      Декораторы - это круто, но важно и понимать как они работают. Лично я, как и с async/await, жду официальной поддержки.

  • @ashkokurban2333
    @ashkokurban2333 5 ปีที่แล้ว

    Прошел год и кода на гитхаб нет

    • @user-yd9fh6fk2k
      @user-yd9fh6fk2k 5 ปีที่แล้ว

      ну вообще-то есть, зайди по ссылке в репозиторий и выбери ветку crud

  • @glinkap
    @glinkap 6 ปีที่แล้ว

    В вашем исходнике нету Hoc

    • @theobroma222
      @theobroma222 5 ปีที่แล้ว

      Есть. Попробуйте посмотреть и другие ветки, а не только master

  • @LiguidCool
    @LiguidCool 7 ปีที่แล้ว

    Если честно, чет сложно ... Нет, в целом логика ясна, но как это в деле применять?

    • @user-ej6gd8mf6r
      @user-ej6gd8mf6r 7 ปีที่แล้ว

      LiguidCool практических примеров не достаточно? В реальности этот подход используют на каждом ходу - и в редуксе, и в роутере и тд

    • @MrMassaraksh
      @MrMassaraksh 7 ปีที่แล้ว

      LiguidCool что бы стало понятней почитай на хабре статью про декораторы в питоне, там очень круто описывают, все что в этом видео, только в простых примерах. Видео, кстати зачёт!

    • @MrMassaraksh
      @MrMassaraksh 7 ปีที่แล้ว +1

      Насчёт практики, мидлвари по схожей логике работают

  • @arsenykonohov4426
    @arsenykonohov4426 7 ปีที่แล้ว +2

    Очень было НЕ круто НЕ упомянуть то что
    componentwillreceiveprops()
    componentdidmount()
    facebook.github.io/react/docs/react-component.html#componentwillreceiveprops
    facebook.github.io/react/docs/react-component.html#componentdidmount
    это методы родные класса React.component;
    Ты просто сказал что "определил свойство".
    Ввело это меня лично в заблуждение.
    За видос отдельное спасибо. Было интересно.
    Мне почему-то вспомнились сервисы в angular.js;

    • @codedojo
      @codedojo  7 ปีที่แล้ว +1

      Делая видео я исходил из того что люди уже знают про методы жизненного цикла.

  • @petrvictorovich
    @petrvictorovich 2 ปีที่แล้ว +1

    Ужос! В трёх кнопках мне объяснили, что я нихрена не знаю в Реакте!

  • @cattac3030
    @cattac3030 3 ปีที่แล้ว

    ох уж этот акцент

  • @user-ng7dd7fm6f
    @user-ng7dd7fm6f 5 ปีที่แล้ว

    нихера не понятно((((