{#key} uudelleenrenderöinnin pakottamiseen
Käyttäkää key-lohkoa komponenttien tuhoamiseen ja uudelleenluomiseen arvon muuttuessa.
{#key} uudelleenrenderöinnin pakottamiseen on ilmainen Sveltejs Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/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.
key-lohko
{#key expr} tuhoaa sisältönsä ja luo sen uudelleen aina, kun expr muuttuu. Se on hyödyllinen, kun haluatte uuden komponentti-instanssin.
Animaatioiden käynnistäminen uudelleen
Ympäröikää animoitu elementti {#key}-lohkolla, jotta siirtymä toistetaan aina avaimen muuttuessa.
{#key id}
<div in:fade>{message}</div>
{/key}Komponentin tilan nollaaminen
Ympäröikää sisäistä tilaa sisältävä lapsikomponentti {#key id}-lohkolla, jotta tila nollataan kokonaan tunnisteen muuttuessa.
{#key currentUser.id}
<UserProfile user={currentUser} />
{/key}Ero each-avaimeen
{#key}-lohko avaintaa yhden elementin, kun taas {#each ... (key)} avaintaa luettelon alkiot.
Milloin käyttää
Käyttäkää tätä, kun haluatte nollata monimutkaisen sisäisen tilan tyhjentämättä jokaista kenttää erikseen.
Suorituskykykustannus
Jokainen avaimen muutos purkaa alipuun ja rakentaa sen uudelleen. Välttäkää valtavien puiden ympäröimistä, jos avain vaihtuu usein.
Sulkeva tunniste
Sulkekaa lohko {/key}-tunnisteella.
Yleisiä käyttötapoja
Käynnistäkää animaatiot uudelleen, nollatkaa sitomattomat syöttökentät ja pakottakaa uusi haku, kun siirrytään reitityksessä uuteen entiteettiin.
Vaihtoehto: bind:this
Joskus voitte nollata tilan imperatiivisesti viitteen avulla. {#key} on deklaratiivisiin nollauksiin selkeämpi ratkaisu.
Yhdistäminen siirtymiin
Yhdistäkää tämä siirtymiin, jotta saatte tasaisen visuaalisen vihjeen perustavanlaatuisesta muutoksesta.
Välttäkää mitättömissä muutoksissa
Älkää ympäröikö pelkästään reaktiivista sisältöä {#key}-lohkolla — Svelte päivittää sen jo tehokkaasti.
Pikatarkistus
Mitä {#key x} tekee, kun x muuttuu?
Kertaus
{#key} pakottaa sisällön täydelliseen tuhoamiseen ja uudelleenrakentamiseen aina, kun sen lauseke muuttuu. Se on hyödyllinen nollauksissa ja animaatioiden toistamisessa.
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
Usein kysytyt kysymykset
Onko oppitunti ”{#key} uudelleenrenderöinnin pakottamiseen” ilmainen?
Kyllä – oppitunnin ”{#key} uudelleenrenderöinnin pakottamiseen” 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 ”{#key} uudelleenrenderöinnin pakottamiseen”?
Käyttäkää key-lohkoa komponenttien tuhoamiseen ja uudelleenluomiseen arvon muuttuessa. 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 3/4.
Kuinka kauan ”{#key} uudelleenrenderöinnin pakottamiseen”-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
- {#if} {#else if} {#else}
- {#each} indeksin ja avaimen kanssa
- {#key} uudelleenrenderöinnin pakottamiseen
- Sisäkkäiset {#each}-lohkot ja avainperusteiset päivitykset