компилируется...
Перейти к основному содержанию
Рекомендовать во Вконтакте Рекомендовать в Фейсбуке Рекомендовать в Твиттере

Как работает обнаружение изменений в Angular

Обнаружение изменений - это стратегия, с помощью которой Angular определяет, какие действия необходимо выполнить при изменении состояния приложения или компонента.

Изменения состояния компонентов могут быть вызваны такими действиями пользователя, как нажатие кнопки, изменение input значений, HTTP-запросы и т.д.

Например, если у нас есть компонент, который показано ниже:

Код app.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'Обычный заголовок.';

  changeTitle() {
    this.title = 'Новый заголовок!';
  }
}

Код app.component.html:

<button (click)="changeTitle()">Изменить заголовок</button>

Здесь мы видим, что когда пользователь взаимодействует с приложением, нажимая кнопку "Именить заголоок", свойство заголовка компонента изменяется.

Каждый компонент в Angular оснащен детектором изменений, который отслеживает изменение состояния.

Как мы все знаем, Angular приложение представляет собой дерево компонентов. Таким образом, для каждого компонента в дереве у нас есть соответствующий детектор изменений, созданный при запуске приложения.

Так что в итоге мы получим дерево детекторов изменений.

При изменении состояния одного из компонентов, независимо от того, где он находится в дереве, для всего дерева запускается процесс обнаружения изменений. Это происходит потому, что Angular сканирует на предмет изменений от верхнего узла дерева компонентов, вплоть до нижних узлов дерева.

Поэтому по мере увеличения размера приложения эта проверка может привести к снижению производительности. Но есть способы настроить стратегию обнаружения изменений.

Оптимизация стратегии обнаружения изменений

Один из способов оптимизации заключается в том, чтобы сказать Angular запускать обнаружение изменений на компоненте только при изменении Input (@Input())свойств.

Теперь, если мы хотим изменить этот компонент только при изменении его Input атрибута, нам просто нужно изменить стратегию обнаружения, установив его атрибут changeDetection на ChangeDetectionStrategy.OnPush.

Значением по умолчанию для атрибута changeDetection является ChangeDetectionStrategy.Default. В следующем компоненте мы изменили атрибут декоратора компонента changeDetection на ChangeDetectionStrategy.OnPush.

import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';

@Component({
  selector: 'app-message',
  templateUrl: './message.component.html',
  styleUrls: ['./message.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MessageComponent implements OnInit {

  @Input() message: string;

  constructor() { }

  ngOnInit() {
  }

}

При изменении changeDetection на ChangeDetectionStrategy.OnPush цикл обнаружения изменений будет выполняться для данного компонента только при изменении одного из его входных атрибутов (в данном примере @Input() message). Изменение других компонентов дерева не привелёт к срабатыванию детектора изменений этого компонента.

Примечание: Angular использует библиотеку Zone.js для обнаружения изменений и запуска цикла обнаружения изменений.

Zone.js автоматически сообщит Angular о том, что что-то изменилось в соответствии с наиболее распространенными сценариями, когда:

  • Происходит событие DOM (например, щелчок, изменение на инпуте и т.д.).
  • Завершится HTTP-запрос.
  • Сработает таймер (например, setTimeout, setInterval).

Комментарии

Пока что нет комментариев, вы можете быть первым.
Войти или Регистрация , чтобы оставлять комментарии.

Лучшие публикации

Популярные теги

Наш сайт использует куки. Узнайте больше о нашем использовании куки: политика в отношении файлов cookie
Наш сайт существует только благодаря показу онлайн-рекламы нашим посетителям.
Пожалуйста, поддержите нас, отключив блокировку рекламы.