В этой статье мы рассмотрим следующие темы, связанные с обнаружением изменений и его стратегиями.

Оглавление:

  • Что такое обнаружение изменений?
  • Как изменить работу обнаружения
  • Представление
  • Что такое изменяемые и неизменяемые объекты
  • Внедрение стратегии OnPush
  • Вывод

Что такое обнаружение изменений?

При обнаружении изменений angular проверит или сравнит текущие и новые значения. Если есть изменение значения, нам нужно отобразить представление или обновить представление, чтобы отразить новое изменение. При обнаружении изменений он будет проверять такие события, как (отправить, щелкнуть…), таймеры, такие как (setTimout(), setInterval()…) и вызовы AJAX или запросы XHR (получить данные с удаленного сервера). Все они являются асинхронными операциями. В Angular всякий раз, когда выполняются асинхронные операции, angular ожидает любых изменений в представлении. Таким образом, с помощью этого угла получите представление об обновлении представления или повторном отображении представления.

Как изменить работу обнаружения

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

В Angular каждое приложение состоит из нескольких компонентов, и эти компоненты связаны друг с другом из-за передачи данных от одного компонента к другому. Также создание отношения родитель-потомок и потомок-родитель с помощью декораторов @Input и @output. Итак, в Angular каждый компонент имеет собственное обнаружение изменений. Попробуем разобраться с помощью дерева компонентов.

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

Давайте возьмем пример, попробуем понять, когда именно начинается обнаружение изменений и как оно начинается сверху вниз. Наш первый компонент — HeaderComponent. В этом компоненте мы просто получаем входные данные от родительского компонента. Используйте ввод в качестве декоратора. Как показано ниже.

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

В AppComponent мы устанавливаем имя заголовка в объекте headerData и передаем этот объект дочернему компоненту, которым является HeaderComponent. Давайте перейдем к моменту, когда мы инициируем обнаружение изменений, которое является методом changeHeaderName. В этом методе мы собираемся изменить свойство headerData изменяемого объекта. Процесс обнаружения изменений Angular начнется от корня до конца и проверит все дочерние компоненты для обновления DOM. Давайте попробуем понять из изображения ниже:

Что такое изменяемый объект?

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

Теперь мы можем сказать, что это идеальный пример изменяемого объекта, и причина в том, что когда мы модифицируем объект «obj1», он также изменяет объект «obj», потому что obj1 имеет ссылку на obj. Когда мы изменяем значение свойства «сообщение» в объекте «obj1», оно также отражает изменение в объекте «obj». Это называется изменяемым объектом (изменить или изменить данные).

Производительность:

Angular поведение обнаружения изменений по умолчанию может вызвать проблемы с производительностью. Когда есть сотни дочерних компонентов и этот случай ожидается в больших или сложных проектах. Angular проверяет каждый дочерний компонент и сравнивает старые значения с новыми значениями в сотне компонентов. Теперь стоимость производительности очень высока, возможно, приложение застрянет или зависнет на каком-то уровне. Чтобы избежать обхода Angular всех дочерних компонентов, нам нужно изменить поведение Angular по умолчанию. Это означает, что мы должны запустить процесс обнаружения изменений или пройтись по дочерним компонентам, когда это необходимо, или когда значения изменяются, а затем обновить DOM. Без каких-либо изменений нам не нужно запускать процесс обнаружения изменений. Теперь это тот момент, когда появляется неизменяемый объект и показывает свою роль. Angular определяет название стратегии как «Стратегия OnPush». В этой стратегии ключевую роль играют неизменяемые объекты. Итак, сначала мы проверяем, как работает неизменяемый объект, а затем углубимся в стратегию OnPush.

Что такое неизменяемый объект?

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

В этом примере мы видим, что исходный объект (личный) не меняет своего состояния. Для реализации immutable у нас есть следующие подходы:

Используйте метод Object.assisgn(target, …sources).

Используйте Object.freeze().

Используйте оператор спреда(…) (в примере выше мы его использовали).

Реализуйте стратегию OnPush:

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

Прежде всего, добавьте обнаружение изменений в декораторе @component, как показано ниже.

После добавления стратегии обнаружения изменений, если мы запустим код и нажмем кнопку «Изменить заголовок», ничего не изменится. Причина в том, что мы изменили стратегию обнаружения изменений angular по умолчанию на стратегию OnPush. Итак, теперь сосредоточившись на том, как инициировать изменение в DOM, давайте перейдем к следующему шагу, как вы знаете, чтобы изменить ссылку на объект, а не свойство, чтобы инициировать процесс обнаружения изменений.

Применение изменения в методе changeHeaderName().

Таким образом, стратегия OnPush проверяет ссылки на объект, а не сравнивает глубокие значения. Таким образом, это улучшает производительность.

Вывод:

В этой статье мы узнали, что в Angular есть две стратегии обнаружения изменений. Во-первых, это стратегия по умолчанию, которая сравнивает старое значение с новым, если оно изменяется, обновляет DOM и отражает изменение в представлении. Но в этой стратегии у нас есть проблема с производительностью, потому что она запускает процесс обнаружения изменений сверху вниз. Взамен стратегии по умолчанию у нас есть другая стратегия, стратегия OnPush, которая связана со ссылкой на объекты, а не со свойствами объектов. Если ссылка изменена, запускается процесс обнаружения изменений и обновляется DOM. Это повышает производительность по сравнению со стратегией по умолчанию.

Ну наконец то! Поздравляем ⛳️ вы успешно изучили обнаружение изменений и его стратегии. Не забудьте нажать на значок хлопка 👏. Спасибо!!!