Spara värden utan omrendering
Behåll föränderliga värden mellan renderingar utan att utlösa en omrendering. Jämför useRef och useState med enkla räknare och ett timer-id.
Spara värden utan omrendering är en gratis lektion i React Academy på CoddyKit. Detta är lektion 1 av 3. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för React Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i React Academy innehåller totalt 3 lektioner.
Varför använda useRef
Mål: Spara värden som överlever omrenderingar utan att orsaka en ny rendering. useRef ger en stabil behållare för .current.
- Består mellan renderingar
- Ingen omrendering vid ändring
- Utmärkt för timers och tidigare värden
Ref kontra state
Uppdateringar av useState renderar om gränssnittet. Uppdateringar av useRef gör inte det. Välj ref för ändringsbara hjälpvärden (ID:n och räknare för logik), inte för data som ska visas i gränssnittet.
Demo: renderingsräknare med ref
Vi ökar renderCount i en effekt och sparar det i en ref. Värdet överlever renderingar men orsakar inga nya renderingar.
<div id="root"></div>
Bra användningsområden för useRef
Bra användningsområden:
- ID:n för timers och intervall
- Cachar för tidigare värden
- Flaggor mellan renderingar (till exempel isMounted)
Inte för: data som måste visas i gränssnittet.
Demo: timer-ID i en ref
Behåll intervall-ID:t i en ref så att vi kan starta och stoppa timern utan extra renderingar.
<div id="root"></div>
Fallgropar och tips
Fallgropar:
- Läs inte från en ref för att styra gränssnittet utan state – gränssnittet uppdateras inte.
- Återställ refs vid avmontering om de innehåller ID:n eller resurser.
- Undvik att överanvända refs som globala behållare.
Kontroll av useRef-begreppet
Sammanfattning
Sammanfattning: Använd useRef för ändringsbara värden som lever mellan renderingar – till exempel ID:n, tidigare värden eller flaggor – utan att orsaka omrenderingar. Använd state för synligt gränssnitt.
Lär dig React med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 88
- Lektioner
- 324
Vanliga frågor
Är lektionen ”Spara värden utan omrendering” gratis?
Ja – hela texten till ”Spara värden utan omrendering” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i React Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i React Academy innehåller totalt 3 lektioner.
Vad lär jag mig i ”Spara värden utan omrendering”?
Behåll föränderliga värden mellan renderingar utan att utlösa en omrendering. Jämför useRef och useState med enkla räknare och ett timer-id. Ni övar på React Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig React Academy?
Du behöver inga förkunskaper. Utbildningen i React Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 3.
Hur lång tid tar lektionen ”Spara värden utan omrendering”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här React Academy-lektionen?
Ja. Varje React Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Spara värden utan omrendering
- Åtkomst till DOM-noder, mätning och fokusering
- Föränderliga refs för timers och id:n