Что такое жизненный цикл компонента? Перечислите основные хуки.angular-18

Определение жизненного цикла

Жизненный цикл компонента — это последовательность этапов, через которые проходит компонент от создания до уничтожения. Angular предоставляет "хуки" (hooks) — специальные методы, которые вызываются на каждом из этих этапов, позволяя разработчику внедрять свою логику.

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

1. ngOnChanges

• Когда вызывается: Перед ngOnInit() и при каждом изменении входных свойств (@Input)
• Назначение: Реагирование на изменения входных данных
• Пример:

@Input() user: User;

ngOnChanges(changes: SimpleChanges) {
  if (changes.user) {
    console.log('User changed:', changes.user.currentValue);
  }
}

2. ngOnInit

• Когда вызывается: После первого ngOnChanges() (один раз)
• Назначение: Инициализация компонента, загрузка данных
• Пример:

ngOnInit() {
  this.loadData();
  this.subscribeToUpdates();
}

3. ngDoCheck

• Когда вызывается: При каждом запуске механизма обнаружения изменений
• Назначение: Кастомная логика проверки изменений
• Пример:

ngDoCheck() {
  if (this.user.name !== this.previousName) {
    this.doSomething();
  }
}

4. ngAfterContentInit

• Когда вызывается: После первого проецирования контента (ng-content)
• Назначение: Работа с проекционным контентом
• Пример:

@ContentChild('header') header: ElementRef;

ngAfterContentInit() {
  console.log('Content projected:', this.header);
}

5. ngAfterContentChecked

• Когда вызывается: После каждой проверки проекционного контента
• Назначение: Реакция на изменения проекционного контента

6. ngAfterViewInit

• Когда вызывается: После инициализации представления (дочерних компонентов)
• Назначение: Работа с дочерними компонентами и DOM
• Пример:

@ViewChild(ChildComponent) child: ChildComponent;

ngAfterViewInit() {
  this.child.doSomething();
}

7. ngAfterViewChecked

• Когда вызывается: После каждой проверки представления
• Назначение: Реакция на изменения в представлении

8. ngOnDestroy

• Когда вызывается: Перед уничтожением компонента
• Назначение: Очистка ресурсов, отписки
• Пример:

private subscription: Subscription;

ngOnDestroy() {
  this.subscription.unsubscribe();
  this.cleanupResources();
}

Последовательность вызова хуков

1. Создание компонента → Конструктор
2. ngOnChanges() (если есть @Input)
3. ngOnInit()
4. ngDoCheck()
5. ngAfterContentInit()
6. ngAfterContentChecked()
7. ngAfterViewInit()
8. ngAfterViewChecked()
9. (Повторяющиеся при изменениях)
10. ngOnDestroy()

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

Инициализация данных

ngOnInit() {
  this.userService.getUser().subscribe(user => {
    this.user = user;
  });
}

Очистка ресурсов

private intervalId: any;

ngOnInit() {
  this.intervalId = setInterval(() => {
    this.updateData();
  }, 1000);
}

ngOnDestroy() {
  clearInterval(this.intervalId);
}

Работа с ViewChild

@ViewChild('inputElement') input: ElementRef;

ngAfterViewInit() {
  this.input.nativeElement.focus();
}

Оптимизация производительности

1. Избегайте тяжелых операций в ngDoCheck(), ngAfterViewChecked()
2. Используйте OnPush стратегию для уменьшения вызовов проверок
3. Оптимизируйте ngOnChanges() с помощью сравнения изменений

Резюмируем

1. 8 основных хуков жизненного цикла:

   • Инициализация: ngOnChanges, ngOnInit
   • Проверки: ngDoCheck, ngAfterContentChecked, ngAfterViewChecked
   • Представление: ngAfterContentInit, ngAfterViewInit
   • Уничтожение: ngOnDestroy

2. Ключевые рекомендации:

   • Загрузку данных - в ngOnInit()
   • Очистку - в ngOnDestroy()
   • Работу с DOM - после ngAfterViewInit()

3. Важность понимания:

   • Для правильной инициализации компонентов
   • Для предотвращения утечек памяти
   • Для оптимизации производительности

Понимание жизненного цикла критически важно для:

• Создания стабильных Angular-приложений
• Эффективного управления ресурсами
• Отладки сложных сценариев работы компонентов