React Academy · Oppitunti

Tehosteiden suojaaminen ja siivous

Välttäkää muistivuotoja ja vanhentuneita päivityksiä palauttamalla siivoustoiminnot tehosteista, peruuttamalla asynkroninen työ ja poistamalla kuuntelijat sekä aikakatkaisut.

Oppitunti 3/38 vaihetta

Tehosteiden suojaaminen ja siivous on ilmainen React Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/3. 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 React Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. React Academy-kurssilla on yhteensä 3 oppituntia.

Miksi siivous on tärkeää

Tavoite: Estäkää vuodot ja vanhentuneen tilan päivitykset.

  • Palauttakaa aina cleanup-funktio
  • Perukaa asynkroniset toiminnot AbortController-olion avulla
  • Poistakaa kuuntelijat ja tyhjentäkää ajastimet

Siivoussäännöt

  • Siivous suoritetaan ennen komponentin irrottamista ja ennen seuraavaa efektiä
  • Siivotkaa efektissä luomanne asiat
  • Välttäkää setState-kutsua irrottamisen jälkeen

Esimerkki: kuuntelijan siivous

Lisätkää tapahtumankuuntelija ja poistakaa se palautetussa cleanup-funktiossa vuotojen välttämiseksi.

<div id="root"></div>

Esimerkki: ajastimien siivous

Tyhjentäkää ajastimet ja intervallit cleanup-funktiossa, jotta päivityksiä ei tapahdu komponentin irrottamisen jälkeen.

<div id="root"></div>

Esimerkki: asynkronisen työn peruuttaminen

Perukaa fetch komponentin irrottamisen tai uudelleenajon yhteydessä. Älkää päivittäkö tilaa, jos toiminto on peruttu.

<div id="root"></div>

Vinkit ja sudenkuopat

  • Siivotkaa kaikki aloittamanne (kuuntelijat, ajastimet, tilaukset)
  • Perukaa asynkroniset toiminnot AbortController-olion avulla
  • Pitäkää riippuvuustaulukot ajan tasalla vanhentuneen työn välttämiseksi

Efektin siivouksen testi

Mikä on oikea tapa estää vuodot useEffectissä, joka lisää tilauksia tai aloittaa asynkronisen työn?

Kertaus

Kertaus: Efektien on siivottava kaikki, minkä ne aloittavat. Poistakaa kuuntelijat, tyhjentäkää ajastimet ja perukaa käynnissä olevat asynkroniset toiminnot AbortControllerilla vanhentuneiden päivitysten ja vuotojen välttämiseksi.

Aloita maksutta

Opi React 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
88
Oppitunnit
324

Usein kysytyt kysymykset

Onko oppitunti ”Tehosteiden suojaaminen ja siivous” ilmainen?

Kyllä – oppitunnin ”Tehosteiden suojaaminen ja siivous” 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 React Academy-kurssin, päivitä CoddyKit PROhon. React Academy-kurssilla on yhteensä 3 oppituntia.

Mitä opin oppitunnilla ”Tehosteiden suojaaminen ja siivous”?

Välttäkää muistivuotoja ja vanhentuneita päivityksiä palauttamalla siivoustoiminnot tehosteista, peruuttamalla asynkroninen työ ja poistamalla kuuntelijat sekä aikakatkaisut. Harjoittelet React Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni React Academy-opiskelun?

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

Kuinka kauan ”Tehosteiden suojaaminen ja siivous”-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ä React Academy-oppitunnilla?

Kyllä. Jokainen React 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

  1. Error Boundary -komponentit (luokkapohjainen kääre)
  2. Käyttöliittymän palautuminen ja raportointistrategiat
  3. Tehosteiden suojaaminen ja siivous
← Takaisin: React Academy