Как работает обнаружение изменений в Angular и что делает OnPush?

Question

Accepted Answer

**Change detection** — это механизм синхронизации DOM с данными компонента в Angular. После любого события, которое может изменить состояние, Angular проверяет компоненты и обновляет представление в местах изменения данных. По умолчанию эта проверка широкая; **`OnPush`** сужает её для повышения производительности.

## Как работает обнаружение изменений по умолчанию

```text
An async event fires (click, HTTP response, setTimeout) →
Zone.js notifies Angular → Angular checks the ENTIRE component tree
top-to-bottom → updates any bindings whose values changed.
```

По умолчанию (стратегия `Default`) Angular **переполняет каждый компонент** при каждом событии — это верно, но потенциально неэффективно на больших деревьях компонентов.

## OnPush — пропускайте компоненты, которые не могли измениться

```ts
import { ChangeDetectionStrategy, Component } from "@angular/core";

@Component({
  selector: "app-user",
  changeDetection: ChangeDetectionStrategy.OnPush, // opt in
  template: `{{ user.name }}`,
})
export class UserComponent {
  @Input() user!: User;
}
```

С `OnPush` Angular **пропускает** проверку этого компонента, если не произойдёт одно из следующих:

```text
1. An @Input REFERENCE changes (new object, not a mutation of the same one)
2. An event fires from within the component (click, etc.)
3. An Observable bound via the async pipe emits
4. You manually call markForCheck()
```

Это может кардинально сократить объём работы на больших деревьях — Angular игнорирует целые поддеревья, которые не могли измениться.

## Главная ловушка: требуется неизменяемость

```ts
// ❌ mutating doesn't change the reference → OnPush won't detect it
this.user.name = "Bob";

// ✅ create a NEW object → reference changes → OnPush updates
this.user = { ...this.user, name: "Bob" };
```

`OnPush` полагается на **изменения ссылок** для входных данных, поэтому вы должны обновлять состояние неизменяемо (новые объекты/массивы). Прямая мутация на месте — это классическая ошибка OnPush — представление не обновится.

## Ручное управление

```ts
constructor(private cdr: ChangeDetectorRef) {}
this.cdr.markForCheck();   // mark this component for the next check
this.cdr.detectChanges();   // run change detection now
```

## Будущее: signals + zoneless

Сигналы обеспечивают ещё более точные, **детализированные** обновления (только представления, читающие изменённый сигнал), указывая на полное удаление Zone.js в будущем.

## Почему это важно

Обнаружение изменений — центральная часть производительности Angular.

Понимание того, что стратегия по умолчанию проверяет всё дерево, а `OnPush` с неизменяемыми данными ограничивает проверки только компонентами, чьи входные данные действительно изменились, — это главный рычаг оптимизации крупных приложений.

Требование неизменяемости — частый источник ошибок вроде "почему моё представление не обновляется?", а сигналы показывают направление развития Angular для ещё более детализированной и эффективной реактивности.