🟢 Default vs OnPush
Информация
В этом задании мы рассмотрим различия и последствия использования ChangeDetectionStrategy.Default в сравнении с ChangeDetectionStrategy.OnPush.
Вы можете прочитать Angular документацию чтобы узнать больше о различиях между этими стратегиями.
В этом задании все компоненты начинаются со стратегии Default. Когда вы вводите буквы в поле ввода, вы заметите, что все компоненты выделены оранжевым цветом.
Как вы можете видеть, каждая буква запускает новый цикл обнаружения изменений, и все компоненты перерисовываются, что вызывает проблемы с производительностью.
Давайте воспользуемся Angular DevTool для профилирования нашего приложения и поймем, как этот инструмент может помочь нам понять, что происходит внутри нашего приложения.
Теперь начните профилировать свое приложение и введите несколько букв в поле ввода, чтобы запустить несколько циклов обнаружения изменений.
Если вы нажмете на одну из полос (обозначенную желтой стрелкой на рисунке ниже), вы можете увидеть, что на PersonListComponent, RandomComponent и все MatListItem влияет цикл обнаружения изменений, даже когда мы взаимодействуем только с полем ввода.
Пояснение
Цель этой задачи состоит в том, чтобы улучшить кластеризацию обнаружения изменений в приложении, используя стратегию обнаружения изменений “OnPush”, но не только…
Подсказки:
Подсказка 1
Используйте ChangeDetectionStrategy.OnPush но этого будет не достаточно.
Подсказка 2
Создайте компоненты меньшего размера, чтобы лучше отделить поле ввода от списка.
Контрибьюторы
Спасибо всем контрибьюторам которые помогли сделать эту документацию лучше!
