Virtual DOM в Angular

Virtual DOM (виртуальный DOM) — это концепция, используемая в ряде библиотек и фреймворков для повышения производительности веб-приложений при изменении пользовательского интерфейса. Основные принципы Virtual DOM и его взаимодействие с Angular можно объяснить следующим образом:

Что такое Virtual DOM?

Определение:

Virtual DOM — это абстрактное представление реального DOM (Document Object Model). Это дерево объектов, представляющее структуру пользовательского интерфейса, которое существует только в памяти.

Как работает:

Создание Virtual DOM: При создании или обновлении компонента создается виртуальное дерево, которое представляет текущее состояние UI.
Сравнение: Когда происходит изменение состояния компонента, создается новое виртуальное дерево, которое затем сравнивается с предыдущим состоянием с помощью процесса, называемого diffing (сравнение).
Обновление: После сравнения определяются изменения, которые были сделаны, и затем только эти изменения применяются к реальному DOM. Это минимизирует количество операций на реальном DOM, которые могут быть медленными и ресурсоёмкими.

Angular и Virtual DOM

В отличие от React, который активно использует Virtual DOM, Angular (особенно Angular 2 и более поздние версии) не использует Virtual DOM в традиционном смысле. Вместо этого Angular применяет другой подход для управления изменениями в пользовательском интерфейсе:

Change Detection (Обнаружение изменений):

Angular использует механизм обнаружения изменений (Change Detection) для отслеживания изменений в данных и обновления DOM. Когда данные в компоненте изменяются, Angular проверяет, нужно ли обновить соответствующие части пользовательского интерфейса.
Angular использует стратегии обнаружения изменений, такие как Default и OnPush, для управления тем, как часто и когда обновляется DOM.

Иерархия компонентов:

Каждый компонент в Angular имеет собственный экземпляр детектора изменений, который отслеживает изменения в его данных и при необходимости обновляет DOM.

Индексация и оптимизация:

Angular предоставляет возможности для оптимизации, такие как trackBy в *ngFor, чтобы избежать повторных операций на DOM при рендеринге списков. Это помогает уменьшить количество изменений в DOM, аналогично тому, как Virtual DOM оптимизирует обновления.

Angular Ivy:

В Angular 9 и более поздних версиях Angular использует новый рендеринг движок Ivy, который улучшает производительность и уменьшает размер бандлов, но это не связано напрямую с Virtual DOM. Ivy оптимизирует работу с реальным DOM и делает его более эффективным.

Сравнение подходов

Virtual DOM (например, React):

Создаёт виртуальное представление DOM в памяти.
Сравнивает виртуальные деревья и применяет минимальные изменения к реальному DOM.
Оптимизирован для частых и динамических изменений в интерфейсе.

Change Detection (например, Angular):

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

Пример из Angular

В Angular, если у вас есть компонент с данным состоянием, который изменяется, Angular будет отслеживать это изменение и обновлять только те части DOM, которые изменились:

@Component({
  selector: 'app-example',
  template: `<div>{{message}}</div>`
})
export class ExampleComponent {
  message: string = 'Hello, World!';

  constructor() {
    setTimeout(() => {
      this.message = 'Hello, Angular!';
    }, 1000);
  }
}

В этом примере, когда значение message изменяется, Angular обнаруживает это изменение и обновляет DOM только для элемента, где используется {{message}}.