Какие знаешь жизненные циклы компонента в Angular?

Жизненный цикл компонента в Angular

В Angular жизненный цикл компонента — это последовательность этапов, которые компонент проходит от момента создания до уничтожения. Эти этапы управляются механизмом Change Detection и позволяют разработчику вмешиваться в ключевые моменты существования компонента, выполняя необходимую логику. Angular предоставляет набор Lifecycle Hooks (хуков жизненного цикла), которые являются методами интерфейсов, имплементируемых компонентом.

Основные хуки жизненного цикла

В порядке их вызова:

1. ngOnChanges() — вызывается при первой инициализации компонента и затем каждый раз, когда изменяются входные свойства (@Input()). Получает объект SimpleChanges, содержащий предыдущие и текущие значения.
2. ngOnInit() — вызывается один раз после первой инициализации входных свойств. Здесь выполняется основная логика начальной установки компонента (например, запросы к API).
3. ngDoCheck() — вызывается при каждом запуске механизма проверки изменений. Позволяет реализовать собственную, кастомную логику проверки изменений.
4. ngAfterContentInit() — вызывается один раз после того, как содержимое, проецируемое в компонент через <ng-content> (Content Projection), было полностью инициализировано.
5. ngAfterContentChecked() — вызывается после каждой проверки проецируемого содержимого.
6. ngAfterViewInit() — вызывается один раз после полной инициализации дочерних компонентов и шаблона данного компонента.
7. ngAfterViewChecked() — вызывается после каждой проверки дочерних компонентов и шаблона.
8. ngOnDestroy() — вызывается непосредственно перед уничтожением компонента. Здесь необходимо выполнять очистку: отписываться от наблюдаемых (Observable), удалять listeners, чтобы предотвратить утечки памяти.

Практический пример использования

Рассмотрим компонент, который получает данные через @Input() и загружает дополнительные данные при инициализации.

import { Component, Input, OnInit, OnChanges, SimpleChanges, OnDestroy } from '@angular/core';
import { DataService } from './data.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-example',
  template: `<div>{{ userData }}</div>`
})
export class ExampleComponent implements OnInit, OnChanges, OnDestroy {
  @Input() userId: number;
  userData: any;
  private dataSubscription: Subscription;

  constructor(private dataService: DataService) {}

  // Реагируем на изменения входного свойства userId
  ngOnChanges(changes: SimpleChanges): void {
    if (changes['userId'] && changes['userId'].currentValue !== changes['userId'].previousValue) {
      console.log(`UserId changed from ${changes['userId'].previousValue} to ${changes['userId'].currentValue}`);
      // Можно сразу выполнить действие при изменении, но часто логику переносят в ngOnInit
    }
  }

  // Основная инициализация компонента
  ngOnInit(): void {
    if (this.userId) {
      this.loadUserData(this.userId);
    }
  }

  private loadUserData(id: number): void {
    this.dataSubscription = this.dataService.getUser(id).subscribe(data => {
      this.userData = data;
    });
  }

  // Очистка перед уничтожением компонента
  ngOnDestroy(): void {
    if (this.dataSubscription) {
      this.dataSubscription.unsubscribe();
    }
    console.log('Component destroyed, subscription cleaned up.');
  }
}

Ключевые моменты и особенности

• Порядок вызова: При первом создании компонента вызывается ngOnChanges() (если есть @Input()), затем ngOnInit(), ngDoCheck(), ngAfterContentInit(), ngAfterContentChecked(), ngAfterViewInit() и ngAfterViewChecked(). При дальнейших проверках изменений (например, после событий, таймеров, асинхронных операций) вызываются ngOnChanges() (при изменении @Input()), ngDoCheck(), ngAfterContentChecked() и ngAfterViewChecked().
• ngOnInit() vs constructor: Логику инициализации компонента следует помещать в ngOnInit(), а не в конструктор. Конструктор используется для инъекции зависимостей, в то время как ngOnInit() гарантирует, что входные свойства уже установлены.
• Кастомная проверка изменений: Хук ngDoCheck() позволяет реализовать собственную, часто более эффективную, логику отслеживания изменений для сложных объектов. Однако его использование требует глубокого понимания механизма Change Detection, чтобы не нарушить его работу.
• Одноразовые и многократные хуки: ngOnInit(), ngAfterContentInit() и ngAfterViewInit() вызываются один раз. Остальные хуки могут вызываться многократно.
• Важность ngOnDestroy(): Этот хук критически важен для предотвращения утечек памяти в Angular приложениях. Все подписки на Observable, интервалы (setInterval), обработчики событий, добавленные вне Angular механизмов, должны быть очищены здесь.

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