useContext do stanu globalnego
Proszę utworzyć Context, opakować poddrzewo jego Providerem oraz pobierać wartość za pomocą useContext, aby współdzielić stan motywu lub uwierzytelniania bez przekazywania props w dół drzewa.
useContext do stanu globalnego to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Problem z przekazywaniem propsów przez wiele poziomów
Przekazywanie propsów przez wiele poziomów oznacza przekazywanie danych przez wiele pośrednich komponentów, które ich nie używają, tylko po to, aby dotrzeć do głęboko zagnieżdżonego komponentu potomnego. Context rozwiązuje ten problem, udostępniając wartość dowolnemu komponentowi w drzewie bez jawnego przekazywania.
Tworzenie kontekstu
createContext(defaultValue) tworzy obiekt Context. Wartość domyślna jest używana, gdy komponent odczytuje kontekst bez pasującego komponentu Provider powyżej siebie.
import { createContext } from 'react';
interface ThemeContextType {
theme: 'light' | 'dark';
toggleTheme: () => void;
}
const ThemeContext = createContext<ThemeContextType>({
theme: 'light',
toggleTheme: () => {}
});Udostępnianie kontekstu
Owiń część drzewa, która potrzebuje kontekstu, komponentem Provider. Wszystkie komponenty znajdujące się wewnątrz mogą odczytywać wartość kontekstu.
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>Korzystanie z useContext
Każdy komponent znajdujący się wewnątrz komponentu Provider może uzyskać dostęp do wartości kontekstu za pomocą useContext(ThemeContext). Nie trzeba przekazywać niczego jako propsu.
function ThemeToggle() {
const { theme, toggleTheme } = useContext(ThemeContext);
return (
<button onClick={toggleTheme}>
Switch to {theme === 'light' ? 'dark' : 'light'} mode
</button>
);
}Niestandardowy hook opakowujący useContext
Należy wyeksportować niestandardowy hook, który wewnętrznie wywołuje useContext. Jest to bardziej przejrzyste niż bezpośrednie udostępnianie kontekstu i pozwala dodać walidację.
function useTheme() {
const ctx = useContext(ThemeContext);
if (!ctx) throw new Error('useTheme must be used inside ThemeProvider');
return ctx;
}
// Usage:
const { theme } = useTheme();Ponowne renderowanie kontekstu
Gdy wartość komponentu Provider się zmieni, wszystkie komponenty korzystające z kontekstu zostaną ponownie wyrenderowane. Jeśli wartość jest obiektem, nowa referencja obiektu przy każdym renderowaniu spowoduje ponowne renderowanie wszystkich komponentów korzystających z kontekstu. Aby temu zapobiec, należy zapamiętać wartość za pomocą useMemo.
const value = useMemo(
() => ({ theme, toggleTheme }),
[theme] // toggleTheme is stable if created with useCallback
);
<ThemeContext.Provider value={value}>Kiedy używać Context
Dobre zastosowania: motyw, ustawienia regionalne, uwierzytelniony użytkownik, flagi funkcji, system powiadomień. Mniej odpowiednie zastosowania: aktualizacje o wysokiej częstotliwości (przy każdym naciśnięciu klawisza), duży i złożony stan (zamiast tego należy użyć store’a).
Wiele kontekstów
Można mieć wiele niezależnych kontekstów. Należy zachować ich wyspecjalizowany zakres — AuthContext do uwierzytelniania, ThemeContext do motywu. Należy unikać jednego wszechogarniającego kontekstu przechowującego wszystko.
Context a Redux
Context jest wbudowany i wystarcza do przechowywania globalnych danych, które zmieniają się rzadko. Redux/Zustand/Pinia lepiej sprawdzają się w przypadku złożonego stanu z wieloma aktualizacjami, debugowaniem z możliwością cofania w czasie lub wymaganiami dotyczącymi middleware.
Wzorzec Auth Context
Typowy wzorzec to AuthContext przechowujący bieżącego użytkownika i metody uwierzytelniania. Komponenty korzystające z kontekstu otrzymują użytkownika bez prop drillingu.
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;
};Context i TypeScript
Należy określić typ kontekstu za pomocą interfejsu. Jako wartość początkową należy użyć null, a w niestandardowym hooku zgłaszać wyjątek, jeśli wartość jest null. Zapobiega to cichemu wystąpieniu niemożliwego stanu „użycia poza komponentem Provider”.
Wydajność: memo + Context
Komponenty opakowane w React.memo nie są ponownie renderowane, dopóki nie zmienią się ich propsy. Jeśli wynik komponentu korzystającego z kontekstu zależy tylko od jego części, należy podzielić kontekst lub użyć wzorców z selektorami, aby uniknąć niepotrzebnego ponownego renderowania.
Szybki test
Co zwraca useContext(MyContext), gdy zostanie wywołane wewnątrz komponentu, nad którym nie znajduje się żaden komponent Provider?
Podsumowanie: useContext
createContext tworzy kontekst z wartością domyślną. Należy opakować drzewo komponentów w Provider, aby dostarczyć wartość. useContext odczytuje tę wartość w dowolnym miejscu wewnątrz drzewa. Niestandardowe hooki opakowują useContext, umożliwiając walidację. Należy memoizować wartość komponentu Provider, aby zapobiec niepotrzebnemu ponownemu renderowaniu. Context należy stosować do globalnych danych zmieniających się rzadko, takich jak motyw i dane uwierzytelniania.
Często zadawane pytania
Czy lekcja „useContext do stanu globalnego” jest bezpłatna?
Tak — pełny tekst „useContext do stanu globalnego” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „useContext do stanu globalnego”?
Proszę utworzyć Context, opakować poddrzewo jego Providerem oraz pobierać wartość za pomocą useContext, aby współdzielić stan motywu lub uwierzytelniania bez przekazywania props w dół drzewa. Ćwiczysz Frontend Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Frontend Academy?
Nie wymagamy żadnego doświadczenia. Frontend Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.
Ile czasu zajmuje lekcja „useContext do stanu globalnego”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Frontend Academy?
Tak. Każda lekcja Frontend Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- useContext do stanu globalnego
- useReducer do złożonego stanu
- useMemo i useCallback na potrzeby wydajności
- Własne hooki: wydzielanie wielokrotnego użytku logiki