Estratégia de detecção de alterações angulares: estratégias OnPush e padrão

A detecção de alterações é referida como o mecanismo que verifica o estado atual em relação ao novo estado. Qualquer diferença entre os dois estados sugere que há mudanças que precisam ser atualizadas. Isso significa que a exibição deve ser atualizada com a alteração nos dados.

Qualquer alteração que ocorra nos componentes durante uma alteração no aplicativo é detectada por meio do Angular 2+. Sempre que um modelo é alterado, as alterações associadas são detectadas por angular e as vistas são atualizadas imediatamente. Essa mudança é chamada de detecção de mudança em angular.

A alteração pode ser resultado de dados recebidos de solicitações de rede ou ocorrer por meio de um evento de usuário. Com o aumento do tamanho do aplicativo, mais trabalho deve ser realizado pelo método de detecção de alterações. A detecção angular é necessária para manter a sincronia entre as visualizações subjacentes e os modelos correspondentes.

A mudança no modelo angular pode ser devido a qualquer um dos seguintes:

• Eventos DOM (clique, passe o mouse sobre, etc.)
• Solicitações AJAX
• Temporizadores (setTimer(), setInterval())

Pré-requisitos

Para obter este artigo, você deve estar familiarizado com os conceitos de componentes angulares. Além disso, os conceitos de tipos de valor e tipos de referência podem ser úteis para entender o artigo.

Detecção de Mudanças em Angular

A detecção de alterações no angular é feita em duas etapas sendo a primeira a atualização do modelo de aplicação através do desenvolvedor. Pode ser precedido pela emissão de um evento ou pela alteração na propriedade de um componente. O segundo passo é o trabalho do angular de refletir o modelo. Ele detecta se algum dado novo é enviado explicitamente para o componente. Isso pode ser feito por meio de um componente ou um Observable inscrito usando o pipe assíncrono.

Portanto, as duas etapas são:

• Atualizar o modelo de aplicação (desenvolvedor);
• Reflete o estado do modelo na vista (Angular).

A detecção de alterações em angular detecta alterações de eventos comuns do navegador, como cliques do mouse, solicitações HTTP e outros tipos de eventos. Uma vez que a alteração é detectada, é decidido se a atualização da visualização é necessária ou não.

Estratégias de detecção de alterações

Duas estratégias de detecção de mudança angular estão presentes, que são a padrão e a onPush.

A estratégia padrão

• As alterações em um modelo são monitoradas por angular para garantir que todas as alterações no modelo sejam capturadas. As diferenças entre o novo e o estado anterior são verificadas por angular.
• Para que uma vista seja atualizada, o angular deve ter acesso ao novo valor que é então comparado ao valor antigo. Com base nisso, é tomada a decisão de atualizar ou não a visualização.
• Portanto, em uma estratégia padrão, o angular gira em torno da questão de saber se há alguma alteração no valor.
• Não há nenhuma suposição sobre onde os componentes dependem. É uma estratégia conservadora que verificará sempre que houver uma mudança associada. As verificações serão realizadas em quaisquer eventos, horários, promessas e XHRs do navegador.
• A estratégia pode ser problemática quando grandes aplicativos devem ser considerados com muitos componentes.
• Por padrão, ele usa a estratégia ChangeDetectionStrategy.Default .

Substituindo os mecanismos padrão do navegador

• Várias APIs de baixo nível serão corrigidas pelo angular no momento da inicialização. Essas APIs podem ser addEventListener; uma função do navegador que é usada para registrar eventos de navegação.
• O addEventListener será substituído por angular com uma versão mais recente com desempenho semelhante à versão anterior.
• Mais funcionalidades são adicionadas ao manipulador de eventos pela nova versão addEventListener . A interface do usuário é atualizada após a execução da verificação de desempenho por angular.

Trabalhando

Uma biblioteca fornecida com Zone.js faz a correção de baixo nível da API do navegador.

• A zona é definida como o conteúdo de execução em vários turnos de execução da JVM. Funcionalidades extras podem ser adicionadas a um navegador por meio desse mecanismo. As zonas são usadas internamente pelo angular para detectar quaisquer alterações e acionar a detecção.
• Normalmente, há três fases em uma zona, ou seja, ela é estável no início, torna-se instável se alguma tarefa for executada na zona e se torna estável quando a tarefa é concluída.
• O mecanismo do navegador que é corrigido para dar suporte à detecção de alterações são:

1. eventos do navegador, como clique, etc.
2. setInterval() e setTimeout()
3. Solicitações de HTTP Ajax

• Para acionar a detecção de alterações em angular, Zone.js é usado para corrigir várias APIs de outro navegador, como Websockets.
• Uma limitação desse método é: se Zone.js não for compatível com a API do navegador, não haverá acionamento durante a detecção de alterações.

Como funciona a detecção de alteração angular quando a detecção de alteração é acionada?

As alterações acionadas são detectadas por meio de um detector de alterações. Este detector de alterações é criado durante o tempo de inicialização do aplicativo. Um exemplo do componente TodoItem pode ser considerado. Um evento será emitido ao receber um objeto Todo pelo componente se o status do todo for alternado. Saiba mais sobre como executar projetos angulares.

Funcionamento do mecanismo de detecção de alterações padrão

O mecanismo de detecção de alterações é simples. Em cada expressão, o valor atual da propriedade é comparado ao valor dessa propriedade no estado anterior na expressão.

• Ter uma diferença no valor da propriedade definirá o valor como true de isChanged .

2. Estratégia OnPush

• Ao usar a estratégia onPush , o angular não precisa adivinhar quando a verificação deve ser realizada.
• Com base na alteração da referência de entrada, ou eventos acionados pelos próprios componentes, o angular realizará a verificação de alterações.
• Além disso, o angular pode ser explicitamente solicitado a executar a verificação de alterações. Isso é feito através do método componentRef.markForCheck().
• Os componentes durante esta estratégia dependerão apenas de suas entradas. A estratégia de detecção de alterações será executada somente quando:

• Há uma mudança na referência de entrada.
• Existem alterações associadas nos componentes do modelo ou em qualquer um de seus filhos.
• Quando a detecção de alterações explícitas deve ser executada.
• Quando um pipe assíncrono na exibição é usado.

• Em comparação com a estratégia padrão, a estratégia onpush gira principalmente em torno de duas questões que são:

• Há alguma mudança no tipo de referência?
• Se houver alterações na referência do tipo de referência, haverá alterações nos valores da memória heap?

• Evita verificações desnecessárias sobre os componentes e também sobre os componentes filhos.

Implementando a estratégia onPush para um componente

Somente quando uma nova referência é passada como valor @Input() , ela aciona a detecção de alterações. Os valores podem ser tipos primitivos como números, booleanos, string e nulo. Arrays e objetos também podem ser usados. Objetos ou matrizes modificados não podem ser usados ​​para acionar a detecção de alterações em um componente onPush , pois uma nova referência não é criada para eles. Portanto, um novo objeto ou uma referência de matriz deve ser passado para acionar o detector que detecta a alteração.

Para evitar erros no método de métodos de detecção de alterações, o aplicativo pode ser construído usando a detecção de alterações onPush em todos os lugares por meio do uso de objetos e listas imutáveis. A modificação de objetos imutáveis ​​pode ser feita através da criação de uma nova referência de objeto e, portanto:

• Para cada alteração, a detecção de alteração onPush é acionada.
• Uma nova referência de objeto é sempre criada, o que evita a causa dos bugs.

Nesses casos, o Immutable.js pode ser usado, pois contém estruturas de dados imutáveis ​​para objetos (Map) e listas (List).

• Adicionar o parâmetro changeDetection na anotação do componente implementará a estratégia onPush. Em vez de passar novas referências a cada vez, o ChangeDetectorRef também pode ser usado para controle completo.

ChangeDetectorRef.detectChanges()

• O método de detecção de alterações pode ser anexado ou desanexado manualmente com métodos de desanexação e reanexação no changeDetectorRef.

ChangeDetectorRef.detach() e Imutável.js

Ao usar a estratégia onPush para detecção de alterações , é sempre uma boa ideia se a imutabilidade for aplicada. Nesses casos, Immutable.js é usado.

O immutable.js é uma biblioteca criada para incorporar imutabilidade em JavaScript junto com estruturas de dados imutáveis ​​como List, Stack e Map.

Para adicionar Immutable.js nos projetos, o comando a seguir deve ser usado no terminal. Saiba mais sobre projetos angulares.

$ npm instalar imutável – salvar

Para importar as estruturas de dados do Immutable.js, o comando a seguir deve ser usado. O comando mostra a importação apenas das estruturas de dados List e Map neste caso.

import {Mapa, Lista} de 'imutável' Uma matriz também pode ser usada.

Além disso, se o Immutable.js for usado, algumas desvantagens serão associadas a ele.

• Usar a API é um pouco complicado.
• As interfaces não podem ser implementadas no modelo de dados, pois a biblioteca Imutable.js não oferece suporte a nenhuma interface.

Aprenda cursos de software online das melhores universidades do mundo. Ganhe Programas PG Executivos, Programas de Certificado Avançado ou Programas de Mestrado para acelerar sua carreira.

Resumo

O artigo apresentou o mecanismo de detecção de alterações e as estratégias. O Angular realizará a detecção de alterações em todos os componentes por padrão. Além disso, o ChangeDetectorRef pode ser aplicado para detectar alterações nas novas referências quando os dados são alterados. A demanda por desenvolvimento angular continua aumentando, o que resulta em salário de desenvolvedor angular na Índia.

Se você quiser saber mais sobre tecnologia de software, seu desenvolvimento e o mecanismo por trás disso, você pode conferir o curso Executive PG Program in Software Development – ​​Specialization in Full Stack Development oferecido pelo upGrad. O curso de especialização é um programa online de 23 semanas que oferece mais de 300 estudos de caso para aumentar seu conhecimento e ferramentas disponíveis e linguagem de programação para aprimorar suas habilidades práticas. Se você tiver mais alguma dúvida relacionada ao curso, envie-nos uma mensagem. Nossa equipe entrará em contato com você.