PricingLoginStart free
React Academy · Lektion

Opdeling af kontekster for at begrænse genrenderinger

Adskil værdier, der ændres ofte, fra stabile værdier i forskellige kontekster.

Lektion 1 af 413 trin

Opdeling af kontekster for at begrænse genrenderinger er en gratis React Academy-lektion på CoddyKit. Dette er lektion 1 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i React Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. React Academy-kurset indeholder 4 lektioner i alt.

Velkommen

I denne lektion lærer du at opdele React Context i separate providere for at minimere rerenderinger, når kun en del af kontekstværdien ændres.

Problemet med rerendering i Context

Hver komponent, der kalder useContext(MyCtx), bliver rerenderet, når ENHVER del af kontekstværdien ændres — også selvom den del, komponenten bruger, ikke er ændret. Én stor kontekst kan medføre mange unødvendige rerenderinger.

Opdeling efter opdateringsfrekvens

Adskil værdier, der ændres ofte, fra værdier, der sjældent ændres. Anbring hver gruppe i sin egen kontekst. Komponenter, der bruger konteksten, abonnerer kun på den kontekst, de har brug for.
const ThemeCtx = createContext('light');
const UserCtx = createContext(null);
// theme changes rarely; user changes on login/logout — same frequency is fine
// but notifCount changes every second — split it out!

Separate kontekster til data og dispatch

Et almindeligt mønster er at opdele én kontekst til tilstandsdata, som rerenderes ved hver ændring, og en anden til dispatch-/setter-funktioner, som er stabile og aldrig får komponenter, der bruger dem, til at rerendere. Komponenter, der kun bruger dispatch, rerenderes aldrig ved ændringer i data.
const CountCtx = createContext(0);
const SetCountCtx = createContext(() => {});

function Provider({ children }) {
  const [count, setCount] = useState(0);
  return (
    <CountCtx.Provider value={count}>
      <SetCountCtx.Provider value={setCount}>
        {children}
      </SetCountCtx.Provider>
    </CountCtx.Provider>
  );
}

Memoisering af dispatch-konteksten

Setter-funktioner fra useState er stabile og har den samme reference ved hver rendering, så dispatch-kontekstværdien ændres ikke. Hvis du beregner et objekt med handlinger, skal du dog pakke det ind i useMemo.
const actions = useMemo(() => ({
  increment: () => setCount(c => c + 1),
  reset: () => setCount(0),
}), []); // stable — empty deps

Indlejrede providere

Indlejr flere providere i komponenttræet. Komponenter, der bruger konteksten, importerer og bruger kun den specifikke kontekst, de har brug for, så abonnementerne forbliver begrænsede.
function App() {
  return (
    <AuthProvider>
      <ThemeProvider>
        <NotificationsProvider>
          <Router />
        </NotificationsProvider>
      </ThemeProvider>
    </AuthProvider>
  );
}

Profilér før opdeling

Profilér altid med React DevTools, før du opdeler kontekster. Unødvendige rerenderinger er kun et problem, hvis de er dyre. Overdesign ikke kontekster, der er hurtige at rerendere.

Afvejninger ved opdeling af kontekster

Flere kontekster betyder flere providere i komponenttræet. Det øger den mentale belastning. Opdel kun, når profilering viser et ydelsesproblem, ikke på forhånd.

Kombination med React.memo

Selv med én kontekst betyder indpakning af dyre underordnede komponenter i React.memo, at de kun rerenderes, når deres props ændres — ikke når konteksten ændres. Det kan være et enklere alternativ til opdeling.
const ExpensiveChild = React.memo(function({ label }) {
  return <div>{label}</div>;
}); // won't re-render on context change if label hasn't changed

useReducer + Context

Kombinér useReducer med kontekst for at håndtere kompleks tilstand. Gem tilstanden i én kontekst og dispatch-funktionen i en anden. Dispatch er stabil, mens tilstanden opdateres ved hver handling.

Hurtigt tjek

Hvorfor forbedrer det ydeevnen at opdele tilstand og dispatch i separate kontekster?
Besvar den i den interaktive lektion

Opsummering

Opdel kontekster efter opdateringsfrekvens: tilstand, der ændres ofte, i én kontekst og stabil dispatch/setter i en anden. Profilér først, opdel kun, når det har betydning, og overvej React.memo som et enklere alternativ.

Næste trin

Næste lektion: **Memoisering af kontekstværdier med useMemo** — du pakker kontekstværdiernes objekter ind i useMemo, så komponenter, der bruger konteksten, ikke rerenderes ved uændrede data.
Gratis at komme i gang

Lær React med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser
88
Lektioner
324
Start gratisSe hele kurset

Ofte stillede spørgsmål

Er lektionen “Opdeling af kontekster for at begrænse genrenderinger” gratis?

Ja — hele teksten til “Opdeling af kontekster for at begrænse genrenderinger” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af React Academy-kurset, skal du opgradere til CoddyKit PRO. React Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Opdeling af kontekster for at begrænse genrenderinger”?

Adskil værdier, der ændres ofte, fra stabile værdier i forskellige kontekster. Du øver dig i React Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på React Academy?

Der kræves ingen tidligere erfaring. React Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 1 af 4.

Hvor lang tid tager lektionen “Opdeling af kontekster for at begrænse genrenderinger”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne React Academy-lektion?

Ja. Alle React Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

  1. Opdeling af kontekster for at begrænse genrenderinger
  2. Memoisering af kontekstværdier med useMemo
  3. Mønsteret Context Selector
  4. Hvornår kontekst ikke bør bruges
← Tilbage til React Academy