typescript - Qual é a diferença entre OnChanges e OnPush no Angular 8?

Semelhante a esta pergunta, Qual é a diferença entre OnChanges e DoCheck no Angular 2?

A diferença entre eles parece ser muito confusa para mim. Qual é a diferença entre OnChanges e OnPush ?

Resposta #1

OnChanges é um hook do ciclo de vida que é chamado quando qualquer uma das propriedades vinculadas a dados de uma diretiva muda. ChangeDetectionStrategy é a estratégia que o detector de mudanças padrão usa para detectar mudanças.

Existem duas ChangeDetectionStrategies no Angular.

enum ChangeDetectionStrategy {
  OnPush: 0
  Default: 1
}

OnPush é um tipo de OnChanges. Por padrão, o Angular usa a estratégia de detecção de mudanças ChangeDetectionStrategy.Default.

ngOnChanges() Se você não especificar, o Angular aplicará o método de detecção de mudanças padrão, que detecta mudanças em componentes inteiros sempre que alterações são feitas. A estratégia padrão não assume nada sobre a aplicação; portanto, toda vez que algo muda em nossa aplicação, como resultado de vários eventos do usuário, temporizadores, XHR, promessas, etc., uma detecção de mudanças será executada em todos os componentes.

OnPush

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush
})

Ao usar detectores OnPush, o framework verificará um componente OnPush quando qualquer uma de suas propriedades de entrada (somente elas) mudar, quando ele disparar um evento ou quando um Observable disparar um evento. Pelo meu entendimento, OnPush é uma maneira simples de tornar as aplicações mais rápidas.

Estratégias de detecção de mudanças

Aqui está uma explicação mais detalhada

Resposta #2

onchange

Por padrão, o Angular usa a estratégia de detecção de mudanças ChangeDetectionStrategy.Default.

onpush

Podemos definir o ChangeDetectionStrategy do nosso componente para ChangeDetectionStrategy.OnPush. Isso informa ao Angular que o componente depende apenas de seus @inputs() (também conhecido como puro) e precisa ser verificado apenas nos seguintes casos:

1️⃣ A referência do Input muda. Ao definir a estratégia de detecção de mudanças onPush, estamos assinando um contrato com o Angular que nos obriga a trabalhar com objetos imutáveis (ou observáveis, como veremos mais adiante).

A vantagem de trabalhar com imutabilidade no contexto da detecção de mudanças é que o Angular poderia realizar uma simples verificação de referência para saber se a visualização deve ser verificada. Tais verificações são muito mais baratas do que uma verificação de comparação profunda. Vamos tentar mutar um objeto e ver o resultado.