Sveltejs Academy · Lektion

$state: finkornig reaktivitet

Deklarera reaktivt tillstånd med runan $state för detaljerade DOM-uppdateringar.

Lektion 2 av 413 steg

$state: finkornig reaktivitet är en gratis lektion i Sveltejs Academy på CoddyKit. Detta är lektion 2 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Sveltejs Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Sveltejs Academy innehåller totalt 4 lektioner.

Deklarera tillstånd

Använd $state(initial) för att deklarera en reaktiv variabel.

let count = $state(0);

Tilldela om på vanligt sätt

Uppdatera med en vanlig tilldelning. Svelte renderar om det beroende användargränssnittet.

count = count + 1;

Objekt och arrayer

$state med objekt och arrayer skapar djupa proxyer; mutationer är reaktiva.

let user = $state({ name: "Ada" });
user.name = "Bea";   // triggers update

Inget mer items = items

Det är inte längre nödvändigt att tilldela om för att utlösa uppdateringar – proxyerna fångar upp mutationer.

Finkorniga uppdateringar

Endast de delar av DOM som använder den ändrade egenskapen renderas om.

Funktionsreturvärden

$state-baserade objekt kan returneras från funktioner för återanvändbara tillståndsdelar.

function counter() {
  let n = $state(0);
  return {
    get value() { return n; },
    increment() { n++; }
  };
}

Använd i bibliotek

$state fungerar även i .ts/.js-filer om de använder filändelsen .svelte.ts.

Ej spårat

Använd untrack() för att läsa ett tillståndsvärde utan att registrera ett beroende.

Rått tillstånd

Använd $state.raw för stora icke-reaktiva datamängder och hoppa över proxyn.

Fryst ögonblicksbild

Använd $state.snapshot(obj) för att hämta en vanlig, icke-proxifierad kopia.

Jämfört med let

$state är den moderna ersättningen för vanlig let med implicit reaktivitet.

Snabbkontroll

Vad händer när ett $state-objekt ändras?

Besvara frågan i den interaktiva lektionen

Sammanfattning

$state skapar finkorniga reaktiva variabler, inklusive djup-proxifierade objekt och arrayer.

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: 41
Lektioner: 163

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”$state: finkornig reaktivitet” gratis?

Ja – hela texten till ”$state: finkornig reaktivitet” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Sveltejs Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Sveltejs Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”$state: finkornig reaktivitet”?

Deklarera reaktivt tillstånd med runan $state för detaljerade DOM-uppdateringar. Ni övar på Sveltejs 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 Sveltejs Academy?

Du behöver inga förkunskaper. Utbildningen i Sveltejs 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 ”$state: finkornig reaktivitet”?

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 Sveltejs Academy-lektionen?

Ja. Varje Sveltejs 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 Sveltejs Academy