Otimizar a detecção de alterações do Angular's

Implemente uma detecção de mudanças mais rápida para melhorar a experiência do usuário.

Minko Gechev

O Angular executa o mecanismo de detecção de mudanças periodicamente para que as alterações no modelo de dados sejam refletidas na visualização de um app. A detecção de mudanças pode ser acionada manualmente ou por um evento assíncrono (por exemplo, uma interação do usuário ou uma conclusão de XHR).

A detecção de mudanças é uma ferramenta poderosa, mas, se for executada com muita frequência, pode acionar muitos cálculos e bloquear a linha de execução principal do navegador.

Nesta postagem, você vai aprender a controlar e otimizar o mecanismo de detecção de mudanças ignorando partes do aplicativo e executando a detecção de mudanças apenas quando necessário.

Dentro da detecção de mudanças do Angular

Para entender como a detecção de mudanças do Angular funciona, vamos analisar um app de exemplo.

O código do app está disponível neste repositório do GitHub.

O app lista funcionários de dois departamentos de uma empresa (vendas e P&D) e tem dois componentes:

  • AppComponent, que é o componente raiz do app, e
  • Duas instâncias de EmployeeListComponent, uma para vendas e outra para P&D.

Exemplo de aplicativo

Você pode ver as duas instâncias de EmployeeListComponent no modelo de AppComponent:

<app-employee-list
  [data]="salesList"
  department="Sales"
  (add)="add(salesList, $event)"
  (remove)="remove(salesList, $event)"
></app-employee-list>

<app-employee-list
  [data]="rndList"
  department="R&D"
  (add)="add(rndList, $event)"
  (remove)="remove(rndList, $event)"
></app-employee-list>

Para cada funcionário, há um nome e um valor numérico. O app transmite o valor numérico do funcionário para um cálculo comercial e mostra o resultado na tela.

Agora confira EmployeeListComponent:

const fibonacci = (num: number): number => {
  if (num === 1 || num === 2) {
    return 1;
  }
  return fibonacci(num - 1) + fibonacci(num - 2);
};

@Component(...)
export class EmployeeListComponent {
  @Input() data: EmployeeData[];
  @Input() department: string;
  @Output() remove = new EventEmitter<EmployeeData>();
  @Output() add = new EventEmitter<string>();

  label: string;

  handleKey(event: any) {
    if (event.keyCode === 13) {
      this.add.emit(this.label);
      this.label = '';
    }
  }

  calculate(num: number