Стратегия обнаружения изменений Angular: стратегии OnPush и стратегии по умолчанию

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

Любое изменение, которое происходит в компонентах во время изменения приложения, обнаруживается через Angular 2+. Всякий раз, когда модель изменяется, соответствующие изменения обнаруживаются angular, и представления немедленно обновляются. Это изменение называется обнаружением изменения в angular.

Изменение может быть результатом данных, полученных из сетевых запросов, или произойти через пользовательское событие. С увеличением размера приложения приходится выполнять больше работы с помощью метода обнаружения изменений. Угловое обнаружение необходимо для синхронизации между базовыми представлениями и соответствующими моделями.

Изменение угловой модели может быть вызвано любой из следующих причин:

• События DOM (щелчок, наведение и т. д.)
• AJAX-запросы
• Таймеры (setTimer(), setInterval())

Предпосылки

Чтобы получить доступ к этой статье, вам, возможно, придется познакомиться с концепциями угловых компонентов. Кроме того, концепции типов значений и ссылочных типов могут быть полезны для понимания статьи.

Обнаружение изменений в Angular

Обнаружение изменений в angular выполняется в два этапа, первый из которых — обновление модели приложения через разработчика. Ему может предшествовать либо генерация события, либо изменение свойства компонента. Второй шаг, т.е. работа углового по отражению модели. Он определяет, вводятся ли какие-либо новые данные в компонент явным образом. Это можно сделать либо через компонент, либо через Observable, на который подписан асинхронный канал.

Таким образом, два шага:

• Обновить модель приложения (разработчик);
• Отражать состояние модели в представлении (Angular).

Обнаружение изменений в angular обнаруживает изменения общих событий браузера, таких как щелчки мыши, HTTP-запросы и другие типы событий. После обнаружения изменения решается, требуется ли обновление представления или нет.

Стратегии обнаружения изменений

Присутствуют две стратегии обнаружения угловых изменений : стратегия по умолчанию и onPush.

Стратегия по умолчанию

• Изменения в модели отслеживаются angular, чтобы убедиться, что все изменения в модели зафиксированы. Различия между новым и предыдущим состоянием проверяются с помощью angular.
• Чтобы представление было обновлено, угловой должен иметь доступ к новому значению, которое затем сравнивается со старым значением. На основании этого принимается решение, обновлять вид или нет.
• Поэтому в стратегии по умолчанию угловой вращается вокруг вопроса о том, есть ли какие-либо изменения в значении.
• Нет никаких предположений относительно того, от чего зависят компоненты. Это консервативная стратегия, которая проверяет каждый раз, когда есть связанное изменение. Проверки будут выполняться для любых событий браузера, времени, промисов и XHR.
• Стратегия может быть проблематичной, когда необходимо рассматривать большие приложения со многими компонентами.
• По умолчанию используется стратегия ChangeDetectionStrategy.Default .

Переопределение механизмов браузера по умолчанию

• Несколько низкоуровневых API будут исправлены angular во время запуска. Эти API могут быть addEventListener; функция браузера, которая используется для регистрации событий просмотра.
• addEventListener будет заменен на angular более новой версией, работающей так же, как и предыдущая версия .
• В новой версии addEventListener к обработчику событий добавлены дополнительные функциональные возможности . Пользовательский интерфейс обновляется после запуска проверки производительности с помощью angular.

Работающий

Библиотека, поставляемая с Zone.js, выполняет низкоуровневое исправление API браузера.

• Зона определяется как содержимое выполнения в рамках нескольких циклов выполнения JVM. С помощью этого механизма в браузер можно добавить дополнительные функции. Зоны используются внутри angular для обнаружения любых изменений и запуска обнаружения.
• Обычно в зоне есть три фазы, т. е. она стабильна в начале, становится нестабильной, если в зоне выполняется какая-либо задача, и становится стабильной после завершения задачи.
• Механизм браузера, исправленный для поддержки обнаружения изменений:

1. события браузера, такие как щелчок и т. д.
2. setInterval() и setTimeout()
3. Запросы Ajax HTTP

• Чтобы инициировать обнаружение изменений в angular, Zone.js используется для исправления нескольких API-интерфейсов другого браузера, например Websockets.
• Ограничение этого метода: если Zone.js не поддерживает API браузера, то при обнаружении изменений не будет срабатывания триггера.

Как работает обнаружение угловых изменений при срабатывании обнаружения изменений?

Инициированные изменения обнаруживаются с помощью детектора изменений. Этот детектор изменений создается во время запуска приложения. Можно рассмотреть пример компонента TodoItem . Событие будет сгенерировано при получении объекта Todo компонентом, если статус todo переключается. Узнайте больше о том, как запускать проекты angular.

Работа механизма обнаружения изменений по умолчанию

Механизм обнаружения изменений прост. В каждом выражении текущее значение свойства сравнивается со значением этого свойства в предыдущем состоянии в выражении.

• Наличие разницы в значении свойства установит значение true для isChanged .

2. Стратегия OnPush

• При использовании стратегии onPush угловому не нужно делать никаких предположений о том, когда должна быть выполнена проверка.
• На основе изменения входной ссылки или событий, инициированных самими компонентами, angular выполнит проверку на наличие изменений.
• Кроме того, angular можно явно попросить выполнить проверку на наличие изменений. Это делается с помощью метода componentRef.markForCheck().
• Компоненты во время этой стратегии будут зависеть только от ее входов. Стратегия обнаружения изменений будет выполняться только в том случае, если:

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

• По сравнению со стратегией по умолчанию, стратегия onpush в основном вращается вокруг двух вопросов:

• Есть ли какие-либо изменения в типе ссылки?
• Если есть изменения в ссылке ссылочного типа, то есть ли изменения в значениях памяти кучи?

• Это предотвращает ненужные проверки компонентов, а также дочерних компонентов.

Реализация стратегии onPush для компонента

Только когда новая ссылка передается как значение @Input() , она запускает обнаружение изменений. Значения могут быть примитивными типами, такими как числа, логические значения, строки и нулевые значения. Также можно использовать массивы и объекты. Измененные объекты или массивы нельзя использовать для запуска обнаружения изменений в компоненте onPush , поскольку для них не создается новая ссылка. Следовательно, необходимо передать новый объект или ссылку на массив, чтобы сработал детектор, обнаруживающий изменение.

Чтобы избежать багов в методах обнаружения изменений, приложение можно построить с использованием обнаружения изменений onPush везде за счет использования неизменяемых объектов и списков. Модификация неизменяемых объектов может быть выполнена путем создания новой ссылки на объект и, следовательно:

• Для каждого изменения запускается обнаружение изменений onPush .
• Всегда создается новая ссылка на объект, что предотвращает возникновение ошибок.

В таких случаях можно использовать Immutable.js, поскольку он содержит неизменяемые структуры данных для объектов (Map) и списков (List).

• Добавление параметра changeDetection в аннотацию компонента реализует стратегию onPush. Вместо того, чтобы каждый раз передавать новые ссылки, ChangeDetectorRef также можно использовать для полного контроля.

ChangeDetectorRef.detectChanges()

• Метод обнаружения изменений можно подключить или отключить вручную с помощью методов отключения и повторного подключения в файле changeDetectorRef.

ChangeDetectorRef.detach() и Неизменяемый.js

При использовании стратегии onPush для обнаружения изменений всегда полезно применять неизменяемость. В таких случаях используется Immutable.js.

immutable.js — это библиотека, созданная для включения неизменяемости в JavaScript вместе с неизменяемыми структурами данных, такими как список, стек и карта.

Чтобы добавить Immutable.js в проекты, в терминале необходимо использовать следующую команду. Узнайте больше об угловых проектах.

$ npm установить неизменяемый — сохранить

Чтобы импортировать структуры данных из Immutable.js, необходимо использовать следующую команду. В этом случае команда показывает импорт только структур данных List и Map.

импортировать {Map, List} из «неизменяемого» Также можно использовать массив.

Также, если используется Immutable.js, с ним связано несколько недостатков.

• Использование API немного громоздко.
• Интерфейсы не могут быть реализованы в модели данных, так как библиотека Imutable.js не поддерживает никаких интерфейсов.

Изучайте онлайн-курсы по программному обеспечению от лучших университетов мира. Участвуйте в программах Executive PG, Advanced Certificate Programs или Master Programs, чтобы ускорить свою карьеру.

Резюме

Статья познакомила вас с механизмом обнаружения изменений и стратегиями. По умолчанию Angular будет выполнять обнаружение изменений для всех компонентов. Кроме того, ChangeDetectorRef можно применять для обнаружения изменений в новых ссылках при изменении данных. Спрос на угловую разработку продолжает расти, что приводит к увеличению заработной платы разработчиков углов в Индии.

Если вы хотите узнать больше о программных технологиях, их разработке и механизмах, лежащих в их основе, вы можете проверить курс Executive PG Program in Software Development — Specialization in Full Stack Development, предлагаемый upGrad. Курс специализации представляет собой 23-недельную онлайн-программу, предлагающую более 300 тематических исследований для повышения ваших знаний и доступных инструментов и языков программирования для улучшения ваших практических навыков. Если у вас есть еще вопросы, связанные с курсом, напишите нам. Наша команда свяжется с вами.