Bruke kontekst med useContext
Les kontekstverdier i enhver nøstet komponent ved hjelp av useContext-hooken, slik at du unngår å sende props gjennom mellomliggende komponenter.
Bruke kontekst med useContext er en gratis leksjon i React Native Academy på CoddyKit. Dette er leksjon 2 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i React Native Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i React Native Academy inneholder totalt 4 leksjoner.
Lese kontekst med useContext
Hooken useContext(ContextObject) lar alle funksjonskomponenter abonnere på en kontekst og lese den gjeldende verdien. Den erstatter det eldre mønsteret med Consumer render prop med et enkelt hook-kall. Komponenten gjengis automatisk på nytt hver gang kontekstverdien endres.
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>
);
}Ingen prop drilling er nødvendig
Den viktigste fordelen med useContext er at komponenten som bruker konteksten, ikke trenger å motta props fra den overordnede komponenten. Header-komponenten i det forrige eksempelet kan være hvor som helst i treet – tre nivåer dypt, inne i en modal eller i en helt annen gren – og likevel lese den samme temaverdien 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>;
}Kalle handlinger fra kontekst
Kontekst kan eksponere ikke bare data, men også funksjoner som oppdaterer dataene. Kall disse funksjonene direkte fra komponenten som bruker konteksten, uten å vite hvor tilstanden befinner seg. Provider håndterer tilstandsoppdateringen, og alle forbrukere som avhenger av verdien, gjengis automatisk på nytt.
function LogoutButton() {
const { logout } = useContext(AuthContext);
return (
<Button title='Sign Out' onPress={logout} />
);
}Bruke flere kontekster i én komponent
En komponent kan bruke flere kontekster ved å kalle useContext flere ganger med ulike kontekstobjekter. Hvert kall er uavhengig – en endring i ThemeContext fører bare til nye gjengivelser i forbrukere av ThemeContext, ikke i forbrukere av AuthContext (med mindre de også avhenger av 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>
);
}Kontekstverdien er verdien fra siste gjengivelse
useContext gir Dem alltid den nyeste verdien som leveres av den nærmeste samsvarende Provider. Når Provider gjengis på nytt med en ny verdi, sprer React oppdateringen umiddelbart til alle forbrukere, selv om mellomliggende komponenter mellom Provider og forbrukeren ikke ble gjengitt på nytt. Dette er en av de viktigste fordelene sammenlignet med å sende props gjennom mellomliggende komponenter som kanskje ikke gjengis.
Opprette en egendefinert useAuth-hook
I stedet for å importere og kalle useContext(AuthContext) i hver komponent kan De pakke det inn i en egendefinert useAuth-hook. Dette skjuler importen av kontekstobjektet, gjør koden som kaller hooken, mer lesbar og lar Dem legge til feilsjekker eller avledede verdier på ett 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>;
}Beskytte ruter med kontekst
Et vanlig mønster er å lese autentiseringstilstanden fra konteksten og gjengi enten appstakken for autentiserte brukere eller innloggingsskjermen, avhengig av tilstanden. Rotnavigatoren leser user fra AuthContext – når user er null, gjengir den autentiseringsskjermene, og når den er satt, gjengir den hovedskjermene i appen.
function RootNavigator() {
const { user } = useAuth();
return (
<NavigationContainer>
{user ? <AppStack /> : <AuthStack />}
</NavigationContainer>
);
}Betinget gjengivelse basert på kontekst
Komponenter kan bruke kontekstverdier til å ta avgjørelser om hva som skal gjengis. En komponent for en premiumfunksjon sjekker brukerens abonnementsnivå fra konteksten og gjengir enten hele funksjonen eller en CTA for betalingsmur. Denne logikken ligger i komponenten som bruker konteksten, slik at Provider forblir generell og gjenbrukbar.
function PremiumFeature({ children }) {
const { user } = useAuth();
const isPro = user?.subscription === 'pro';
if (!isPro) {
return <UpgradePrompt />;
}
return children;
}Kontekst i listeelementer
Kontekst fungerer også inne i FlatList-komponenters renderItem-funksjoner. Hvert listeelement kan lese fra konteksten uten props. Vær oppmerksom på at alle synlige listeelementer gjengis på nytt hvis kontekstverdien endres – bruk React.memo, og sørg for at kontekstverdien er stabil (memoisert) for å begrense 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: Når skal De bruke hva?
Bruk props for data som naturlig eies av den overordnede komponenten og er direkte relevant for det underkomponenten skal vise. Bruk kontekst for globale eller gjennomgående hensyn: autentisering, tema, språk og handlekurvtilstand. Overdreven bruk av kontekst for lokale data gjør komponenter vanskeligere å forstå og gjenbruke isolert, fordi avhengighetene deres er implisitte i stedet for eksplisitte.
Returverdien til useContext
useContext returnerer nøyaktig verdien som ble sendt til value-propen til den nærmeste Provider. Hvis ingen Provider finnes over komponenten, returnerer den standardverdien som ble oppgitt til createContext(). Destrukturer objektet som returneres, direkte på stedet der hooken kalles, for å få renere og mer lesbar 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();Rask kontroll
Test forståelsen Deres av hvordan man bruker kontekst med useContext, basert på denne leksjonen.
Oppsummering av leksjonen
I denne leksjonen lærte De at: useContext(ContextObject) leser verdien til den nærmeste Provider uten prop drilling, en komponent kan bruke flere kontekster ved å kalle useContext flere ganger, og ved å pakke useContext inn i en egendefinert hook får De et ryddig API med feilsjekking. Deretter skal vi bygge en temakontekst med en bryter for mørk modus.
Lær deg JavaScript 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
- 30
- Leksjoner
- 120
Ofte stilte spørsmål
Er leksjonen «Bruke kontekst med useContext» gratis?
Ja – du kan lese valgfritt 3 av leksjonene i læringsstien React Native Academy, inkludert «Bruke kontekst med useContext», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i React Native Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Bruke kontekst med useContext»?
Les kontekstverdier i enhver nøstet komponent ved hjelp av useContext-hooken, slik at du unngår å sende props gjennom mellomliggende komponenter. Du øver på React Native 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 Native Academy?
Ingen tidligere erfaring er nødvendig. React Native 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 2 av 4.
Hvor lang tid tar leksjonen «Bruke kontekst med useContext»?
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 Native Academy-leksjonen?
Ja. Alle React Native 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
- Opprette og tilby en kontekst
- Bruke kontekst med useContext
- En temakontekst med bryter for mørk modus
- Unngå ytelsesproblemer med Context