Обнаружение изменений OnPush
Сокращайте количество проверок с помощью стратегии OnPush
«Обнаружение изменений OnPush» — бесплатный урок Angular Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Angular Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Angular Academy содержит 4 уроков всего.
Проблема производительности
Стратегия по умолчанию проверяет каждый компонент на каждом такте. В больших приложениях эти затраты накапливаются. OnPush указывает Angular пропускать компонент, если ничего важного не изменилось.
Включение OnPush
Задайте параметр changeDetection для компонента.
@Component({
selector: 'app-user',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '{{ user().name }}'
})
export class UserComponent {}Когда OnPush выполняет повторную проверку
Компонент с OnPush проверяется только в следующих случаях: изменяется ссылка @Input, из его шаблона возникает событие, наблюдаемый объект, связанный с помощью async, выдаёт новое значение или Вы вызываете markForCheck().
Равенство ссылок входных данных
OnPush сравнивает ссылки входных данных с помощью Object.is. Изменение объекта на месте не запускает повторную проверку; необходимо передать новую ссылку.
// Mutation: ignored by OnPush
this.user.name = 'New';
// New reference: detected
this.user = { ...this.user, name: 'New' };Преимущества неизменяемости
OnPush естественным образом сочетается с неизменяемыми данными. Всегда создавайте новые объекты и массивы вместо их изменения, чтобы проверки ссылок надёжно обнаруживали изменения.
this.items = [...this.items, newItem];События по-прежнему работают
События из собственного шаблона компонента (нажатия, ввод данных) автоматически помечают его для проверки, поэтому локальная интерактивность работает без дополнительного кода.
<button (click)="count.set(count() + 1)">+</button>Канал async
Канал async вызывает markForCheck(), когда его наблюдаемый объект выдаёт новое значение, поэтому OnPush без проблем работает с потоками.
<p>{{ data$ | async }}</p>markForCheck
Если Вы обновляете состояние вне обычных триггеров, вызовите markForCheck(), чтобы запланировать проверку компонента и его предков на следующем такте.
private cdr = inject(ChangeDetectorRef);
this.cdr.markForCheck();Сигналы и OnPush
Сигналы интегрируются с OnPush: чтение сигнала в шаблоне регистрирует зависимость, а его обновление автоматически помечает компонент для проверки, поэтому вручную вызывать ничего не нужно.
count = signal(0);
increment() { this.count.update(c => c + 1); }Распространение OnPush
После пометки компонент и все его предки вплоть до корневого помечаются, чтобы проверить этот путь. Вложенные компоненты ниже него проверяются обычным образом.
Рекомендация
Используйте OnPush по умолчанию для новых компонентов. В сочетании с сигналами или неизменяемыми входными данными этот режим значительно сокращает ненужную работу.
Быстрая проверка
Проверьте, насколько хорошо Вы поняли принцип работы OnPush.
Итоги
Вы узнали, что ChangeDetectionStrategy.OnPush пропускает проверки, пока не изменится ссылка входных данных, не возникнет событие в шаблоне, не выдаст новое значение канал async или не будет вызван markForCheck(). Лучше всего этот режим сочетается с неизменяемыми данными и сигналами.
Часто задаваемые вопросы
Урок «Обнаружение изменений OnPush» бесплатный?
Да — полный текст урока «Обнаружение изменений OnPush» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Angular Academy, подпишись на CoddyKit PRO. Курс Angular Academy содержит 4 уроков всего.
Чему я научусь в уроке «Обнаружение изменений OnPush»?
Сокращайте количество проверок с помощью стратегии OnPush Ты практикуешь Angular Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Angular Academy?
Предыдущий опыт не требуется. Angular Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Обнаружение изменений OnPush»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Angular Academy?
Да. Каждый урок Angular Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Как работает обнаружение изменений
- Обнаружение изменений OnPush
- Angular без зон
- Оптимизация списков и отображения