React Context API
Brug React Context API til effektivt at administrere global state og dele data på tværs af komponenter.
React Context API er en gratis Next.js 15 i full stack (App Router + Server Actions)-lektion på CoddyKit. Dette er lektion 1 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 Next.js 15 i full stack (App Router + Server Actions), og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Next.js 15 i full stack (App Router + Server Actions)-kurset indeholder 4 lektioner i alt.
Hvorfor global tilstand?
I større programmer har komponenter ofte brug for at dele data. Når data sendes ned gennem mange lag af komponenter, kaldes det prop drilling. Det kan gøre koden svær at læse og vedligeholde.
React Context API hjælper med at løse dette ved at gøre det muligt at dele tilstand på tværs af komponenttræet uden manuelt at sende props videre på hvert niveau.
Mød React Context
React Context gør det muligt at sende data gennem komponenttræet uden manuelt at skulle sende props videre på hvert niveau.
Det er udviklet til at dele "globale" data for et træ af React-komponenter, f.eks. den aktuelt godkendte bruger, temaet eller det foretrukne sprog.
Definér din Context
Det første trin er at oprette et Context-objekt ved hjælp af React.createContext(). Du kan give det en standardværdi, som bruges, når en komponent forsøger at hente Context uden en tilsvarende Provider højere oppe i træet.
// 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();Gør data tilgængelige
For at gøre Context-værdien tilgængelig for komponenter pakker du dem ind i en Context Provider. Provideren modtager en value-prop, som er de data, alle indlejrede komponenter kan få adgang til.
Du kan have flere Providere til forskellige Contexts eller endda indlejrede Providere for den samme Context for at tilsidesætte værdier.
// 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();Tilgå Context med en Hook
Den nemmeste måde at læse Context i en funktionel komponent på er at bruge useContext-hooken. Den modtager selve Context-objektet (f.eks. UserContext) som argument og returnerer den aktuelle Context-value.
Når Context-værdien ændres, gengengiver komponenten, der bruger useContext, automatisk sig selv.
// 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
Lad os bygge en enkel temavælger ved hjælp af Context. Vi gemmer det aktuelle tema (f.eks. 'light' eller 'dark') og en funktion til at skifte det i vores Context.
Først opretter vi Context og en wrapper-komponent, ThemeProvider, som håndterer 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 aktuelle tema
Nu hvor vi har vores ThemeProvider, kan alle komponenter, der er indlejret i den, få adgang til theme og funktionen toggleTheme ved hjælp af useContext(ThemeContext). Lad os oprette en komponent, der viser det aktuelle tema.
// 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();Tilføj interaktivitet
For at give brugerne mulighed for at ændre temaet skal vi kunne kalde funktionen toggleTheme, som vores ThemeProvider leverer. Vi opretter en knapkomponent, der bruger useContext til at hente denne funktion og udløse den ved et klik.
// 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();Hvornår skal du bruge Context?
Context er velegnet til global tilstand, men den erstatter ikke lokal komponenttilstand eller prop drilling i enkle tilfælde.
- Globale data: Brug det til temaer, brugergodkendelse og sprogindstillinger.
- Undgå det til: Hyppige opdateringer (det kan medføre mange gengivninger) eller tilstand, som kun bruges af nogle få direkte børn.
- Separate Contexts: Opret forskellige Contexts til urelaterede dele af den globale tilstand for at forhindre unødvendige gengivninger.
Context og ydeevne
Når en Contexts value ændres, gengiver alle komponenter, der bruger denne Context (via useContext), sig selv igen, selv hvis de kun bruger en del af værdien.
Du kan optimere ved at:
- Opdele store Contexts i mindre og mere fokuserede Contexts.
- Memoisere komplekse objekter, der sendes som
value, for at forhindre unødvendige gengivninger af de komponenter, der bruger dem.
Hurtigt Context-tjek
Hvilke af følgende udsagn om React Context API er SANDE?
Opsummering: React Context
Du har lært at bruge React Context API til at håndtere global tilstand!
createContext: Opretter et Context-objekt.Context.Provider: Gør data tilgængelige for børn via sinvalue-prop.useContext: Hook til at hente Context-data i funktionelle komponenter.
Context er effektiv til at dele data som temaer eller brugeroplysninger på tværs af dit program og reducerer prop drilling.
Lær TypeScript 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
- 22
- Lektioner
- 88
Ofte stillede spørgsmål
Er lektionen “React Context API” gratis?
Ja — alle 3 lektioner i læringssporet Next.js 15 i full stack (App Router + Server Actions), inklusive “React Context API”, 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. Next.js 15 i full stack (App Router + Server Actions)-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “React Context API”?
Brug React Context API til effektivt at administrere global state og dele data på tværs af komponenter. Du øver dig i Next.js 15 i full stack (App Router + Server Actions) 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å Next.js 15 i full stack (App Router + Server Actions)?
Der kræves ingen tidligere erfaring. Next.js 15 i full stack (App Router + Server Actions) 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 “React Context API”?
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 Next.js 15 i full stack (App Router + Server Actions)-lektion?
Ja. Alle Next.js 15 i full stack (App Router + Server Actions)-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
- React Context API
- Global state med Zustand
- Håndtering af server-state
- Persisting af state i localStorage