React Academy · leksjon

Mønsteret Context Selector

Implementer en enkel selector-hook som bare rendrer på nytt når en del av konteksten endres.

Leksjon 3 av 413 trinn

Mønsteret Context Selector er en gratis leksjon i React Academy på CoddyKit. Dette er leksjon 3 av 4. 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 4 leksjoner.

Velkommen

I denne leksjonen implementerer De en selector-hook for kontekst som abonnerer på bare en del av konteksttilstanden, slik at gjengivelser på nytt forhindres når urelaterte deler av konteksten endres.

Problemet med selectorer

useContext gjengir komponenten på nytt når ENHVER del av konteksten endres. Hvis en komponent bare trenger brukerens navn, mens konteksten også inneholder en liste over varsler, vil et nytt varsel føre til at navnekomponenten gjengis på nytt unødvendig.

Hva er en selector?

En selector er en funksjon som trekker ut en bestemt del av tilstanden fra et større tilstandsobjekt: `state => state.user.name`. En selector-hook abonnerer på konteksten, men utløser bare en ny gjengivelse når den valgte verdien endres.

En enkel selector-hook

Bygg en useSelector-hook som leser konteksten og pakker resultatet inn i useMemo. Komponentens gjengivelse oppdateres bare når den valgte verdien endres.

function useAppSelector(selector) {
  const state = useContext(AppCtx);
  return useMemo(() => selector(state), [state, selector]);
}

// Consumer only re-renders when user.name changes
const name = useAppSelector(s => s.user.name);

Kontroll av grunn likhet

useMemo med en selector fører fortsatt til en ny gjengivelse hvis selector-en returnerer en ny objekt- eller tabellreferanse ved hvert kall, for eksempel `s => s.items.filter(...)`. Bruk en shallow-equal-sammenligning for å hoppe over gjengivelser på nytt når innholdet er det samme.

import { useRef } from 'react';

function useSelector(selector) {
  const state = useContext(AppCtx);
  const selected = selector(state);
  const ref = useRef(selected);
  if (!shallowEqual(ref.current, selected)) {
    ref.current = selected;
  }
  return ref.current;
}

use-context-selector-biblioteket

For produksjonsbruk tilbyr **use-context-selector**-biblioteket en useContextSelector-hook med effektiv abonnementshåndtering og likhetskontroller — uten behov for eksterne tilstandsadministratorer.

import { useContextSelector } from 'use-context-selector';

const name = useContextSelector(AppCtx, s => s.user.name);

Zustand som en selector-basert løsning

Zustands `useStore(selector)`-hook har innebygd støtte for selectorer og shallow equality som standard, noe som gjør den velegnet for store tilstandstrær der detaljerte abonnementer er viktige.

const name = useAppStore(state => state.user.name);

Når selectorer blir overdrevet

Hvis konteksten oppdateres sjelden og konsumentene er rimelige å gjengi på nytt, tilfører selectorer kompleksitet uten målbar fordel. Profiler først — optimaliser alltid basert på dokumenterte resultater.

Memoisere selector-funksjoner

Hvis De oppretter selector-en direkte i komponentkroppen, får den en ny funksjonsreferanse ved hver gjengivelse, noe som potensielt bryter memoiseringen. Definer selectorer utenfor komponenten, eller bruk useCallback.

// Outside component — stable reference
const selectName = s => s.user.name;

function Profile() {
  const name = useAppSelector(selectName);
  return <p>{name}</p>;
}

Avledede selectorer

Sett sammen selectorer ved å kalle én selector fra en annen. Avledede selectorer beregner verdier fra grunnleggende selectorer og holder forretningslogikken ute av komponentene.

const selectFullName = s => s.user.firstName + ' ' + s.user.lastName;

Kort kontroll

Hvorfor bør selector-funksjoner defineres utenfor komponentkroppen når de brukes med useContextSelector eller useMemo?

Besvar den i den interaktive leksjonen

Oppsummering

Selectorer trekker ut en del av konteksttilstanden og forhindrer gjengivelser på nytt når urelaterte deler endres. Definer selectorer utenfor komponenter for å få stabile referanser. Bruk use-context-selector eller Zustand for selectorstøtte på produksjonsnivå.

Neste steg

Neste leksjon: **Når De ikke bør bruke Context** — De skal lære å gjenkjenne når overføring av props, komposisjon eller en tilstandsadministrator passer bedre enn Context.

Gratis å komme i gang

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

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Mønsteret Context Selector» gratis?

Ja – hele teksten i «Mønsteret Context Selector» 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 4 leksjoner.

Hva lærer jeg i «Mønsteret Context Selector»?

Implementer en enkel selector-hook som bare rendrer på nytt når en del av konteksten endres. 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 4.

Hvor lang tid tar leksjonen «Mønsteret Context Selector»?

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

Dele opp kontekster for å begrense nye rendringer
Memoisere kontekstverdier med useMemo
Mønsteret Context Selector
Når du ikke bør bruke Context

← Tilbake til React Academy