PricingLoginStart free
React Academy · Lektion

Rena komponenter och undvika sidoeffekter vid rendering

Skriv renderingsfunktioner som är fria från mutationer och externa läsningar.

Lektion 2 av 413 steg

Rena komponenter och undvika sidoeffekter vid rendering är en gratis lektion i React Academy på CoddyKit. Detta är lektion 2 av 4. 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 4 lektioner.

Välkommen

I den här lektionen får du lära dig vad en ren komponent innebär i React, varför renderingsfunktioner måste vara fria från sidoeffekter och hur du upptäcker och åtgärdar vanliga brott mot renhet.

Vad är en ren funktion?

En ren funktion returnerar alltid samma resultat för samma indata och orsakar inga observerbara sidoeffekter. React förväntar sig att din komponentfunktion är ren: med samma props och state ska den alltid returnera samma JSX.

Varför renhet är viktigt i React

React kan anropa din komponent flera gånger (StrictMode, samtidiga funktioner och rendering på servern). Om renderingen har sidoeffekter, som API-anrop, DOM-ändringar eller skrivningar till globala variabler, kommer dessa effekter att köras flera gånger på ett oförutsägbart sätt.

Vanlig orenhet: ändra extern state

Ändra aldrig variabler som har definierats utanför komponenten under rendering. Det går bra att göra ändringar i händelsehanterare eller useEffect, men inte under rendering.
let totalRenders = 0; // external
function Counter() {
  totalRenders++; // BAD: side effect in render
  return <p>{totalRenders}</p>;
}

Vanlig orenhet: ändra props

Ändra aldrig props-objektet inuti en komponent. Props är skrivskyddade. Om du behöver en ändrad version skapar du en ny variabel.
// Bad
function Badge({ user }) {
  user.name = user.name.toUpperCase(); // mutates prop!
  return <p>{user.name}</p>;
}

// Good
function Badge({ user }) {
  const displayName = user.name.toUpperCase();
  return <p>{displayName}</p>;
}

Vanlig orenhet: använda slumpvärden eller datum under rendering

Om du anropar `Math.random()` eller `Date.now()` direkt under rendering får du olika värden vid varje anrop, vilket bryter mot renheten. Flytta dessa till state-initierare eller useEffect.
// Bad
function Token() {
  const id = Math.random(); // different every render!
  return <p>{id}</p>;
}

// Good
function Token() {
  const [id] = useState(() => Math.random());
  return <p>{id}</p>;
}

API-anrop hör hemma i useEffect

Att hämta data direkt i komponentfunktionens kropp (och inte i useEffect) är oren kod – det utlöses vid varje rendering. Flytta alltid fetch-anrop till useEffect med lämpliga beroenden.
// Bad
function Profile({ id }) {
  fetch('/api/user/' + id); // runs on every render!
  return <div />;
}

// Good
useEffect(() => {
  fetch('/api/user/' + id).then(/*...*/);
}, [id]);

Lokala ändringar är tillåtna

Det går helt bra att skapa och ändra objekt eller arrayer som skapades *inuti* samma renderingsanrop – ingen annan kan observera dem. Detta kallas en lokal ändring.
function List({ items }) {
  const sorted = [...items]; // new array
  sorted.sort();             // mutating a local copy: OK
  return sorted.map(i => <li key={i}>{i}</li>);
}

Använd Strict Mode för att hitta oren kod

React anropar din komponent två gånger under utveckling när StrictMode används. Om användargränssnittet är inkonsekvent mellan de två anropen eller om du ser dubbla sidoeffekter är renderingen oren. Åtgärda orenheten tills det dubbla anropet är ofarligt.

Rena komponenter och React.memo

När en komponent är ren (samma props → samma resultat) kan du tala om för React att den får hoppa över en ny rendering om props inte har ändrats genom att omsluta den med `React.memo`. Det förbättrar prestandan.
const Pure = React.memo(function Pure({ value }) {
  return <p>{value}</p>;
});

Snabb kontroll

Vilken av följande sidoeffekter är acceptabel att utföra direkt i en React-komponents renderingsfunktion?
Besvara frågan i den interaktiva lektionen

Sammanfattning

Rena komponenter returnerar alltid samma JSX för samma indata. Undvik att ändra props eller externa variabler under rendering, använd useEffect för sidoeffekter och förlita dig på StrictMode för att upptäcka överträdelser.

Nästa steg

Nästa lektion: **Bästa praxis för nycklar och referenser** – du kommer att använda stabila nycklar korrekt, undvika fallgropen med arrayindex som nyckel och arbeta med callback-referenser.
Gratis att börja

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
Börja lära dig gratisVisa hela kursen

Vanliga frågor

Är lektionen ”Rena komponenter och undvika sidoeffekter vid rendering” gratis?

Ja – hela texten till ”Rena komponenter och undvika sidoeffekter vid rendering” 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 4 lektioner.

Vad lär jag mig i ”Rena komponenter och undvika sidoeffekter vid rendering”?

Skriv renderingsfunktioner som är fria från mutationer och externa läsningar. 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 2 av 4.

Hur lång tid tar lektionen ”Rena komponenter och undvika sidoeffekter vid rendering”?

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

  1. Vad StrictMode gör
  2. Rena komponenter och undvika sidoeffekter vid rendering
  3. Bästa praxis för key och ref
  4. Mappstruktur och namnkonventioner
← Tillbaka till React Academy