0Pricing
Sveltejs Academy · Lekcja

$state: szczegółowa reaktywność

Zadeklaruj stan reaktywny za pomocą runy $state, aby uzyskać granularne aktualizacje DOM.

$state: szczegółowa reaktywność to bezpłatna lekcja Sveltejs Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Sveltejs Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Sveltejs Academy zawiera 4 lekcji w sumie.

Deklarowanie stanu

Użyj $state(initial), aby zadeklarować zmienną reaktywną.

let count = $state(0);

Zwykłe przypisywanie

Aktualizuj wartość za pomocą zwykłego przypisania. Svelte ponownie renderuje zależny interfejs.

count = count + 1;

Obiekty i tablice

$state z obiektami i tablicami tworzy głębokie proxy; mutacje są reaktywne.

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

Koniec z items = items

Nie trzeba już ponownie przypisywać wartości, aby wywołać aktualizacje — proxy wykrywają mutacje.

Aktualizacje o drobnej ziarnistości

Ponownie renderowane są tylko te części DOM, które korzystają ze zmienionej właściwości.

Wartości zwracane przez funkcje

Możesz zwracać z funkcji obiekty oparte na $state, aby tworzyć wielokrotnie używane fragmenty stanu.

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

Używanie w bibliotekach

$state działa również w plikach .ts/.js, jeśli używają rozszerzenia .svelte.ts.

Bez śledzenia

Użyj untrack(), aby odczytać wartość stanu bez rejestrowania zależności.

Surowy stan

W przypadku dużych danych, które nie muszą być reaktywne, użyj $state.raw, aby pominąć proxy.

Zamrożona migawka

Użyj $state.snapshot(obj), aby uzyskać zwykłą kopię bez proxy.

W porównaniu z let

$state to nowoczesny zamiennik zwykłego let z domyślną reaktywnością.

Szybkie sprawdzenie

Co się dzieje po zmodyfikowaniu obiektu $state?

Podsumowanie

$state tworzy reaktywne zmienne o drobnej ziarnistości, w tym obiekty i tablice z głębokim proxy.

Często zadawane pytania

Czy lekcja „$state: szczegółowa reaktywność” jest bezpłatna?

Tak — pełny tekst „$state: szczegółowa reaktywność” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Sveltejs Academy, przejdź na CoddyKit PRO. Kurs Sveltejs Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „$state: szczegółowa reaktywność”?

Zadeklaruj stan reaktywny za pomocą runy $state, aby uzyskać granularne aktualizacje DOM. Ćwiczysz Sveltejs Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Sveltejs Academy?

Nie wymagamy żadnego doświadczenia. Sveltejs Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.

Ile czasu zajmuje lekcja „$state: szczegółowa reaktywność”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Sveltejs Academy?

Tak. Każda lekcja Sveltejs Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Dlaczego runy: poza magię kompilatora
  2. $state: szczegółowa reaktywność
  3. $derived: deklaratywne wartości obliczane
  4. $effect: efekty uboczne
← Powrót do Sveltejs Academy