Angular Academy · Lektion

Förändringsdetektering med OnPush

Minska antalet kontroller med strategin OnPush.

Lektion 2 av 413 steg

Förändringsdetektering med OnPush är en gratis lektion i Angular Academy på CoddyKit. Detta är lektion 2 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Angular Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Angular Academy innehåller totalt 4 lektioner.

Prestandaproblemet

Standardstrategin kontrollerar varje komponent vid varje tick. I stora appar blir det mycket arbete. OnPush säger åt Angular att hoppa över en komponent om inget relevant har ändrats.

Aktivera OnPush

Ange alternativet changeDetection på komponenten.

@Component({
  selector: 'app-user',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: '{{ user().name }}'
})
export class UserComponent {}

När OnPush gör en ny kontroll

En OnPush-komponent kontrolleras endast när: en @Input-referens ändras, en händelse utlöses från dess template, en observable som är bunden med async skickar ut ett värde eller du anropar markForCheck().

Jämförelse av Input-referenser

OnPush jämför input-referenser med Object.is. Om du ändrar ett objekt på plats utlöser det inte en ny kontroll; du måste skicka en ny referens.

// Mutation: ignored by OnPush
this.user.name = 'New';
// New reference: detected
this.user = { ...this.user, name: 'New' };

Oföränderlighet hjälper

OnPush passar naturligt ihop med oföränderlig data. Skapa alltid nya objekt/arrayer i stället för att ändra befintliga, så att referenskontroller på ett tillförlitligt sätt upptäcker ändringar.

this.items = [...this.items, newItem];

Händelser fungerar fortfarande

Händelser från komponentens egen template (klick, inmatning) markerar den automatiskt för kontroll, så lokal interaktivitet fungerar utan extra kod.

<button (click)="count.set(count() + 1)">+</button>

async-pipen

async-pipen anropar markForCheck() när dess observable skickar ut ett värde, vilket gör att OnPush fungerar smidigt med streams.

<p>{{ data$ | async }}</p>

markForCheck

När du uppdaterar tillstånd utanför de normala utlösarna anropar du markForCheck() för att schemalägga komponenten (och dess förfäder) till nästa tick.

private cdr = inject(ChangeDetectorRef);
this.cdr.markForCheck();

Signals och OnPush

Signals integreras med OnPush: när du läser en signal i templaten registreras ett beroende, och när den uppdateras markeras komponenten automatiskt för kontroll. Inga manuella anrop behövs.

count = signal(0);
increment() { this.count.update(c => c + 1); }

OnPush-propagering

När komponenten markeras flaggas den och alla dess förfäder upp till roten, så att sökvägen kontrolleras. Underordnade komponenter kontrolleras som vanligt nedanför den.

Bästa praxis

Använd OnPush som standard för nya komponenter. Tillsammans med signals eller oföränderliga inputs minskar det onödigt arbete dramatiskt.

Snabbtest

Testa dina kunskaper om OnPush.

Besvara frågan i den interaktiva lektionen

Sammanfattning

Du har lärt dig att ChangeDetectionStrategy.OnPush hoppar över kontroller om inte en input-referens ändras, en template-händelse utlöses, en async-pipe skickar ut ett värde eller du anropar markForCheck(). Det passar bäst ihop med oföränderlig data och signals.

Gratis att börja

Lär dig HTML med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 38
Lektioner: 144

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Förändringsdetektering med OnPush” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Angular Academy, inklusive ”Förändringsdetektering med OnPush”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Angular Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Förändringsdetektering med OnPush”?

Minska antalet kontroller med strategin OnPush. Ni övar på Angular Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Angular Academy?

Du behöver inga förkunskaper. Utbildningen i Angular Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.

Hur lång tid tar lektionen ”Förändringsdetektering med OnPush”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Angular Academy-lektionen?

Ja. Varje Angular Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till Angular Academy