React Context API
Bruk React Context API til å håndtere global tilstand og dele data effektivt mellom komponenter.
React Context API er en gratis leksjon i Next.js 15 fullstack (App Router + Server Actions) på CoddyKit. Dette er leksjon 1 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 Next.js 15 fullstack (App Router + Server Actions), og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Next.js 15 fullstack (App Router + Server Actions) inneholder totalt 4 leksjoner.
Hvorfor global tilstand?
I større applikasjoner trenger komponenter ofte å dele data. Det å sende data gjennom mange lag med komponenter kalles prop drilling. Det kan gjøre koden vanskelig å lese og vedlikeholde.
React Context API bidrar til å løse dette ved å tilby en måte å dele tilstand på gjennom hele komponenttreet uten å sende props manuelt på hvert nivå.
Bli kjent med React Context
React Context gjør det mulig å sende data gjennom komponenttreet uten å måtte sende props manuelt ned på hvert nivå.
Det er laget for å dele «globale» data for et tre av React-komponenter, for eksempel den nåværende autentiserte brukeren, temaet eller det foretrukne språket.
Definer konteksten
Det første trinnet er å opprette et Context-objekt ved hjelp av React.createContext(). Du kan angi en standardverdi som brukes når en komponent prøver å hente konteksten uten en samsvarende Provider over seg i treet.
// Simulate React environment
const createContext = (defaultValue) => ({
_value: defaultValue, // Internal storage for the context value
Provider: function({ value, children }) {
this._value = value; // Update internal value when Provider is used
return children; // Simulate rendering children
},
get value() { return this._value; } // Getter for useContext
});
// --- Your Context ---
const ThemeContext = createContext('light');
// --- Entry point (simulated) ---
function main() {
console.log("ThemeContext default value:", ThemeContext.value);
}
main();Gjør data tilgjengelige
For å gjøre kontekstverdien tilgjengelig for komponenter pakker du dem inn med en Context Provider. Provideren tar imot en value-prop, som er dataene alle komponenter som ligger inni den, har tilgang til.
Du kan ha flere Providere for ulike kontekster, eller nestede Providere for samme kontekst for å overstyre verdier.
// Simulate React environment
const createContext = (defaultValue) => ({
_value: defaultValue,
Provider: function({ value, children }) {
this._value = value;
return children;
},
get value() { return this._value; }
});
// --- Your Context ---
const UserContext = createContext(null); // Default to no user
// --- Simulated Component Tree ---
const App = () => {
const currentUser = { name: "Coddy", id: 123 };
return UserContext.Provider({
value: currentUser,
children: "User data is now provided."
});
};
// --- Entry point ---
function main() {
App(); // Call App to set the context value
console.log("Context value after App render:", UserContext.value.name);
}
main();Få tilgang til kontekst med en Hook
Den enkleste måten å lese kontekst i en funksjonell komponent på er å bruke useContext-hooken. Den tar selve Context-objektet (f.eks. UserContext) som argument og returnerer den gjeldende kontekst-value-en.
Når kontekstverdien endres, rendres komponenten som bruker useContext, automatisk på nytt.
// Simulate React environment
const createContext = (defaultValue) => ({
_value: defaultValue,
Provider: function({ value, children }) {
this._value = value;
return children;
},
get value() { return this._value; }
});
const useContext = (Context) => {
return Context.value;
};
// --- Your Context & Components ---
const LanguageContext = createContext('en');
const GreetUser = () => {
const language = useContext(LanguageContext);
return `Greeting in ${language}: Hello!`;
};
const App = () => {
return LanguageContext.Provider({
value: "es", // Provide Spanish language
children: GreetUser() // Render GreetUser inside
});
};
// --- Entry point ---
function main() {
console.log(App()); // Simulate rendering App and logging GreetUser's output
}
main();Praktisk eksempel: Tema
La oss bygge en enkel temabytter ved hjelp av Context. Vi lagrer det gjeldende temaet (f.eks. 'light' eller 'dark') og en funksjon for å bytte det i konteksten vår.
Først oppretter vi konteksten og en wrapper-komponent, ThemeProvider, som skal håndtere tematilstanden.
// Simulate React environment
let _themeState = 'light'; // Simulate useState for theme
let _setThemeState = (newTheme) => { _themeState = newTheme; };
const createContext = (defaultValue) => ({
_value: defaultValue,
Provider: function({ value, children }) {
this._value = value;
return children;
},
get value() { return this._value; }
});
// --- Theme Context ---
const ThemeContext = createContext({
theme: 'light',
toggleTheme: () => {}
});
// --- Theme Provider Component ---
const ThemeProvider = ({ children }) => {
const theme = _themeState; // Get current theme
const toggleTheme = () => {
_setThemeState(theme === 'light' ? 'dark' : 'light');
console.log("Theme toggled to:", _themeState); // Log for simulation
};
return ThemeContext.Provider({
value: { theme, toggleTheme },
children: children
});
};
// --- Entry point ---
function main() {
// Simulate initial render of ThemeProvider
ThemeProvider({ children: "Theme setup complete." });
console.log("Initial theme:", ThemeContext.value.theme);
}
main();Vis det gjeldende temaet
Nå som vi har ThemeProvider, kan alle komponenter som ligger inni den, få tilgang til theme og toggleTheme-funksjonen ved hjelp av useContext(ThemeContext). La oss opprette en komponent som viser det gjeldende temaet.
// Simulate React environment (from previous scenes)
let _themeState = 'light';
let _setThemeState = (newTheme) => { _themeState = newTheme; };
const createContext = (defaultValue) => ({
_value: defaultValue,
Provider: function({ value, children }) {
this._value = value;
return children;
},
get value() { return this._value; }
});
const useContext = (Context) => {
return Context.value;
};
// --- Theme Context ---
const ThemeContext = createContext({
theme: 'light',
toggleTheme: () => {}
});
// --- Theme Provider Component ---
const ThemeProvider = ({ children }) => {
const theme = _themeState;
const toggleTheme = () => {
_setThemeState(theme === 'light' ? 'dark' : 'light');
};
return ThemeContext.Provider({
value: { theme, toggleTheme },
children: children
});
};
// --- Component to display theme ---
const ThemeDisplay = () => {
const { theme } = useContext(ThemeContext);
return `Current theme is: ${theme}`;
};
// --- App structure ---
const App = () => {
return ThemeProvider({
children: ThemeDisplay() // ThemeDisplay is nested inside Provider
});
};
// --- Entry point ---
function main() {
console.log(App()); // Simulate rendering
}
main();Legg til interaktivitet
For at brukere skal kunne endre temaet, trenger vi en måte å kalle toggleTheme-funksjonen som tilbys av ThemeProvider. Vi oppretter en knappkomponent som bruker useContext til å hente denne funksjonen og utløse den ved et klikk.
// Simulate React environment (from previous scenes)
let _themeState = 'light';
let _setThemeState = (newTheme) => { _themeState = newTheme; };
const createContext = (defaultValue) => ({
_value: defaultValue,
Provider: function({ value, children }) {
this._value = value;
return children;
},
get value() { return this._value; }
});
const useContext = (Context) => {
return Context.value;
};
// --- Theme Context ---
const ThemeContext = createContext({
theme: 'light',
toggleTheme: () => {}
});
// --- Theme Provider Component ---
const ThemeProvider = ({ children }) => {
const theme = _themeState;
const toggleTheme = () => {
_setThemeState(theme === 'light' ? 'dark' : 'light');
console.log("Theme toggled to:", _themeState); // Log for simulation
};
return ThemeContext.Provider({
value: { theme, toggleTheme },
children: children
});
};
// --- Component to toggle theme ---
const ThemeTogglerButton = () => {
const { toggleTheme } = useContext(ThemeContext);
// Simulate button click
return `Click to toggle theme. (Calling toggleTheme function)`;
};
// --- App structure ---
const App = () => {
return ThemeProvider({
children: ThemeTogglerButton()
});
};
// --- Entry point ---
function main() {
console.log(App()); // Simulate rendering
// In a real app, a button click would call toggleTheme
ThemeContext.value.toggleTheme(); // Simulate a click
console.log("After simulated click, new theme:", _themeState);
}
main();Når bør du bruke Context?
Context egner seg godt for global tilstand, men er ikke en erstatning for lokal komponenttilstand eller prop drilling i enkle tilfeller.
- Globale data: Brukes til temaer, brukergodkjenning og språkinnstillinger.
- Unngå for: Hyppige oppdateringer (kan føre til mange nye renderinger) eller tilstand som bare trengs av noen få direkte underordnede komponenter.
- Separate kontekster: Opprett ulike kontekster for urelaterte deler av den globale tilstanden for å unngå unødvendige nye renderinger.
Context og ytelse
Når en Contexts value endres, rendres alle komponenter som bruker denne konteksten (via useContext), på nytt, selv om de bare bruker en del av verdien.
For å optimalisere kan du:
- Dele store kontekster opp i mindre og mer fokuserte kontekster.
- Memoisere komplekse objekter som sendes som
value, for å hindre unødvendige nye renderinger av komponentene som bruker konteksten.
Rask Context-sjekk
Hvilke av følgende påstander om React Context API er SANNE?
Oppsummering: React Context
Du har lært hvordan du bruker React Context API til å håndtere global tilstand!
createContext: Oppretter et Context-objekt.Context.Provider: Gjør data tilgjengelige for underordnede komponenter viavalue-propen.useContext: Hook for å hente Context-data i funksjonelle komponenter.
Context er effektivt for å dele data som temaer eller brukerinformasjon i hele applikasjonen og reduserer prop drilling.
Lær deg TypeScript 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
- 22
- Leksjoner
- 88
Ofte stilte spørsmål
Er leksjonen «React Context API» gratis?
Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Next.js 15 fullstack (App Router + Server Actions), inkludert «React Context API», 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 Next.js 15 fullstack (App Router + Server Actions) inneholder totalt 4 leksjoner.
Hva lærer jeg i «React Context API»?
Bruk React Context API til å håndtere global tilstand og dele data effektivt mellom komponenter. Du øver på Next.js 15 fullstack (App Router + Server Actions) 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 Next.js 15 fullstack (App Router + Server Actions)?
Ingen tidligere erfaring er nødvendig. Next.js 15 fullstack (App Router + Server Actions) 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 1 av 4.
Hvor lang tid tar leksjonen «React Context API»?
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 Next.js 15 fullstack (App Router + Server Actions)-leksjonen?
Ja. Alle Next.js 15 fullstack (App Router + Server Actions)-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
- React Context API
- Global tilstand med Zustand
- Håndtering av servertilstand
- Lagre tilstand i localStorage