Avledet tilstand og unngåelse av ekstra renderinger
Foretrekk avledede verdier fremfor duplisert tilstand. Memoiser tunge beregninger, og behold én sannhetskilde for å unngå ekstra renderinger.
Avledet tilstand og unngåelse av ekstra renderinger er en gratis leksjon i React Academy på CoddyKit. Dette er leksjon 3 av 3. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i React Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i React Academy inneholder totalt 3 leksjoner.
Hva er avledet state?
Avledet state = verdier som beregnes fra eksisterende state eller props (for eksempel fullName, totalsummer og filtre). Hold deg til én sannhetskilde for å redusere feil og renderinger.
Regler: avled eller lagre
- Avled verdien hvis den kan beregnes på nytt fra andre data.
- Lagre bare brukerinput eller serverdata som ikke kan beregnes.
- Memoiser tunge avledede verdier.
Antimønster: duplisert state
Unngå å synkronisere duplisert state. Dette eksempelet lagrer fullName i state og oppdaterer den i en effekt – det er lett å komme ut av synkronisering og fører til ekstra renderinger.
<div id="root"></div>
Avledet verdi (god praksis)
Beregn fullName fra fornavn og etternavn. Ingen synkronisering og færre renderinger. Bruk useMemo hvis kombinasjonen krever mye arbeid.
<div id="root"></div>
Memoiser tungt avledet arbeid
For tunge avledede verdier (for eksempel sortering eller formatering), bruk useMemo slik at resultatet bare beregnes på nytt når inndataene endres.
<div id="root"></div>
Tips og fallgruver
Unngå duplisert state og effekter for synkronisering. Foretrekk avledede verdier, og memoiser tungt arbeid. Hold avhengighetslistene korrekte for å hindre foreldede data.
Beste praksis for avledet state
Oppsummering
Oppsummering: Hold deg til én sannhetskilde. Beregn fullName, totalsummer og filtre fra eksisterende data. Memoiser tungt arbeid for å hoppe over unødvendige renderinger.
Lær deg React med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 88
- Leksjoner
- 324
Ofte stilte spørsmål
Er leksjonen «Avledet tilstand og unngåelse av ekstra renderinger» gratis?
Ja – hele teksten i «Avledet tilstand og unngåelse av ekstra renderinger» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av React Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i React Academy inneholder totalt 3 leksjoner.
Hva lærer jeg i «Avledet tilstand og unngåelse av ekstra renderinger»?
Foretrekk avledede verdier fremfor duplisert tilstand. Memoiser tunge beregninger, og behold én sannhetskilde for å unngå ekstra renderinger. Du øver på React Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med React Academy?
Ingen tidligere erfaring er nødvendig. React Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 3.
Hvor lang tid tar leksjonen «Avledet tilstand og unngåelse av ekstra renderinger»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne React Academy-leksjonen?
Ja. Alle React Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Nye renderinger kontra commits: når bør De optimalisere
- React.memo, useMemo, useCallback – i praksis
- Avledet tilstand og unngåelse av ekstra renderinger