Change Detection | Angular

• Change Detection | Angular

Estratégias de Detecção de Mudanças no Angular

O Angular é um framework para criação de aplicações web que possui um sistema de detecção de mudanças robusto, capaz de manter a interface do usuário sincronizada com o modelo de dados. Neste guia, vamos entender como o Angular lida com a detecção de mudanças e como você pode otimizar sua aplicação utilizando diferentes estratégias de detecção de mudanças.

O Que é a Detecção de Mudanças?

A detecção de mudanças no Angular é o mecanismo que verifica quando os dados no modelo (componentes, variáveis, etc.) mudam e atualiza a view (interface) automaticamente para refletir essas mudanças.

Como Funciona a Detecção de Mudanças?

O processo de detecção de mudanças no Angular ocorre em duas etapas principais:

1. O desenvolvedor faz uma alteração no modelo da aplicação, como, por exemplo, modificando uma variável vinculada ao template de um componente.
2. O Angular detecta essa mudança e sincroniza a atualização da view (DOM) para refletir a alteração.

Sempre que um evento ocorre que pode alterar o modelo de dados, o ciclo de detecção de mudanças é acionado. Esses eventos podem ser:

• Eventos do navegador (cliques, teclas pressionadas, mouseover, etc.)
• Métodos assíncronos como setTimeout() e setInterval()
• Requisições HTTP

Como o Angular Detecta Mudanças?

O Angular utiliza o Zone.js, uma biblioteca que permite rastrear operações assíncronas. Quando uma operação assíncrona é executada, o Angular sabe que a mudança ocorreu e aciona a detecção de mudanças.

• NgZone: O Angular usa uma zona especial chamada NgZone, que rastreia operações assíncronas para garantir que a detecção de mudanças seja acionada somente para eventos dentro dessa zona.

Estratégias de Detecção de Mudanças

O Angular oferece diferentes estratégias de detecção de mudanças, permitindo que você controle como e quando a árvore de componentes será verificada. A escolha da estratégia correta pode melhorar o desempenho da sua aplicação.

1. Estratégia de Detecção de Mudanças Padrão

Na estratégia padrão, o Angular verifica toda a árvore de componentes sempre que detecta uma mudança, buscando por diferenças entre os estados anteriores e atuais dos modelos.

• Como funciona: O Angular percorre a árvore de componentes, verificando se algum dado foi alterado. Essa abordagem garante que todas as visualizações estejam sincronizadas com os dados, mas pode ser ineficiente em aplicativos grandes.

• Desvantagem: A detecção de mudanças pode ser custosa, já que o Angular verifica todos os componentes a cada alteração no modelo.

2. Estratégia OnPush

A estratégia OnPush é uma otimização que permite que o Angular verifique apenas os componentes que realmente tiveram mudanças, ao invés de percorrer toda a árvore de componentes.

warning

O componente é checado apenas quando:

• A propriedade @Input é alterada
• Emissão de eventos
• A emissão de um Observable

• Como funciona: A estratégia OnPush verifica se a referência de um tipo de dado foi alterada. Se a referência do objeto ou array mudar, o Angular verifica os valores internos desse tipo de referência.

• Vantagens:

  • Melhor desempenho, pois o Angular só verifica os componentes que têm dados mutados.
  • Permite otimizar a renderização, especialmente quando você trabalha com grandes estruturas de dados.

• Como Implementar: Para usar a estratégia OnPush, basta adicionar o parâmetro changeDetection: ChangeDetectionStrategy.OnPush no decorador do componente.

  import { ChangeDetectionStrategy, Component } from '@angular/core';
  
  @Component({
    selector: 'app-onpush',
    templateUrl: './onpush.component.html',
    styleUrls: ['./onpush.component.css'],
    changeDetection: ChangeDetectionStrategy.OnPush
  })
  export class OnPushComponent {
    // seu código aqui
  }

• Exemplo de Imutabilidade: A estratégia OnPush funciona melhor quando você usa dados imutáveis. Quando você altera um objeto ou array, ao invés de modificar suas propriedades ou elementos, você cria uma nova instância do objeto ou array.

  const before = { foo: "bar" };
  let current = before;
  current = { foo: "hello" };  // nova referência
  
  console.log(before === current);  // false

  Dessa forma, o Angular poderá detectar a mudança facilmente, já que a referência do objeto foi alterada.

3. Combinando Estratégias de Detecção de Mudanças com Imutabilidade

Para aproveitar ao máximo a estratégia OnPush, é importante garantir que seus dados sejam imutáveis. Isso pode ser feito manualmente, ou você pode usar bibliotecas como Immutable.js, que fornecem tipos de dados imutáveis como List e Map.

• Exemplo com Immutable.js:

  import { List } from 'immutable';
  
  const helloWorld = List(["Hello", "World!"]);
  console.log(helloWorld.first());  // "Hello"
  console.log(helloWorld.last());   // "World!"

  A vantagem do uso de dados imutáveis é que, ao alterar uma estrutura de dados, você cria uma nova referência, o que facilita a detecção de mudanças pelo Angular.

4. Desvantagens de Usar Imutabilidade com OnPush

Embora o uso de imutabilidade e a estratégia OnPush ofereçam grandes vantagens em termos de desempenho, há algumas desvantagens:

• Complexidade: Trabalhar com dados imutáveis pode ser mais complexo do que com dados mutáveis, especialmente se você estiver acostumado com a manipulação direta de objetos e arrays em JavaScript.
• Performance: Embora a estratégia OnPush melhore o desempenho, a criação de novas instâncias de objetos e arrays pode ter um custo em termos de memória e tempo de execução, especialmente em grandes volumes de dados.

Conclusão

A detecção de mudanças é um aspecto essencial do Angular, e a escolha da estratégia certa pode ter um grande impacto no desempenho da sua aplicação.

• Estratégia padrão: Ideal para aplicações menores ou quando a simplicidade é mais importante.
• Estratégia OnPush: Recomendável para aplicações grandes, onde o desempenho é crítico, especialmente quando você pode trabalhar com dados imutáveis.

Compreender essas estratégias e como aplicá-las corretamente ajudará você a criar aplicações Angular mais rápidas e eficientes.