Огромное спасибо, лучшее объяснение ChangeDetectionStrategy OnPush так еще и вместе с ngOnChanges и ngDoCheck , круто что при объяснении все моменты четко проговариваются.
Привет всем) В этом видео рассмотрим как оптимизировать обновление компонента, но при этом сделать его немного глупее...как вы поняли, немного разберемся в умных и глубых компонентах. Все это завязано на методах жизненного цикла ngOnChanges и ngDoCheck Приятного просмотра 👍
Спасибо. Очень хороший контент. Лаконично и практично. Было бы здорово, еще немного больше практических примеров как можно использовать doCheck, best practice...
Отлично подана информация, особенно для новичков. Я некоторые моменты, в том числе и обсуждаемый в этом ролике, осознал только через несколько месяцев работы на проекте. От себя хочу сказать, что в инпуты можно передавать observable и выводить в вёрстке через async pipe, в этом случае не нужно заботится о перерисовке при OnPush
@@G3tf стараюсь обсервабл не передавать как параметр) но слышал что это как подход используется В компоненте использую если хочу на rxjs всю логику данных описать, тогда события перекидывают в Subject и в потоке обработка идёт, тоже подход со своими плюсами
Спасибо за труды)) вопросик - а у тебя нет случайно на Гите проектика с реализованными хуками, чтоб скачать развернуть подебажить, посмотреть вживую как что за чем работает? То вроде все понятно, а чувствую что начну писать и буду тупить)) то искал там что-то подобное, везде без хуков пишут...
Привет Макс) Круто объясняешь, единственный момент когда мы вместо ngOnChanges используем set, дополнительно к set добавляется get, по идее get вызывается почти всегда, отсюда вопрос не влияет ли это на производительность? Если к примеру будет 10 гетеров)
@@dmytrokapustiuk9531 привет 👋 Set и get я бы не рекомендовал использовать :) Get должен выполнять очень простую операцию, причем детерминированную (которая всегда вернет тот же результат если параметры не изменились) и тогда все будет нормально с производительностью. Как делать не нужно, в getter делать новый observable (через добавление динамически pipe к существующему observable), также не нужно копировать объекты в getter, иначе поменяется ссылка Какие паттерны есть для того чтобы не иметь геттер и сеттер ( или иметь их более надежном виде ) 1) ngOnChange для запуска перерасчета и сохранения в свойство компонента 2) rxjs стрим, все можно конвертировать в стримы и описать логику расчета один раз в ngOnInit (тут бы я держал слой умного и простого компонента) 3) новая фича - signals поможет сделать это красивее с точки зрения кода Ну и разумеется, тяжелые вычисления, если сильно хочется во время отрисовки их делать, то можно вынести в pipe, как минимум если это по SOLID и более одного компонента будут использовать это (гипотетически или практически)
Спасибо за материал. Но есть вопросик: onPush реагирует ТОЛЬКО на input? на Http request, addEventListener, setTimeout и тд реагирует стратегия default?
При OnPush сработает на Input и на привязки событий в шаблоне, такие как (click) и прочие, также сработает если повесили HostListener Насчет прямого element.addEventListener или асинхронных вызовов, то это будет работать при default, так как zone.js будет это отслеживать.
Для разбора темы повторил урок. Дерево Апп-Парент-Чаилд компоненты. В Апп сделал два метода, один мутирует массив, другой меняет ссылку (так же как в видео), не добавлял никаких changeDetection:ChangeDetectionStrategy.OnPush . Так вот при мутации данные на экране не меняются ! Наставил консолей в ngDoCheck , массив изменяется, видно в консоли, а отображение нет, в видео иначе. Я то вообще категорически против мутаций, но просто интересно, Ангуляр изменился от снятия видео ?
Уже разобрался, моя ошибка. Я решил сократить код и просто печатал на прямую массив (я понимаю что это несколько странно). Так вот, если ссылка та же самая то изменения массива в таком случае вообще никак не вывести. Вряд ли это кому пригодиться (кто ж на прямую тупо массив выводит на экран), но вот такой интересный момент.
Есть ли смысл переходить на родные js приватные поля с помощью '#'? Тем самым получили бы: #array: User[] = []; @Input set array(val: User[]) { this.#array = val; } get array(): User[] { this.#array; }
Спасибо за интересный вопрос Пока приходится поддерживать версии от 6 и выше, а также поддерживать IE в некоторых проектах, то я бы не стал переходить Явной рекомендации использовать такой подход нет, под капотом TS может сам это оптимизировать если это важно. Вывод, я бы не стал спешить, но знать о новинках нужно
@@raprap630 это грустная часть angular, что это легче сделать чем в других решениях Нужно придерживаться иммутабельного подхода, NGRX позволяет хранить данные с учетом иммутабельности Обычно все придерживаются такого подхода, с этим нет больших проблем, но рефакторить старый код сложно…
Хочу спросить довольно общий вопрос про синхронизацию данных с сервером. Вот у меня есть Angular application, в нем нет роутинга, и в нем я делаю CRUD операции над данными. Они применяются, серверная часть срабатывает и меняется, но чтобы изменения увидеть визуально в клиенте, страницу нужно обновить. Как это исправить?
Думаю запросы в сервисе делаются Тогда данные в сервисе надо хранит в BehaviorSubject чтобы компонент мог подписаться на изменения Если запрос в компоненте, то возможно стоит OnPush стратегия определения изменений, тогда нужен вызов changeDetectionRef.markForCheck() В момент обновления данных внутри компонента
@@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") }) }
Пока не получается сделать правильно, у меня такой код в сервисе: 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") }) }
Когда нужен свой change detection механизм. Например в компоненте рисуется /D3/SVG/Canvas и нужно синхронизировать со стейтом angular. SVG ангулар может сам обрабатывать, но вот D3 синхронизацию уже нужна такая гибкость
![Seungmin "그렇게, 천천히, 우리(As we are)" | [Stray Kids : SKZ-PLAYER]](http://i.ytimg.com/vi/kAzmhLHePqU/mqdefault.jpg)
Огромное спасибо, лучшее объяснение ChangeDetectionStrategy OnPush так еще и вместе с ngOnChanges и ngDoCheck , круто что при объяснении все моменты четко проговариваются.
Привет всем)
В этом видео рассмотрим как оптимизировать обновление компонента, но при этом сделать его немного глупее...как вы поняли, немного разберемся в умных и глубых компонентах.
Все это завязано на методах жизненного цикла ngOnChanges и ngDoCheck
Приятного просмотра 👍
Спасибо. Очень хороший контент. Лаконично и практично. Было бы здорово, еще немного больше практических примеров как можно использовать doCheck, best practice...
Спасибо за урок! Такого качественного материала как у вас на русскоязычных контентах не встречал. Респект!
Спасибо большое за урок! Очень доходчиво объясняешь и подаёшь материал. На ютубе почти нет годного материала по Ангуляру, спасает твой канал!))
Спасибо большое за такой подробный урок! Узнал много нового.
Отлично подана информация, особенно для новичков. Я некоторые моменты, в том числе и обсуждаемый в этом ролике, осознал только через несколько месяцев работы на проекте. От себя хочу сказать, что в инпуты можно передавать observable и выводить в вёрстке через async pipe, в этом случае не нужно заботится о перерисовке при OnPush
Об этом я буду говорить в следующем плейлисте) но подход с передачей Observable мне не нравится, больше нравится распечатывать их в момент привязки
@@grommaks я использую behaviorsubject так же в свсязке с async pipe в шаблоне
@@G3tf если subject пришёл из сервиса то круто) в компоненте мне кажется это оверхед:)
@@grommaks и из сервиса бывает) и бывает из компонента родительского)
@@G3tf стараюсь обсервабл не передавать как параметр) но слышал что это как подход используется
В компоненте использую если хочу на rxjs всю логику данных описать, тогда события перекидывают в Subject и в потоке обработка идёт, тоже подход со своими плюсами
Хороший материал 👍 Мне прям последние ролики нравятся, качество растёт от роликак к ролику.
Мощь, обычно в обучающих видео многие мелочи опускаются. Буду рад видеть ещё подобные видео.
Большое спасибо. Сейчас изучаю ангуляр и ваш канал мне очень помогает)
Спасибо большое за лекцию! Просто, доступно, интересно. Теперь все по полочкам в голове :)
Спасибо за старания )
Спасибо за труды)) вопросик - а у тебя нет случайно на Гите проектика с реализованными хуками, чтоб скачать развернуть подебажить, посмотреть вживую как что за чем работает? То вроде все понятно, а чувствую что начну писать и буду тупить)) то искал там что-то подобное, везде без хуков пишут...
Только проект этого курса (ссылка в описании) 😺так нужно больше часов пытаться и будет эффект) по другому не получается учиться
Привет Макс) Круто объясняешь, единственный момент когда мы вместо ngOnChanges используем set, дополнительно к set добавляется get, по идее get вызывается почти всегда, отсюда вопрос не влияет ли это на производительность? Если к примеру будет 10 гетеров)
@@dmytrokapustiuk9531 привет 👋
Set и get я бы не рекомендовал использовать :)
Get должен выполнять очень простую операцию, причем детерминированную (которая всегда вернет тот же результат если параметры не изменились) и тогда все будет нормально с производительностью.
Как делать не нужно, в getter делать новый observable (через добавление динамически pipe к существующему observable), также не нужно копировать объекты в getter, иначе поменяется ссылка
Какие паттерны есть для того чтобы не иметь геттер и сеттер ( или иметь их более надежном виде )
1) ngOnChange для запуска перерасчета и сохранения в свойство компонента
2) rxjs стрим, все можно конвертировать в стримы и описать логику расчета один раз в ngOnInit (тут бы я держал слой умного и простого компонента)
3) новая фича - signals поможет сделать это красивее с точки зрения кода
Ну и разумеется, тяжелые вычисления, если сильно хочется во время отрисовки их делать, то можно вынести в pipe, как минимум если это по SOLID и более одного компонента будут использовать это (гипотетически или практически)
Спасибо за материал. Но есть вопросик: onPush реагирует ТОЛЬКО на input? на Http request, addEventListener, setTimeout и тд реагирует стратегия default?
При OnPush сработает на Input и на привязки событий в шаблоне, такие как (click) и прочие, также сработает если повесили HostListener
Насчет прямого element.addEventListener или асинхронных вызовов, то это будет работать при default, так как zone.js будет это отслеживать.
Thanks a lot.Usefull content.
Спасибо, хороший урок!
"Атомные" уроки))
Атомный самурай из one punch man сразу вспомнился)
Для разбора темы повторил урок. Дерево Апп-Парент-Чаилд компоненты. В Апп сделал два метода, один мутирует массив, другой меняет ссылку (так же как в видео), не добавлял никаких changeDetection:ChangeDetectionStrategy.OnPush . Так вот при мутации данные на экране не меняются ! Наставил консолей в ngDoCheck , массив изменяется, видно в консоли, а отображение нет, в видео иначе. Я то вообще категорически против мутаций, но просто интересно, Ангуляр изменился от снятия видео ?
Видео свежее, все актуально) спасибо за отзыв
Уже разобрался, моя ошибка. Я решил сократить код и просто печатал на прямую массив (я понимаю что это несколько странно). Так вот, если ссылка та же самая то изменения массива в таком случае вообще никак не вывести. Вряд ли это кому пригодиться (кто ж на прямую тупо массив выводит на экран), но вот такой интересный момент.
Есть ли смысл переходить на родные js приватные поля с помощью '#'? Тем самым получили бы:
#array: User[] = [];
@Input set array(val: User[]) {
this.#array = val;
}
get array(): User[] {
this.#array;
}
Спасибо за интересный вопрос
Пока приходится поддерживать версии от 6 и выше, а также поддерживать IE в некоторых проектах, то я бы не стал переходить
Явной рекомендации использовать такой подход нет, под капотом TS может сам это оптимизировать если это важно.
Вывод, я бы не стал спешить, но знать о новинках нужно
@@grommaks благодарю за скорый ответ и за твои труды! Твой контент уникален, на могу взгляд) желаю успехов!
как быть с вариантом когда в input set приходит объект и в нем меняется какое-то из свойств (не весь объект целиком)?
@@raprap630 это грустная часть angular, что это легче сделать чем в других решениях
Нужно придерживаться иммутабельного подхода, NGRX позволяет хранить данные с учетом иммутабельности
Обычно все придерживаются такого подхода, с этим нет больших проблем, но рефакторить старый код сложно…
отличный контент
Хочу спросить довольно общий вопрос про синхронизацию данных с сервером. Вот у меня есть Angular application, в нем нет роутинга, и в нем я делаю CRUD операции над данными. Они применяются, серверная часть срабатывает и меняется, но чтобы изменения увидеть визуально в клиенте, страницу нужно обновить. Как это исправить?
Думаю запросы в сервисе делаются
Тогда данные в сервисе надо хранит в BehaviorSubject чтобы компонент мог подписаться на изменения
Если запрос в компоненте, то возможно стоит OnPush стратегия определения изменений, тогда нужен вызов changeDetectionRef.markForCheck()
В момент обновления данных внутри компонента
@@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")
})
}
Пока не получается сделать правильно, у меня такой код в сервисе:
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")
})
}
Cool
perfect
так и не понял для чего нужен ngDoCheck
Когда нужен свой change detection механизм.
Например в компоненте рисуется /D3/SVG/Canvas и нужно синхронизировать со стейтом angular. SVG ангулар может сам обрабатывать, но вот D3 синхронизацию уже нужна такая гибкость