Привет всем) В этом видео рассмотрим как оптимизировать обновление компонента, но при этом сделать его немного глупее...как вы поняли, немного разберемся в умных и глубых компонентах. Все это завязано на методах жизненного цикла ngOnChanges и ngDoCheck Приятного просмотра 👍
Спасибо. Очень хороший контент. Лаконично и практично. Было бы здорово, еще немного больше практических примеров как можно использовать doCheck, best practice...
Хочу спросить довольно общий вопрос про синхронизацию данных с сервером. Вот у меня есть 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") }) }
Привет Макс) Круто объясняешь, единственный момент когда мы вместо 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 будет это отслеживать.
Огромное спасибо, лучшее объяснение ChangeDetectionStrategy OnPush так еще и вместе с ngOnChanges и ngDoCheck , круто что при объяснении все моменты четко проговариваются.
Отлично подана информация, особенно для новичков. Я некоторые моменты, в том числе и обсуждаемый в этом ролике, осознал только через несколько месяцев работы на проекте. От себя хочу сказать, что в инпуты можно передавать observable и выводить в вёрстке через async pipe, в этом случае не нужно заботится о перерисовке при OnPush
@@G3tf стараюсь обсервабл не передавать как параметр) но слышал что это как подход используется В компоненте использую если хочу на rxjs всю логику данных описать, тогда события перекидывают в Subject и в потоке обработка идёт, тоже подход со своими плюсами
@@raprap630 это грустная часть angular, что это легче сделать чем в других решениях Нужно придерживаться иммутабельного подхода, NGRX позволяет хранить данные с учетом иммутабельности Обычно все придерживаются такого подхода, с этим нет больших проблем, но рефакторить старый код сложно…
Для разбора темы повторил урок. Дерево Апп-Парент-Чаилд компоненты. В Апп сделал два метода, один мутирует массив, другой меняет ссылку (так же как в видео), не добавлял никаких changeDetection:ChangeDetectionStrategy.OnPush . Так вот при мутации данные на экране не меняются ! Наставил консолей в ngDoCheck , массив изменяется, видно в консоли, а отображение нет, в видео иначе. Я то вообще категорически против мутаций, но просто интересно, Ангуляр изменился от снятия видео ?
Уже разобрался, моя ошибка. Я решил сократить код и просто печатал на прямую массив (я понимаю что это несколько странно). Так вот, если ссылка та же самая то изменения массива в таком случае вообще никак не вывести. Вряд ли это кому пригодиться (кто ж на прямую тупо массив выводит на экран), но вот такой интересный момент.
Есть ли смысл переходить на родные js приватные поля с помощью '#'? Тем самым получили бы: #array: User[] = []; @Input set array(val: User[]) { this.#array = val; } get array(): User[] { this.#array; }
Спасибо за интересный вопрос Пока приходится поддерживать версии от 6 и выше, а также поддерживать IE в некоторых проектах, то я бы не стал переходить Явной рекомендации использовать такой подход нет, под капотом TS может сам это оптимизировать если это важно. Вывод, я бы не стал спешить, но знать о новинках нужно
Привет всем)
В этом видео рассмотрим как оптимизировать обновление компонента, но при этом сделать его немного глупее...как вы поняли, немного разберемся в умных и глубых компонентах.
Все это завязано на методах жизненного цикла ngOnChanges и ngDoCheck
Приятного просмотра 👍
Спасибо. Очень хороший контент. Лаконично и практично. Было бы здорово, еще немного больше практических примеров как можно использовать doCheck, best practice...
Хороший материал 👍 Мне прям последние ролики нравятся, качество растёт от роликак к ролику.
Thanks a lot.Usefull content.
Хочу спросить довольно общий вопрос про синхронизацию данных с сервером. Вот у меня есть 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")
})
}
Спасибо большое за урок! Очень доходчиво объясняешь и подаёшь материал. На ютубе почти нет годного материала по Ангуляру, спасает твой канал!))
Спасибо за урок! Такого качественного материала как у вас на русскоязычных контентах не встречал. Респект!
Привет Макс) Круто объясняешь, единственный момент когда мы вместо 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 будет это отслеживать.
"Атомные" уроки))
Атомный самурай из one punch man сразу вспомнился)
Cool
Огромное спасибо, лучшее объяснение ChangeDetectionStrategy OnPush так еще и вместе с ngOnChanges и ngDoCheck , круто что при объяснении все моменты четко проговариваются.
Отлично подана информация, особенно для новичков. Я некоторые моменты, в том числе и обсуждаемый в этом ролике, осознал только через несколько месяцев работы на проекте. От себя хочу сказать, что в инпуты можно передавать observable и выводить в вёрстке через async pipe, в этом случае не нужно заботится о перерисовке при OnPush
Об этом я буду говорить в следующем плейлисте) но подход с передачей Observable мне не нравится, больше нравится распечатывать их в момент привязки
@@grommaks я использую behaviorsubject так же в свсязке с async pipe в шаблоне
@@G3tf если subject пришёл из сервиса то круто) в компоненте мне кажется это оверхед:)
@@grommaks и из сервиса бывает) и бывает из компонента родительского)
@@G3tf стараюсь обсервабл не передавать как параметр) но слышал что это как подход используется
В компоненте использую если хочу на rxjs всю логику данных описать, тогда события перекидывают в Subject и в потоке обработка идёт, тоже подход со своими плюсами
как быть с вариантом когда в input set приходит объект и в нем меняется какое-то из свойств (не весь объект целиком)?
@@raprap630 это грустная часть angular, что это легче сделать чем в других решениях
Нужно придерживаться иммутабельного подхода, NGRX позволяет хранить данные с учетом иммутабельности
Обычно все придерживаются такого подхода, с этим нет больших проблем, но рефакторить старый код сложно…
Спасибо большое за такой подробный урок! Узнал много нового.
отличный контент
Спасибо большое за лекцию! Просто, доступно, интересно. Теперь все по полочкам в голове :)
perfect
Для разбора темы повторил урок. Дерево Апп-Парент-Чаилд компоненты. В Апп сделал два метода, один мутирует массив, другой меняет ссылку (так же как в видео), не добавлял никаких changeDetection:ChangeDetectionStrategy.OnPush . Так вот при мутации данные на экране не меняются ! Наставил консолей в ngDoCheck , массив изменяется, видно в консоли, а отображение нет, в видео иначе. Я то вообще категорически против мутаций, но просто интересно, Ангуляр изменился от снятия видео ?
Видео свежее, все актуально) спасибо за отзыв
Уже разобрался, моя ошибка. Я решил сократить код и просто печатал на прямую массив (я понимаю что это несколько странно). Так вот, если ссылка та же самая то изменения массива в таком случае вообще никак не вывести. Вряд ли это кому пригодиться (кто ж на прямую тупо массив выводит на экран), но вот такой интересный момент.
Спасибо, хороший урок!
Есть ли смысл переходить на родные js приватные поля с помощью '#'? Тем самым получили бы:
#array: User[] = [];
@Input set array(val: User[]) {
this.#array = val;
}
get array(): User[] {
this.#array;
}
Спасибо за интересный вопрос
Пока приходится поддерживать версии от 6 и выше, а также поддерживать IE в некоторых проектах, то я бы не стал переходить
Явной рекомендации использовать такой подход нет, под капотом TS может сам это оптимизировать если это важно.
Вывод, я бы не стал спешить, но знать о новинках нужно
@@grommaks благодарю за скорый ответ и за твои труды! Твой контент уникален, на могу взгляд) желаю успехов!
Одно из лучших видео по теме