Använda kontext med useContext
Läs kontextvärden i valfri nästlad komponent med useContext-hooken, så att ni slipper skicka props genom mellanliggande komponenter.
Använda kontext med useContext är en gratis lektion i React Native Academy på CoddyKit. Detta är lektion 2 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för React Native Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i React Native Academy innehåller totalt 4 lektioner.
Läsa context med useContext
Hooken useContext(ContextObject) låter alla funktionskomponenter prenumerera på en context och läsa dess aktuella värde. Den ersätter det äldre mönstret med Consumer render prop med ett enkelt hook-anrop. Komponenten renderas automatiskt om när context-värdet ändras.
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 behövs
Den främsta fördelen med useContext är att den konsumerande komponenten inte behöver ta emot props från sin överordnade komponent. Header-komponenten i föregående exempel kan finnas var som helst i trädet – tre nivåer ner, inuti en modal eller i en helt annan gren – och ändå läsa samma temavärde direkt från contexten.
// 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>;
}Anropa åtgärder från context
Context kan tillhandahålla inte bara data utan även funktioner som uppdaterar datan. Anropa dessa funktioner direkt från den konsumerande komponenten utan att behöva veta var tillståndet finns. Providern hanterar tillståndsuppdateringen, och alla konsumenter som är beroende av värdet renderas automatiskt om.
function LogoutButton() {
const { logout } = useContext(AuthContext);
return (
<Button title='Sign Out' onPress={logout} />
);
}Använda flera context i en komponent
En komponent kan konsumera flera context genom att anropa useContext flera gånger med olika context-objekt. Varje anrop är oberoende – en ändring i ThemeContext orsakar bara omrenderingar hos ThemeContext-konsumenter, inte hos AuthContext-konsumenter (såvida de inte också är beroende 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>
);
}Context-värdet är den senaste renderingen
useContext ger dig alltid det senaste värdet som tillhandahålls av den närmaste matchande Providern. När Providern renderas om med ett nytt värde sprider React uppdateringen omedelbart till alla konsumenter, även om mellanliggande komponenter mellan Providern och konsumenten inte renderades om. Det här är en av de viktigaste fördelarna jämfört med att skicka props genom mellanliggande komponenter som kanske inte renderas om.
Skapa en anpassad useAuth-hook
I stället för att importera och anropa useContext(AuthContext) i varje komponent kan du omsluta det i en anpassad useAuth-hook. Det abstraherar bort importen av context-objektet, gör anropskoden mer lättläst och låter dig lägga till felkontroller eller härledda värden på ett enda ställe.
// 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>;
}Skydda routes med context
Ett vanligt mönster är att läsa autentiseringstillståndet från context och villkorligt rendera antingen den autentiserade appstacken eller inloggningsskärmen. Rotnavigeraren läser user från AuthContext – när user är null renderas autentiseringsskärmarna, och när det har ett värde renderas appens huvudskärmar.
function RootNavigator() {
const { user } = useAuth();
return (
<NavigationContainer>
{user ? <AppStack /> : <AuthStack />}
</NavigationContainer>
);
}Villkorlig rendering baserad på context
Komponenter kan använda context-värden för att fatta beslut om rendering. En komponent för en premiumfunktion kontrollerar användarens prenumerationsnivå från context och renderar antingen hela funktionen eller en uppmaning till betalväggen. Den här logiken finns i den konsumerande komponenten, vilket håller Providern generell och återanvändbar.
function PremiumFeature({ children }) {
const { user } = useAuth();
const isPro = user?.subscription === 'pro';
if (!isPro) {
return <UpgradePrompt />;
}
return children;
}Context i listobjekt
Context fungerar även inuti renderItem-komponenter i FlatList. Varje listobjekt kan läsa från context utan props. Tänk på att varje synligt listobjekt renderas om när context-värdet ändras – använd React.memo och se till att context-värdet är stabilt (memoiserat) för att begränsa påverkan.
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>
);
});Context kontra props: när ska de användas?
Använd props för data som naturligt ägs av den överordnade komponenten och som är direkt relevant för den underordnade komponentens visning. Använd context för globala eller tvärgående områden: autentisering, tema, språk och kundvagnens tillstånd. Om du använder context för mycket för lokala data blir komponenterna svårare att förstå och återanvända isolerat, eftersom deras beroenden är implicita i stället för explicita.
Returvärdet från useContext
useContext returnerar exakt det värde som skickats till den närmaste Providerns value-prop. Om ingen Provider hittas ovanför komponenten returneras standardvärdet som angavs i createContext(). Destrukturera det returnerade objektet direkt vid anropet för renare och mer lättläst kod.
// 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();Snabbtest
Testa dina kunskaper om att konsumera context med useContext från den här lektionen.
Sammanfattning av lektionen
I den här lektionen lärde du dig att useContext(ContextObject) läser den närmaste Providerns värde utan prop drilling, att en komponent kan konsumera flera context genom att anropa useContext flera gånger samt att omsluta useContext i en anpassad hook ger ett rent API med felkontroller. Härnäst bygger vi en theme context med en växlare för mörkt läge.
Lär dig JavaScript 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
- 30
- Lektioner
- 120
Vanliga frågor
Är lektionen ”Använda kontext med useContext” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen React Native Academy, inklusive ”Använda kontext med useContext”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i React Native Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Använda kontext med useContext”?
Läs kontextvärden i valfri nästlad komponent med useContext-hooken, så att ni slipper skicka props genom mellanliggande komponenter. Ni övar på React Native 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 Native Academy?
Du behöver inga förkunskaper. Utbildningen i React Native 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 ”Använda kontext med useContext”?
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 Native Academy-lektionen?
Ja. Varje React Native 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
- Skapa och tillhandahålla en kontext
- Använda kontext med useContext
- En temakontext med växlare för mörkt läge
- Undvika prestandaproblem med kontext