Sveltejs Academy · Oppitunti

$state: hienojakoinen reaktiivisuus

Määrittäkää reaktiivinen tila $state-runella tarkkoja DOM-päivityksiä varten.

Oppitunti 2/413 vaihetta

$state: hienojakoinen reaktiivisuus on ilmainen Sveltejs Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Sveltejs Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Sveltejs Academy-kurssilla on yhteensä 4 oppituntia.

Tilan määrittäminen

Käyttäkää $state(initial)-kutsua reaktiivisen muuttujan määrittämiseen.

let count = $state(0);

Sijoittakaa uudelleen normaalisti

Päivittäkää arvo tavallisella sijoituksella. Svelte renderöi riippuvaisen käyttöliittymän uudelleen.

count = count + 1;

Objektit ja taulukot

Objektien ja taulukoiden kanssa käytettynä $state luo syvät proxyt, joten muutokset ovat reaktiivisia.

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

Ei enää items = items -sijoituksia

Arvoa ei enää tarvitse sijoittaa uudelleen päivitysten käynnistämiseksi – proxyt havaitsevat muutokset.

Hienojakoiset päivitykset

Vain muuttunutta ominaisuutta käyttävät DOM:n osat renderöidään uudelleen.

Funktioiden palautusarvot

Voitte palauttaa $state-tilaa käyttävät objektit funktioista uudelleenkäytettäviä tilan osia varten.

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

Käyttö kirjastoissa

$state toimii myös .ts/.js-tiedostoissa, jos niiden tiedostopäätteenä on .svelte.ts.

Seurannan ulkopuolella

Käyttäkää untrack()-funktiota tilan arvon lukemiseen ilman riippuvuuden rekisteröintiä.

Raakatila

Käyttäkää $state.raw-muotoa suuren ei-reaktiivisen datan kanssa proxyn ohittamiseen.

Jäädytetty tilannekuva

Käyttäkää $state.snapshot(obj)-funktiota tavallisen, proxyt sisältämättömän kopion hakemiseen.

let-muuttujaan verrattuna

$state on implisiittisesti reaktiivisen tavallisen let-muuttujan nykyaikainen korvaaja.

Pikatarkistus

Mitä tapahtuu, kun $state-objektia muutetaan?

Vastaa interaktiivisessa oppitunnissa

Kertaus

$state luo hienojakoisia reaktiivisia muuttujia, mukaan lukien syvästi proxytetyt objektit ja taulukot.

Aloita maksutta

Opi HTML tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 41
Oppitunnit: 163

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”$state: hienojakoinen reaktiivisuus” ilmainen?

Kyllä – oppitunnin ”$state: hienojakoinen reaktiivisuus” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Sveltejs Academy-kurssin, päivitä CoddyKit PROhon. Sveltejs Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”$state: hienojakoinen reaktiivisuus”?

Määrittäkää reaktiivinen tila $state-runella tarkkoja DOM-päivityksiä varten. Harjoittelet Sveltejs Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Sveltejs Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Sveltejs Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.

Kuinka kauan ”$state: hienojakoinen reaktiivisuus”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Sveltejs Academy-oppitunnilla?

Kyllä. Jokainen Sveltejs Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

Miksi runet: eroon kääntäjän taikuudesta
$state: hienojakoinen reaktiivisuus
$derived: deklaratiiviset lasketut arvot
$effect: sivuvaikutukset

← Takaisin: Sveltejs Academy