В Angular обнаружение изменений — это важнейший процесс, который определяет, когда и как следует обновлять представление на основе изменений в данных компонента. По умолчанию Angular использует стратегию обнаружения изменений под названием «По умолчанию», при которой обнаружение изменений запускается при каждом событии компонента или асинхронной операции. Однако в сценариях, где производительность вызывает беспокойство, вы можете использовать стратегию обнаружения изменений «OnPush» для оптимизации производительности вашего приложения. В этой статье мы подробно рассмотрим стратегию OnPush и обсудим, как она может значительно повысить производительность вашего приложения Angular.

Понимание стратегии обнаружения изменений OnPush.
Стратегия обнаружения изменений OnPush — это метод оптимизации, который инструктирует Angular запускать обнаружение изменений только тогда, когда изменяются входные свойства компонента или когда событие явно генерируется компонентом. Такой подход сокращает количество ненужных циклов обнаружения изменений и повышает общую производительность приложения. Чтобы использовать стратегию OnPush, вам необходимо использовать комбинацию методов и лучших практик.

Метод 1: маркировка компонентов с помощью ChangeDetectionStrategy.OnPush
Первым шагом является применение стратегии OnPush к вашим компонентам. Этого можно добиться, установив для свойства changeDetectionкомпонента значение ChangeDetectionStrategy.OnPush. Это говорит Angular использовать стратегию OnPush для обнаружения изменений в этом компоненте. Вот пример:

import { Component, ChangeDetectionStrategy } from '@angular/core';
@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MyComponent { }

Метод 2: неизменяемые структуры данных
Чтобы в полной мере воспользоваться преимуществами стратегии OnPush, рекомендуется использовать неизменяемые структуры данных. Неизменяемые данные гарантируют, что ссылка на объект не изменится, что упрощает эффективное обнаружение изменений в Angular. Такие библиотеки, как Immutable.js или Immer.js, помогут вам эффективно работать с неизменяемыми данными.

Метод 3: входные свойства и декоратор @Input
Стратегия OnPush в значительной степени зависит от входных свойств. Используя декоратор @Input, вы можете пометить свойства компонента как входные и гарантировать, что обнаружение изменений сработает только при изменении этих свойств. Вот пример:

import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MyComponent {
  @Input() data: any;
}

Метод 4: использование Observables с асинхронным каналом
При работе с асинхронными данными использование Observables в сочетании с каналом asyncможет повысить производительность вашего приложения. Канал asyncавтоматически управляет подпиской и отменяет подписку при уничтожении компонента. Это позволяет избежать ненужных циклов обнаружения изменений. Вот пример:

<p>{{ data$ | async }}</p>

Стратегия обнаружения изменений OnPush — это мощный метод оптимизации производительности вашего приложения Angular. Применяя стратегию OnPush, отмечая компоненты знаком ChangeDetectionStrategy.OnPush, работая с неизменяемыми структурами данных и эффективно используя входные свойства и Observables, вы можете значительно сократить количество циклов обнаружения изменений и повысить общую скорость реагирования вашего приложения..