useContext til global state
Opret en Context, omslut et undertræ med dens Provider, og brug værdien med useContext for at dele theme- eller auth-state uden prop drilling.
useContext til global state er en gratis Frontend 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 Frontend Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Frontend Academy-kurset indeholder 4 lektioner i alt.
Problemet med videregivelse af props
Videregivelse af props betyder, at du sender data gennem mange mellemliggende komponenter, som ikke bruger dem, blot for at nå frem til et dybt indlejret underordnet element. Kontekst løser dette ved at gøre en værdi tilgængelig for alle komponenter i træet uden eksplicit videregivelse.
Oprettelse af en kontekst
createContext(defaultValue) opretter et Context-objekt. Standardværdien bruges, når en komponent læser konteksten uden en tilsvarende Provider over sig.
import { createContext } from 'react';
interface ThemeContextType {
theme: 'light' | 'dark';
toggleTheme: () => void;
}
const ThemeContext = createContext<ThemeContextType>({
theme: 'light',
toggleTheme: () => {}
});Tilgængeliggørelse af konteksten
Pak den del af træet, der har brug for konteksten, ind i Provider. Alle komponenter indeni kan læse kontekstværdien.
function ThemeProvider({ children }: { children: React.ReactNode }) {
const [theme, setTheme] = useState<'light' | 'dark'>('light');
const toggleTheme = () => setTheme(t => t === 'light' ? 'dark' : 'light');
return (
<ThemeContext.Provider value={{ theme, toggleTheme }}>
{children}
</ThemeContext.Provider>
);
}
// In app root:
<ThemeProvider>
<App />
</ThemeProvider>Brug af useContext
Enhver komponent inde i Provider kan tilgå kontekstværdien med useContext(ThemeContext). Du behøver ikke sende noget som en prop.
function ThemeToggle() {
const { theme, toggleTheme } = useContext(ThemeContext);
return (
<button onClick={toggleTheme}>
Switch to {theme === 'light' ? 'dark' : 'light'} mode
</button>
);
}Brugerdefineret hook som indpakning til useContext
Eksportér en brugerdefineret hook, der internt kalder useContext. Det er renere end at eksponere konteksten direkte og giver dig mulighed for at tilføje validering.
function useTheme() {
const ctx = useContext(ThemeContext);
if (!ctx) throw new Error('useTheme must be used inside ThemeProvider');
return ctx;
}
// Usage:
const { theme } = useTheme();Genrendering af kontekst
Når Providerens værdi ændres, gengives alle forbrugere igen. Hvis værdien er et objekt, vil en ny objektreference ved hver gengivelse få alle forbrugere til at blive gengivet igen. Memoisér værdien med useMemo for at forhindre dette.
const value = useMemo(
() => ({ theme, toggleTheme }),
[theme] // toggleTheme is stable if created with useCallback
);
<ThemeContext.Provider value={value}>Hvornår du skal bruge kontekst
Godt til: tema, lokalitet, autentificeret bruger, funktionsflag og notifikationssystem. Ikke ideelt til: opdateringer med høj frekvens (ved hvert tastetryk) eller stor kompleks tilstand (brug i stedet et tilstandslager).
Flere kontekster
Du kan have flere uafhængige kontekster. Hold dem fokuserede — en AuthContext til autentificering og en ThemeContext til tema. Undgå en enkelt altomfattende kontekst, der indeholder alt.
Kontekst kontra Redux
Kontekst er indbygget og tilstrækkelig til globale data, der ændres sjældent. Redux/Zustand/Pinia er bedre til kompleks tilstand med mange opdateringer, tidsrejsefejlfinding eller behov for middleware.
Mønster for AuthContext
Et almindeligt mønster er en AuthContext, der indeholder den aktuelle bruger og autentificeringsmetoder. Komponenter, der bruger konteksten, får brugeren uden at skulle sende props gennem mellemled.
interface AuthContext {
user: User | null;
login: (creds: Credentials) => Promise<void>;
logout: () => void;
}
const AuthCtx = createContext<AuthContext | null>(null);
export const useAuth = () => {
const ctx = useContext(AuthCtx);
if (!ctx) throw new Error('Outside AuthProvider');
return ctx;
};Kontekst og TypeScript
Definér kontekstens type med en grænseflade. Brug null som startværdi, og kast en fejl i den brugerdefinerede hook, hvis den er null. Det forhindrer, at den umulige tilstand "brugt uden for Provider" forbliver skjult.
Ydeevne: memo + kontekst
Komponenter, der er pakket ind i React.memo, gengives ikke igen, medmindre deres props ændres. Hvis resultatet fra en kontekstforbruger kun afhænger af en del af konteksten, kan du opdele konteksten eller bruge vælgermønstre for at undgå unødvendige gengivelser.
Hurtigt tjek
Hvad returnerer useContext(MyContext), når den kaldes inde i en komponent, der ikke har en Provider over sig?
Opsummering: useContext
createContext opretter en kontekst med en standardværdi. Pak komponenttræet ind i Provider for at levere en værdi. useContext læser værdien overalt inden for Provider. Brugerdefinerede hooks pakker useContext ind for at validere. Memoisér Provider-værdien for at forhindre unødvendige gengivelser. Brug den til globale data, der ændres sjældent, som tema og autentificering.
Lær HTML 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
- 41
- Lektioner
- 163
Ofte stillede spørgsmål
Er lektionen “useContext til global state” gratis?
Ja — hele teksten til “useContext til global state” 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 Frontend Academy-kurset, skal du opgradere til CoddyKit PRO. Frontend Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “useContext til global state”?
Opret en Context, omslut et undertræ med dens Provider, og brug værdien med useContext for at dele theme- eller auth-state uden prop drilling. Du øver dig i Frontend 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å Frontend Academy?
Der kræves ingen tidligere erfaring. Frontend 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 “useContext til global state”?
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 Frontend Academy-lektion?
Ja. Alle Frontend 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
- useContext til global state
- useReducer til kompleks state
- useMemo og useCallback til ydeevne
- Custom hooks: udtræk af genanvendelig logik