Strategie de detectare a schimbărilor unghiulare: OnPush și strategii implicite

Detectarea modificării este denumită mecanismul care verifică starea actuală cu cea a stării noi. Orice diferență între cele două state sugerează că există modificări care trebuie actualizate. Înseamnă că vizualizarea trebuie actualizată odată cu modificarea datelor.

Orice modificare care are loc în componente în timpul unei modificări în aplicație este detectată prin Angular 2+. Ori de câte ori un model este modificat, modificările asociate sunt detectate prin unghiulare și vederile sunt actualizate imediat. Această modificare este denumită detectarea schimbării în unghiular.

Modificarea poate fi rezultatul datelor primite din solicitările rețelei sau poate apărea printr-un eveniment utilizator. Odată cu creșterea dimensiunii aplicației, trebuie efectuată mai multă muncă prin metoda de detectare a modificărilor. Detectarea unghiulară este necesară pentru a menține sincronizarea între vederile de bază și modelele corespunzătoare.

Modificarea modelului unghiular se poate datora oricăreia dintre următoarele:

• Evenimente DOM (clic, trece cu mouse-ul peste etc.)
• solicitări AJAX
• Temporizatoare (setTimer(), setInterval())

Cerințe preliminare

Pentru a obține acest articol, ar putea fi necesar să fiți familiarizat cu conceptele de componente unghiulare. De asemenea, conceptele de tipuri de valori și tipuri de referință ar putea fi utile pentru înțelegerea articolului.

Detectarea modificării în Angular

Detectarea modificării în unghiular se face în doi pași, primul fiind actualizarea modelului aplicației prin intermediul dezvoltatorului. Poate fi precedat fie prin emiterea unui eveniment, fie prin modificarea proprietății unei componente. Al doilea pas este munca unghiulară de a reflecta modelul. Detectează dacă orice date noi sunt introduse în componentă în mod explicit. Acest lucru se poate face fie printr-o componentă, fie printr-un Observable abonat la utilizarea conductei asincrone.

Prin urmare, cei doi pași sunt:

• Actualizați modelul aplicației (dezvoltator);
• Reflectați starea modelului în vedere (Angular).

Detectarea modificărilor în unghiulare detectează modificări ale evenimentelor comune ale browserului, cum ar fi clicuri de mouse, solicitări HTTP și alte tipuri de evenimente. Odată detectată modificarea, se decide dacă actualizarea vizualizării este necesară sau nu.

Strategii de detectare a schimbărilor

Sunt prezente două strategii de detectare a schimbărilor unghiulare , care sunt cea implicită și onPush.

Strategia implicită

• Modificările asupra unui model sunt monitorizate prin unghiulare pentru a vă asigura că toate modificările din model sunt capturate. Diferențele dintre starea nouă și cea anterioară sunt verificate prin unghiular.
• Pentru ca vizualizarea să fie actualizată, unghiul trebuie să aibă acces la noua valoare care este apoi comparată cu vechea valoare. Pe baza acestui lucru se ia decizia dacă se actualizează vizualizarea sau nu.
• Prin urmare, într-o strategie implicită, unghiul se învârte în jurul întrebării dacă există modificări ale valorii.
• Nu există nicio presupunere de unde depind componentele. Este o strategie conservatoare care va verifica oricând există o schimbare asociată. Verificările vor fi efectuate asupra oricăror evenimente din browser, ore, promisiuni și XHR.
• Strategia ar putea fi una problematică atunci când aplicațiile mari trebuie luate în considerare cu multe componente.
• În mod implicit, utilizează strategia ChangeDetectionStrategy.Default .

Ignorarea mecanismelor implicite ale browserului

• Mai multe API-uri de nivel scăzut vor fi remediate prin unghiular la momentul pornirii. Aceste API-uri pot fi addEventListener; o funcție de browser care este utilizată pentru înregistrarea evenimentelor de navigare.
• AddEventListener va fi înlocuit cu unghiular cu o versiune mai nouă care funcționează ca versiunea anterioară.
• Mai multe funcționalități sunt adăugate la handler-ul de evenimente prin noua versiune addEventListener . Interfața de utilizare este actualizată după rularea verificării performanței prin unghiular.

Lucru

O bibliotecă care este livrată cu Zone.js efectuează corecțiile de nivel scăzut ale API-ului browserului.

• Zona este definită ca conținut de execuție în mai multe ture de execuție JVM. Funcționalități suplimentare pot fi adăugate unui browser prin acest mecanism. Zonele sunt utilizate intern de către unghiular pentru a detecta orice modificări și pentru a declanșa detectarea.
• În mod normal, există trei faze într-o zonă, adică este stabilă la început, devine instabilă dacă rulează vreo sarcină în zonă și devine stabilă odată ce sarcina este finalizată.
• Mecanismul browser-ului care este corectat pentru a sprijini detectarea modificărilor sunt:

1. evenimente din browser, cum ar fi clic, etc.
2. setInterval() și setTimeout()
3. Solicitări ale Ajax HTTP

• Pentru a declanșa detectarea schimbărilor în unghiular, Zone.js este folosit pentru a corela mai multe API-uri ale altui browser, cum ar fi Websockets.
• O limitare a acestei metode este: dacă Zone.js nu acceptă API-ul browserului, atunci nu va exista niciun declanșator în timpul detectării modificărilor.

Cum funcționează detectarea schimbării unghiulare când este declanșată detectarea schimbării?

Modificările declanșate sunt detectate printr-un detector de modificări. Acest detector de modificări este creat în timpul pornirii aplicației. Se poate lua în considerare un exemplu de componentă TodoItem . Un eveniment va fi emis la primirea unui obiect Todo de către componentă dacă starea tot este comutată. Aflați mai multe despre cum să rulați proiecte unghiulare.

Funcționarea mecanismului implicit de detectare a modificărilor

Mecanismul de detectare a schimbării este unul simplu. În fiecare expresie, valoarea care este curentă pentru proprietate este comparată cu valoarea acelei proprietăți în starea anterioară din expresie.

• O diferență în valoarea proprietății va seta valoarea la true pentru isChanged .

2. Strategia OnPush

• La utilizarea strategiei onPush , unghiul nu trebuie să facă nicio ghicire cu privire la momentul în care trebuie efectuată verificarea.
• Pe baza modificării referinței de intrare sau a evenimentelor declanșate de componentele înseși, unghiul va efectua verificarea modificărilor.
• De asemenea, unghiularului i se poate cere în mod explicit să efectueze verificarea modificărilor. Acest lucru se face prin metoda componentRef.markForCheck().
• Componentele din timpul acestei strategii vor depinde doar de intrările acesteia. Strategia de detectare a modificărilor va fi efectuată numai atunci când:

• Există o schimbare în referința de intrare.
• Există modificări asociate în componentele modelului sau în oricare dintre copiii acestuia.
• Când trebuie efectuată detectarea explicită a modificărilor.
• Când se folosește o conductă asincronă în vizualizare.

• În comparație cu strategia implicită, strategia onpush se învârte în principal în jurul a două întrebări care sunt:

• Există vreo modificare în tipul de referință?
• Dacă există modificări în referința tipului de referință, atunci există modificări ale valorilor memoriei heap?

• Previne verificările inutile asupra componentelor și, de asemenea, asupra componentelor secundare.

Implementarea strategiei onPush pentru o componentă

Numai când o nouă referință este transmisă ca valoare @Input() , aceasta declanșează detectarea modificărilor. Valorile pot fi tipuri primitive, cum ar fi numere, booleeni, șir și nul. De asemenea, pot fi utilizate matrice și obiecte. Obiectele sau matricele modificate nu pot fi utilizate pentru declanșarea detectării modificării pe un component onPush , deoarece nu este creată o nouă referință pentru ele. Prin urmare, un obiect nou sau o referință de matrice trebuie să fie transmisă pentru a declanșa detectorul care detectează schimbarea.

Pentru a evita erorile în metoda metodelor de detectare a modificărilor, aplicația poate fi construită folosind detectarea modificărilor onPush peste tot prin utilizarea de obiecte și liste imuabile. Modificarea obiectelor imuabile se poate face prin crearea unei noi referințe la obiect și, prin urmare:

• Pentru fiecare modificare, detectarea modificării onPush este declanșată.
• Este întotdeauna creată o nouă referință la obiect care previne cauza erorilor.

În astfel de cazuri, Immutable.js poate fi utilizat deoarece conține structuri de date imuabile pentru obiecte (Hartă) și liste (List).

• Adăugarea parametrului changeDetection în adnotarea componentelor va implementa strategia onPush. În loc să transmită noi referințe de fiecare dată, ChangeDetectorRef poate fi folosit și pentru control complet.

ChangeDetectorRef.detectChanges()

• Metoda de detectare a modificării poate fi atașată sau detașată manual cu metode de detașare și reatașare în changeDetectorRef.

ChangeDetectorRef.detach() și Imuabil.js

Când utilizați strategia onPush pentru detectarea schimbărilor , este întotdeauna o idee bună dacă imuabilitatea este impusă. În astfel de cazuri, se folosește Immutable.js.

Immutable.js este o bibliotecă creată pentru încorporarea imuabilității în JavaScript împreună cu structuri de date imuabile precum Listă, Stivă și Hartă.

Pentru a adăuga Immutable.js în proiecte, următoarea comandă trebuie utilizată în terminal. Aflați mai multe despre proiectele unghiulare.

$ npm instalează imuabil – salvează

Pentru a importa structurile de date din Immutable.js, trebuie utilizată următoarea comandă. Comanda arată importarea numai a structurilor de date Listă și Map în acest caz.

import {Hartă, Listă} din „imuabil” Se poate folosi și o matrice.

De asemenea, dacă se folosește Immutable.js, îi sunt asociate câteva dezavantaje.

• Utilizarea API-ului este puțin greoaie.
• Interfețele nu pot fi implementate în modelul de date, deoarece biblioteca Imutable.js nu acceptă nicio interfață.

Învață cursuri de software online de la cele mai bune universități din lume. Câștigă programe Executive PG, programe avansate de certificat sau programe de master pentru a-ți accelera cariera.

rezumat

Articolul v-a prezentat mecanismul de detectare a schimbării și strategiile. Angular va efectua în mod implicit detectarea modificărilor asupra tuturor componentelor. De asemenea, ChangeDetectorRef poate fi aplicat pentru detectarea modificărilor noilor referințe atunci când datele sunt modificate. Cererea de dezvoltare unghiulară este în continuă creștere, ceea ce are ca rezultat salariul dezvoltatorului unghiular în India.

Dacă doriți să aflați mai multe despre tehnologia software, dezvoltarea acesteia și mecanismul din spatele acesteia, puteți verifica cursul Executive PG Program in Software Development – ​​Specialization in Full Stack Development oferit de upGrad. Cursul de specializare este un program online de 23 de săptămâni care oferă peste 300 de studii de caz pentru a vă îmbunătăți cunoștințele și instrumentele disponibile și limbajul de programare pentru a vă îmbunătăți abilitățile practice. Dacă mai aveți întrebări legate de curs, trimiteți-ne un mesaj. Echipa noastră vă va contacta.