> Что такое Lifecycle Hooks в Angular и какие из них используются? (Angular)

Короткий ответ

Lifecycle hooks - это методы в Angular, которые вызываются автоматически на разных этапах жизни компонента или директивы. Основные hooks: ngOnChanges, ngOnInit, ngDoCheck, ngAfterContentInit, ngAfterContentChecked, ngAfterViewInit, ngAfterViewChecked и ngOnDestroy. Наиболее часто используются ngOnInit для инициализации данных и ngOnDestroy для очистки ресурсов.

Подробное объяснение

Lifecycle hooks в Angular - это интерфейсы, которые компонент или директива могут реализовать для выполнения кода в определённые моменты своего жизненного цикла. Angular вызывает эти методы в строгом порядке:

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

Порядок выполнения для родительского и дочернего компонентов: сначала hooks родителя, затем дочернего, за исключением ngAfterViewInit и ngAfterViewChecked, которые выполняются снизу вверх.

На практике

Наиболее часто используемые hooks:

• ngOnInit - для загрузки данных, инициализации форм, подписки на сервисы.
• ngOnDestroy - для отписки от observable (через takeUntil или unsubscribe), очистки интервалов/таймаутов, удаления event listeners.
• ngOnChanges - для реакций на изменения входных данных, валидации или трансформации.
• ngAfterViewInit - для работы с DOM элементами после их рендера, интеграции с сторонними библиотеками.

Важно помнить, что ngDoCheck вызывается очень часто (при каждом change detection cycle), поэтому его использование должно быть минимальным для избежания проблем с производительностью.

Пример кода

TYPESCRIPT
import { Component, OnInit, OnDestroy, OnChanges, SimpleChanges, Input } from '@angular/core';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-user-profile',
  template: `<h2>{{ user.name }}</h2>`
})
export class UserProfileComponent implements OnInit, OnDestroy, OnChanges {
  @Input() user: any;
  private subscription: Subscription;

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

  ngOnInit(): void {
    console.log('Component initialized');
    this.subscription = someService.getData().subscribe();
  }

  ngOnDestroy(): void {
    if (this.subscription) {
      this.subscription.unsubscribe();
    }
    console.log('Component destroyed, subscription cleaned');
  }
}

Как отвечать на собеседовании

Начни с краткого определения lifecycle hooks и их назначения. Перечисли основные hooks в порядке выполнения, выделив самые важные (ngOnInit, ngOnDestroy). Приведи практический пример использования каждого из них. Упомяни, что hooks реализуются через интерфейсы (например, implements OnInit). Если спросят про порядок выполнения, объясни разницу между родительским и дочерним компонентами. Не углубляйся в редкие hooks, если не спрашивают специально.

Что проверяет интервьюер

• Понимание жизненного цикла компонента и порядка вызова hooks.
• Знание, какие hooks обязательны, а какие опциональны.
• Умение применять hooks на практике (особенно ngOnInit и ngOnDestroy).
• Понимание разницы между hooks для контента и представления.
• Осознание проблем производительности при неправильном использовании ngDoCheck.

Типичные ошибки

• Путаница между ngOnInit и конструктором - конструктор вызывается до hooks и не должен содержать бизнес-логику.
• Забывают реализовать интерфейс (например, implements OnInit) - хотя Angular вызовет метод и без него, это считается плохой практикой.
• Не отписываются от observable в ngOnDestroy, что приводит к утечкам памяти.
• Используют ngDoCheck для частых операций, вызывая проблемы с производительностью.
• Пытаются изменять входные свойства внутри ngOnChanges, что может вызвать бесконечный цикл.
• Путают ngAfterViewInit и ngAfterContentInit - первый для шаблона компонента, второй для проецированного контента.