Strategia di rilevamento delle modifiche angolari: OnPush e strategie predefinite

Il rilevamento delle modifiche è indicato come il meccanismo che confronta lo stato corrente con quello del nuovo stato. Qualsiasi differenza tra i due stati suggerisce che ci sono modifiche che devono essere aggiornate. Significa che la vista deve essere aggiornata con la modifica dei dati.

Qualsiasi modifica che si verifica nei componenti durante una modifica nell'app viene rilevata tramite Angular 2+. Ogni volta che un modello viene modificato, le modifiche associate vengono rilevate da angular e le viste vengono aggiornate immediatamente. Questa modifica è denominata rilevamento delle modifiche in angolare.

La modifica può essere il risultato di dati ricevuti da richieste di rete o avvenire tramite un evento utente. Con l'aumento delle dimensioni dell'app, è necessario eseguire più lavoro con il metodo di rilevamento delle modifiche. Il rilevamento angolare è necessario per mantenere la sincronizzazione tra le viste sottostanti e i modelli corrispondenti.

La modifica del modello angolare può essere dovuta a uno dei seguenti motivi:

• Eventi DOM (clic, passaggio del mouse sopra, ecc.)
• Richieste AJAX
• Timer (setTimer(), setInterval())

Prerequisiti

Per ottenere una sospensione di questo articolo potrebbe essere necessario avere familiarità con i concetti di componenti angolari. Inoltre, i concetti di tipi di valore e tipi di riferimento potrebbero essere utili per comprendere l'articolo.

Rilevamento modifiche in angolare

Il rilevamento delle modifiche in angolare viene eseguito in due passaggi, il primo è l'aggiornamento del modello dell'applicazione tramite lo sviluppatore. Può essere preceduto dall'emissione di un evento o dalla modifica delle proprietà di un componente. Il secondo passo è il lavoro dell'angolare di riflettere il modello. Rileva se nuovi dati vengono inseriti in modo esplicito nel componente. Questo può essere fatto tramite un componente o un Observable sottoscritto utilizzando la pipe asincrona.

Pertanto, i due passaggi sono:

• Aggiorna il modello dell'applicazione (sviluppatore);
• Riflette lo stato del modello nella vista (Angolo).

Il rilevamento delle modifiche in angular rileva le modifiche degli eventi comuni del browser come i clic del mouse, le richieste HTTP e altri tipi di eventi. Una volta rilevata la modifica, si decide se l'aggiornamento della vista è necessario o meno.

Strategie di rilevamento delle modifiche

Sono presenti due strategie di rilevamento delle modifiche angolari che sono quella di default e quella onPush.

La strategia predefinita

• Le modifiche su un modello vengono monitorate da angular per assicurarsi che tutte le modifiche nel modello vengano acquisite. Le differenze tra lo stato nuovo e quello precedente sono verificate da angolare.
• Affinché la vista venga aggiornata, l'angolare deve avere accesso al nuovo valore che viene quindi confrontato con il vecchio valore. Sulla base di ciò si decide se aggiornare o meno la visualizzazione.
• Pertanto, in una strategia predefinita, l'angular ruota attorno alla domanda se ci sono modifiche nel valore.
• Non vi è alcuna ipotesi su dove dipendano i componenti. È una strategia conservativa che verificherà ogni volta che c'è un cambiamento associato. Verranno eseguiti controlli su eventi, orari, promesse e XHR del browser.
• La strategia potrebbe essere problematica quando si devono considerare grandi applicazioni con molti componenti.
• Per impostazione predefinita, utilizza la strategia ChangeDetectionStrategy.Default .

Sovrascrivere i meccanismi predefiniti del browser

• Diverse API di basso livello verranno corrette da angular al momento dell'avvio. Queste API possono essere addEventListener; una funzione del browser che viene utilizzata per registrare gli eventi di navigazione.
• addEventListener verrà sostituito da angular con una versione più recente che si comporta come la versione precedente .
• Ulteriori funzionalità vengono aggiunte al gestore eventi dalla nuova versione di addEventListener . L'interfaccia utente viene aggiornata dopo aver eseguito il controllo delle prestazioni tramite angular.

Lavorando

Una libreria fornita con Zone.js esegue l'applicazione di patch di basso livello dell'API del browser.

• La zona è definita come il contenuto dell'esecuzione in più turni di esecuzione JVM. È possibile aggiungere funzionalità extra a un browser tramite questo meccanismo. Le zone vengono utilizzate internamente da angolare per rilevare eventuali modifiche e attivare il rilevamento.
• Normalmente ci sono tre fasi in una zona, cioè è stabile all'inizio, diventa instabile se un'attività viene eseguita nella zona e diventa stabile una volta completata l'attività.
• I meccanismi del browser corretti per supportare il rilevamento in caso di modifica sono:

1. eventi del browser come clic, ecc.
2. setInterval() e setTimeout()
3. Richieste di Ajax HTTP

• Per attivare il rilevamento delle modifiche in angular, Zone.js viene utilizzato per applicare patch a diverse API di un altro browser come Websocket.
• Una limitazione a questo metodo è: se Zone.js non supporta l'API del browser, non ci sarà alcun trigger durante il rilevamento delle modifiche.

Come funziona il rilevamento delle modifiche angolari quando viene attivato il rilevamento delle modifiche?

Le modifiche attivate vengono rilevate tramite un rilevatore di modifiche. Questo rilevatore di modifiche viene creato durante il tempo di avvio dell'applicazione. Si può considerare un esempio del componente TodoItem . Verrà emesso un evento alla ricezione di un oggetto Todo dal componente se lo stato del todo è commutato. Ulteriori informazioni su come eseguire progetti angolari.

Funzionamento del meccanismo di rilevamento delle modifiche predefinito

Il meccanismo di rilevamento delle modifiche è semplice. In ogni espressione, il valore corrente per la proprietà viene confrontato con il valore di tale proprietà nello stato precedente nell'espressione.

• Avere una differenza nel valore della proprietà imposterà il valore su true di isChanged .

2. Strategia OnPush

• Utilizzando la strategia onPush , l'angolare non deve eseguire alcuna ipotesi su quando deve essere eseguito il controllo.
• In base alla modifica del riferimento in ingresso, o agli eventi attivati ​​dai componenti stessi, l'angolare eseguirà il controllo delle modifiche.
• Inoltre, all'angolare può essere richiesto esplicitamente di eseguire il controllo delle modifiche. Questo viene fatto attraverso il metodo di componentRef.markForCheck().
• Le componenti durante questa strategia dipenderanno solo dai suoi input. La strategia di rilevamento delle modifiche verrà eseguita solo quando:

• C'è una modifica nel riferimento di input.
• Sono presenti modifiche associate nei componenti del modello o in uno qualsiasi dei suoi figli.
• Quando è necessario eseguire il rilevamento esplicito delle modifiche.
• Quando viene utilizzata una pipe asincrona nella vista.

• Rispetto alla strategia di default, la strategia onpush ruota principalmente attorno a due domande che sono:

• C'è qualche cambiamento nel tipo di riferimento?
• Se sono presenti modifiche nel riferimento del tipo di riferimento, sono presenti modifiche nei valori della memoria heap?

• Impedisce controlli non necessari sui componenti e anche sui componenti figlio.

Implementazione della strategia onPush per un componente

Solo quando un nuovo riferimento viene passato come valore @Input() , attiva il rilevamento delle modifiche. I valori possono essere tipi primitivi come numeri, booleani, string e null. Possono essere utilizzati anche array e oggetti. Gli oggetti o gli array modificati non possono essere utilizzati per attivare il rilevamento delle modifiche su un componente onPush poiché per essi non viene creato un nuovo riferimento. Pertanto, è necessario passare un nuovo oggetto o un riferimento di matrice per attivare il rilevatore che rileva la modifica.

Per evitare bug nel metodo dei metodi di rilevamento delle modifiche, l'applicazione può essere compilata utilizzando il rilevamento delle modifiche onPush ovunque tramite l'uso di oggetti ed elenchi immutabili. La modifica di oggetti immutabili può essere eseguita attraverso la creazione di un nuovo riferimento a un oggetto e quindi:

• Per ogni modifica, viene attivato il rilevamento delle modifiche onPush .
• Viene sempre creato un nuovo riferimento all'oggetto che previene la causa dei bug.

In questi casi, è possibile utilizzare Immutable.js in quanto contiene strutture di dati immutabili per oggetti (Mappa) ed elenchi (Elenco).

• L'aggiunta del parametro changeDetection nell'annotazione del componente implementerà la strategia onPush. Invece di passare nuovi riferimenti ogni volta, è possibile utilizzare anche ChangeDetectorRef per un controllo completo.

ChangeDetectorRef.detectChanges()

• Il metodo di rilevamento delle modifiche può essere collegato o scollegato manualmente con i metodi di scollegamento e ricollegamento in changeDetectorRef.

ChangeDetectorRef.detach() e Immutabile.js

Quando si utilizza la strategia onPush per il rilevamento delle modifiche , è sempre una buona idea applicare l'immutabilità. In questi casi, viene utilizzato Immutable.js.

immutable.js è una libreria creata per incorporare l'immutabilità in JavaScript insieme a strutture di dati immutabili come List, Stack e Map.

Per aggiungere Immutable.js nei progetti, è necessario utilizzare il seguente comando nel terminale. Ulteriori informazioni sui progetti angolari.

$ npm install immutable –save

Per importare le strutture dati da Immutable.js, è necessario utilizzare il comando seguente. Il comando mostra l'importazione solo delle strutture dati List e Map in questo caso.

importa {Mappa, Elenco} da 'immutabile' È anche possibile utilizzare un array.

Inoltre, se viene utilizzato Immutable.js, sono associati alcuni inconvenienti.

• L'utilizzo dell'API è un po' complicato.
• Le interfacce non possono essere implementate nel modello di dati poiché la libreria Imutable.js non supporta alcuna interfaccia.

Impara i corsi di software online dalle migliori università del mondo. Guadagna programmi Executive PG, programmi di certificazione avanzati o programmi di master per accelerare la tua carriera.

Sommario

L'articolo ha introdotto il meccanismo di rilevamento delle modifiche e le strategie. Angular eseguirà il rilevamento delle modifiche su tutti i componenti per impostazione predefinita. Inoltre, è possibile applicare ChangeDetectorRef per rilevare le modifiche nei nuovi riferimenti quando i dati vengono mutati. La domanda di sviluppo angolare continua ad aumentare, il che si traduce in uno stipendio per sviluppatori angolari in India.

Se vuoi saperne di più sulla tecnologia del software, sul suo sviluppo e sul meccanismo alla base, puoi controllare il corso Executive PG Program in Software Development – ​​Specialization in Full Stack Development offerto da upGrad. Il corso di specializzazione è un programma online di 23 settimane che offre oltre 300 casi di studio per migliorare le tue conoscenze e gli strumenti disponibili e il linguaggio di programmazione per migliorare le tue abilità pratiche. Se hai altre domande relative al corso, inviaci un messaggio. Il nostro team ti contatterà.