React Native Academy · Lektion

Brug af context med useContext

Læs context-værdier i enhver indlejret komponent med useContext-hooket, så De undgår at skulle videregive props gennem mellemliggende komponenter.

Lektion 2 af 413 trin

Brug af context med useContext er en gratis React Native Academy-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i React Native Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. React Native Academy-kurset indeholder 4 lektioner i alt.

Læsning af kontekst med useContext

Hooket useContext(ContextObject) lader enhver funktionskomponent abonnere på en kontekst og læse dens aktuelle værdi. Det erstatter det ældre Consumer-render-prop-mønster med et enkelt kald af et hook. Komponenten gengiver automatisk igen, hver gang kontekstværdien ændres.

import { useContext } from 'react';
import { ThemeContext } from '../context/ThemeContext';

function Header() {
  const { theme } = useContext(ThemeContext);

  return (
    <View style={{ backgroundColor: theme === 'dark' ? '#1a1a2e' : '#fff' }}>
      <Text>My App</Text>
    </View>
  );
}

Prop drilling er ikke nødvendigt

Den største fordel ved useContext er, at den forbrugende komponent ikke behøver at modtage props fra sin overordnede komponent. Header-komponenten fra det forrige eksempel kan være hvor som helst i træet — tre niveauer nede, inde i en modal eller i en helt anden gren — og den læser stadig den samme temaværdi direkte fra konteksten.

// Without context: theme prop drills through App→Screen→Section→Card→Header
// With context: Header reads theme directly from context
function DeepComponent() {
  const { user } = useContext(AuthContext); // no props needed
  return <Text>Welcome, {user.name}</Text>;
}

Kald af handlinger fra kontekst

Kontekst kan eksponere ikke kun data, men også funktioner, der opdaterer dataene. Kald disse funktioner direkte fra den forbrugende komponent uden at vide, hvor tilstanden befinder sig. Provider-komponenten håndterer tilstandsopdateringen, og alle forbrugere, der afhænger af værdien, gengiver automatisk igen.

function LogoutButton() {
  const { logout } = useContext(AuthContext);

  return (
    <Button title='Sign Out' onPress={logout} />
  );
}

Brug af flere kontekster i én komponent

En komponent kan bruge flere kontekster ved at kalde useContext flere gange med forskellige kontekstobjekter. Hvert kald er uafhængigt — en ændring i ThemeContext medfører kun nye gengivelser hos ThemeContext-forbrugere, ikke hos AuthContext-forbrugere (medmindre de også afhænger af ThemeContext).

function ProfileScreen() {
  const { user } = useContext(AuthContext);
  const { theme } = useContext(ThemeContext);

  return (
    <View style={styles[theme]}>
      <Text style={styles[theme + 'Text']}>
        {user.name}
      </Text>
    </View>
  );
}

Kontekstværdien er fra den seneste gengivelse

useContext giver dig altid den seneste værdi, der leveres af den nærmeste matchende Provider. Når Provider-komponenten gengiver med en ny værdi, videresender React straks opdateringen til alle forbrugere, også selvom de mellemliggende komponenter mellem Provider-komponenten og forbrugeren ikke blev gengivet igen. Dette er en af de vigtigste fordele sammenlignet med at sende props gennem mellemliggende komponenter, der muligvis ikke gengiver.

Oprettelse af et brugerdefineret useAuth-hook

I stedet for at importere og kalde useContext(AuthContext) i hver komponent kan du omslutte det i et brugerdefineret useAuth-hook. Det abstraherer importen af kontekstobjektet væk, gør den kaldende kode mere læsbar og lader dig tilføje fejlkontroller eller afledte værdier ét sted.

// context/AuthContext.js
export function useAuth() {
  const ctx = useContext(AuthContext);
  if (!ctx) throw new Error('useAuth must be inside AuthProvider');
  return ctx;
}

// In any component
function NavBar() {
  const { user, logout } = useAuth(); // clean and simple
  return <Text>{user.email}</Text>;
}

Beskyttelse af ruter med kontekst

Et almindeligt mønster er at læse godkendelsestilstanden fra konteksten og betinget gengive enten appstakken for godkendte brugere eller loginskærmen. Rodnavigatoren læser user fra AuthContext — når user er null, gengiver den godkendelsesskærmene, og når den har en værdi, gengiver den appens hovedskærme.

function RootNavigator() {
  const { user } = useAuth();

  return (
    <NavigationContainer>
      {user ? <AppStack /> : <AuthStack />}
    </NavigationContainer>
  );
}

Betinget gengivelse baseret på kontekst

Komponenter kan bruge kontekstværdier til at træffe beslutninger om gengivelse. En komponent til en premiumfunktion kontrollerer brugerens abonnementsniveau fra konteksten og gengiver enten hele funktionen eller en betalingsmur med en CTA. Denne logik ligger i den forbrugende komponent, så Provider-komponenten forbliver generisk og genanvendelig.

function PremiumFeature({ children }) {
  const { user } = useAuth();
  const isPro = user?.subscription === 'pro';

  if (!isPro) {
    return <UpgradePrompt />;
  }

  return children;
}

Kontekst i listeelementer

Kontekst fungerer også i FlatList-renderItem-komponenter. Hvert listeelement kan læse fra konteksten uden props. Vær opmærksom på, at alle synlige listeelementer gengiver igen, hvis kontekstværdien ændres — brug React.memo, og sørg for, at kontekstværdien er stabil (memoriseret), for at begrænse påvirkningen.

const CartItem = React.memo(({ item }) => {
  const { addToCart } = useContext(CartContext);

  return (
    <View style={styles.row}>
      <Text>{item.name}</Text>
      <Button title='Add' onPress={() => addToCart(item)} />
    </View>
  );
});

Kontekst eller props: Hvornår skal du bruge hvad?

Brug props til data, der naturligt ejes af den overordnede komponent og er direkte relevant for den underordnede komponents visning. Brug kontekst til globale eller tværgående forhold: godkendelse, tema, sprog og kurvtilstand. Hvis du bruger kontekst for meget til lokale data, bliver komponenter sværere at forstå og genbruge isoleret, fordi deres afhængigheder er implicitte i stedet for eksplicitte.

Returværdien fra useContext

useContext returnerer præcis den værdi, der blev sendt til den nærmeste Provider-komponents prop value. Hvis der ikke findes en Provider over komponenten, returnerer det standardværdien, der blev angivet til createContext(). Destrukturér det returnerede objekt direkte på kaldestedet for at få en renere og mere læsbar kode.

// Full value object
const themeContext = useContext(ThemeContext);
themeContext.theme; // 'light' or 'dark'

// Destructured (preferred)
const { theme, toggleTheme } = useContext(ThemeContext);

// From custom hook
const { user, login, logout } = useAuth();

Hurtigt tjek

Test din forståelse af, hvordan man bruger kontekst med useContext, fra denne lektion.

Besvar den i den interaktive lektion

Opsummering af lektionen

I denne lektion lærte du, at: useContext(ContextObject) læser den nærmeste Provider-komponents værdi uden prop drilling, en komponent kan bruge flere kontekster ved at kalde useContext flere gange, og ved at omslutte useContext i et brugerdefineret hook får du en ren API med fejlkontrol. Dernæst opbygger vi en temakontekst med en kontakt til mørk tilstand.

Gratis at komme i gang

Lær JavaScript 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: 30
Lektioner: 120

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Brug af context med useContext” gratis?

Ja — alle 3 lektioner i læringssporet React Native Academy, inklusive “Brug af context med useContext”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. React Native Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Brug af context med useContext”?

Læs context-værdier i enhver indlejret komponent med useContext-hooket, så De undgår at skulle videregive props gennem mellemliggende komponenter. Du øver dig i React Native 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 Native Academy?

Der kræves ingen tidligere erfaring. React Native 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 2 af 4.

Hvor lang tid tager lektionen “Brug af context med useContext”?

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 Native Academy-lektion?

Ja. Alle React Native 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

Oprettelse og levering af en context
Brug af context med useContext
En ThemeContext med mørk tilstand
Undgåelse af ydeevneproblemer med context

← Tilbage til React Native Academy