ngOnChanges vs ngDoCheck. ChangeDetectionStrategy OnPush в Angular

[@grommaks]

Привет всем) В этом видео рассмотрим как оптимизировать обновление компонента, но при этом сделать его немного глупее...как вы поняли, немного разберемся в умных и глубых компонентах. Все это завязано на методах жизненного цикла ngOnChanges и ngDoCheck Приятного просмотра 👍

[@Kulibins1]

Хороший материал 👍 Мне прям последние ролики нравятся, качество растёт от роликак к ролику.

[@aleksandrm3466]

Спасибо. Очень хороший контент. Лаконично и практично. Было бы здорово, еще немного больше практических примеров как можно использовать doCheck, best practice...

[@МихаилКоломейцев-к8б]

Огромное спасибо, лучшее объяснение ChangeDetectionStrategy OnPush так еще и вместе с ngOnChanges и ngDoCheck , круто что при объяснении все моменты четко проговариваются.

[@koni.21]

Спасибо за урок! Такого качественного материала как у вас на русскоязычных контентах не встречал. Респект!

[@denpulokas592]

Спасибо большое за урок! Очень доходчиво объясняешь и подаёшь материал. На ютубе почти нет годного материала по Ангуляру, спасает твой канал!))

[@urchuk2006]

Большое спасибо. Сейчас изучаю ангуляр и ваш канал мне очень помогает)

[@maratzinatulin2749]

Мощь, обычно в обучающих видео многие мелочи опускаются. Буду рад видеть ещё подобные видео.

[@js3461]

Отлично подана информация, особенно для новичков. Я некоторые моменты, в том числе и обсуждаемый в этом ролике, осознал только через несколько месяцев работы на проекте. От себя хочу сказать, что в инпуты можно передавать observable и выводить в вёрстке через async pipe, в этом случае не нужно заботится о перерисовке при OnPush

[@grommaks]

Об этом я буду говорить в следующем плейлисте) но подход с передачей Observable мне не нравится, больше нравится распечатывать их в момент привязки

[@G3tf]

@@grommaks я использую behaviorsubject так же в свсязке с async pipe в шаблоне

[@grommaks]

@@G3tf если subject пришёл из сервиса то круто) в компоненте мне кажется это оверхед:)

[@G3tf]

@@grommaks и из сервиса бывает) и бывает из компонента родительского)

[@grommaks]

@@G3tf стараюсь обсервабл не передавать как параметр) но слышал что это как подход используется В компоненте использую если хочу на rxjs всю логику данных описать, тогда события перекидывают в Subject и в потоке обработка идёт, тоже подход со своими плюсами

[@ЕгорРура]

Спасибо большое за такой подробный урок! Узнал много нового.

[@gagosimonyan1986]

Спасибо за старания )

[@mila4308]

Спасибо большое за лекцию! Просто, доступно, интересно. Теперь все по полочкам в голове :)

[@Leonidn1972]

Thanks a lot.Usefull content.

[@danilbogatyrev8554]

Спасибо, хороший урок!

[@YuriiD-y1b]

Cool

[@ilnurryazhapov]

отличный контент

[@Wunderwaffe2333]

perfect

[@bukanaka]

"Атомные" уроки))

[@grommaks]

Атомный самурай из one punch man сразу вспомнился)

[@dmytrokapustiuk9531]

Привет Макс) Круто объясняешь, единственный момент когда мы вместо ngOnChanges используем set, дополнительно к set добавляется get, по идее get вызывается почти всегда, отсюда вопрос не влияет ли это на производительность? Если к примеру будет 10 гетеров)

[@grommaks]

@@dmytrokapustiuk9531 привет 👋 Set и get я бы не рекомендовал использовать :) Get должен выполнять очень простую операцию, причем детерминированную (которая всегда вернет тот же результат если параметры не изменились) и тогда все будет нормально с производительностью. Как делать не нужно, в getter делать новый observable (через добавление динамически pipe к существующему observable), также не нужно копировать объекты в getter, иначе поменяется ссылка Какие паттерны есть для того чтобы не иметь геттер и сеттер ( или иметь их более надежном виде ) 1) ngOnChange для запуска перерасчета и сохранения в свойство компонента 2) rxjs стрим, все можно конвертировать в стримы и описать логику расчета один раз в ngOnInit (тут бы я держал слой умного и простого компонента) 3) новая фича - signals поможет сделать это красивее с точки зрения кода Ну и разумеется, тяжелые вычисления, если сильно хочется во время отрисовки их делать, то можно вынести в pipe, как минимум если это по SOLID и более одного компонента будут использовать это (гипотетически или практически)

[@KolkhozDnepr]

Спасибо за труды)) вопросик - а у тебя нет случайно на Гите проектика с реализованными хуками, чтоб скачать развернуть подебажить, посмотреть вживую как что за чем работает? То вроде все понятно, а чувствую что начну писать и буду тупить)) то искал там что-то подобное, везде без хуков пишут...

[@grommaks]

Только проект этого курса (ссылка в описании) 😺так нужно больше часов пытаться и будет эффект) по другому не получается учиться

[@ОльгаЖурова-и5й]

Спасибо за материал. Но есть вопросик: onPush реагирует ТОЛЬКО на input? на Http request, addEventListener, setTimeout и тд реагирует стратегия default?

[@grommaks]

При OnPush сработает на Input и на привязки событий в шаблоне, такие как (click) и прочие, также сработает если повесили HostListener Насчет прямого element.addEventListener или асинхронных вызовов, то это будет работать при default, так как zone.js будет это отслеживать.

[@yevhenpantiukhov3621]

Для разбора темы повторил урок. Дерево Апп-Парент-Чаилд компоненты. В Апп сделал два метода, один мутирует массив, другой меняет ссылку (так же как в видео), не добавлял никаких changeDetection:ChangeDetectionStrategy.OnPush . Так вот при мутации данные на экране не меняются ! Наставил консолей в ngDoCheck , массив изменяется, видно в консоли, а отображение нет, в видео иначе. Я то вообще категорически против мутаций, но просто интересно, Ангуляр изменился от снятия видео ?

[@grommaks]

Видео свежее, все актуально) спасибо за отзыв

[@yevhenpantiukhov3621]

Уже разобрался, моя ошибка. Я решил сократить код и просто печатал на прямую массив (я понимаю что это несколько странно). Так вот, если ссылка та же самая то изменения массива в таком случае вообще никак не вывести. Вряд ли это кому пригодиться (кто ж на прямую тупо массив выводит на экран), но вот такой интересный момент.

[@raprap630]

как быть с вариантом когда в input set приходит объект и в нем меняется какое-то из свойств (не весь объект целиком)?

[@grommaks]

@@raprap630 это грустная часть angular, что это легче сделать чем в других решениях Нужно придерживаться иммутабельного подхода, NGRX позволяет хранить данные с учетом иммутабельности Обычно все придерживаются такого подхода, с этим нет больших проблем, но рефакторить старый код сложно…

[@biovawan]

Есть ли смысл переходить на родные js приватные поля с помощью '#'? Тем самым получили бы: #array: User[] = []; @Input set array(val: User[]) { this.#array = val; } get array(): User[] { this.#array; }

[@grommaks]

Спасибо за интересный вопрос Пока приходится поддерживать версии от 6 и выше, а также поддерживать IE в некоторых проектах, то я бы не стал переходить Явной рекомендации использовать такой подход нет, под капотом TS может сам это оптимизировать если это важно. Вывод, я бы не стал спешить, но знать о новинках нужно

[@biovawan]

@@grommaks благодарю за скорый ответ и за твои труды! Твой контент уникален, на могу взгляд) желаю успехов!

[@iamantoon]

Хочу спросить довольно общий вопрос про синхронизацию данных с сервером. Вот у меня есть Angular application, в нем нет роутинга, и в нем я делаю CRUD операции над данными. Они применяются, серверная часть срабатывает и меняется, но чтобы изменения увидеть визуально в клиенте, страницу нужно обновить. Как это исправить?

[@grommaks]

Думаю запросы в сервисе делаются Тогда данные в сервисе надо хранит в BehaviorSubject чтобы компонент мог подписаться на изменения Если запрос в компоненте, то возможно стоит OnPush стратегия определения изменений, тогда нужен вызов changeDetectionRef.markForCheck() В момент обновления данных внутри компонента

[@iamantoon]

​@@grommaks пока что не получается, в сервисе у меня такое: getLists(){ return this.http.get(this.baseUrl); } В компоненте, который это отображает такое: ngOnInit(): void { this.listsService.getLists().subscribe({ next: lists => { this.lists = lists.lists; this.listsNames = lists.listNames; } }) } А в компоненте, который вносит изменение на сервер вот такое: editList(){ this.listsService.editList(this.id, this.name).subscribe({ next: () => this.toastr.success("The list has been updated") }) }

[@iamantoon]

Пока не получается сделать правильно, у меня такой код в сервисе: getLists(){ return this.http.get(this.baseUrl); } Такой в компоненте, где эти данные отрисовуются: ngOnInit(): void { this.listsService.getLists().subscribe({ next: lists => { this.lists = lists.lists; this.listsNames = lists.listNames; } }) } Такой в компоненте, где данные меняются: editList(){ this.listsService.editList(this.id, this.name).subscribe({ next: () => this.toastr.success("The list has been updated") }) }

[@fed4wet]

Одно из лучших видео по теме