React.lazy ja Suspense — laiskat komponentit
Jakakaa koodi reitin tai widgetin perusteella. Ladatkaa komponentit laiskasti React.lazylla ja näyttäkää Suspense-varasisältöjä, jotta sivun muu osa pysyy vuorovaikutteisena.
React.lazy ja Suspense — laiskat komponentit on ilmainen React Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/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 koodin jakaminen?
Tavoite: Julkaiskaa nopeammin lataamalla koodia vain tarvittaessa.
- React.lazy tarvittaessa ladattaville komponenteille
- Suspense-fallback latauksen ajaksi
- Pitäkää muu käyttöliittymä käytettävissä
Koodin jakamisen kohteet
- Reitit ja suuret näytöt
- Harvoin käytetyt paneelit (kaaviot ja editorit)
- Raskaat kolmannen osapuolen widgetit
Valitkaa pieniä rajauksia hitaiden osien läheltä.
Perusmuotoinen lazy-komponentti
Ladatkaa komponentti laiskasti, kun käyttäjä pyytää sitä; Suspense näyttää sillä välin pienen viestin.
<div id="root"></div>
Reittipohjainen jako
Jakakaa vain Details-välilehti. Lista on heti valmis, ja raja eristää hitaan alueen.
<div id="root"></div>
Esilataus ja lazy-lataus tarvittaessa
Harkitkaa esilatausta, kun voitte ennakoida käyttäjän aikomuksen (esimerkiksi osoittimen siirtämisen kohteen päälle tai kohdistamisen). Pitäkää rajaukset pieninä ja fallbackit kevyinä.
- Esilataktakaa osoittimen ollessa kohteen päällä
- Ladatkaa lazy-menetelmällä tarvittaessa
- Näyttäkää skeletoneja koko sivun latausikonien sijaan
Kompastuskivet ja vinkit
- Välttäkää yhtä suurta rajausta sovelluksen juuressa
- Älkää piilottako asettelun muutoksia fallbacksisällöillä, vaan sovittakaa koko yhteen
- Jakakaa koodi käyttäjäpolkujen, ei jokaisen pienen tiedoston, perusteella
Lazyn ja Suspensen tarkoituksen tarkistus
Kertaus
Kertaus: Jakakaa raskaat reitit ja widgetit React.lazy-toiminnolla, ympäröikää ne Suspense-komponentilla ja käyttäkää pieniä fallback-sisältöjä, jotta muu käyttöliittymä pysyy responsiivisena.
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 ”React.lazy ja Suspense — laiskat komponentit” ilmainen?
Kyllä – oppitunnin ”React.lazy ja Suspense — laiskat komponentit” 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 ”React.lazy ja Suspense — laiskat komponentit”?
Jakakaa koodi reitin tai widgetin perusteella. Ladatkaa komponentit laiskasti React.lazylla ja näyttäkää Suspense-varasisältöjä, jotta sivun muu osa pysyy vuorovaikutteisena. 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 1/3.
Kuinka kauan ”React.lazy ja Suspense — laiskat komponentit”-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
- React.lazy ja Suspense — laiskat komponentit
- Reitti- ja komponenttitason koodinjako
- Bundlet, välimuisti ja esilatausvihjeet