Provider ve useContext
- React kursu
- Başlangıç
- Ders 71/84
- 4 dk
Provider ile veri sağlayıp useContext ile okumayı öğrenirsin.
Provider ve useContext
Provider, context'e değer veren bileşendir. <ThemeContext.Provider value={ '{ "dark" }' }>...</ThemeContext.Provider> biçiminde kullanılır; sardığı tüm bileşenler bu değeri okur.
Okuma tarafında useContext kancası gelir: const theme = useContext(ThemeContext);. Bu çağrı en yakın Provider'ın değerini döndürür. Provider yoksa varsayılan değer kullanılır.
Her Context değiştiğinde, onu useContext ile okuyan tüm bileşenler yeniden çizer. Bu yüzden Provider'ın value özniteliğinin gereksiz değişmemesine dikkat etmek gerekir.
Birden çok Provider
Aynı context'i farklı alt ağaçlarda farklı değerlerle sarabilirsin. Üst seviyede <ThemeContext.Provider value="dark"> ve alt seviyede <ThemeContext.Provider value="light"> kullanırsan, alt seviyedeki bileşenler light alır.
Bu desen, modal içinde farklı tema göstermek ya da dil değiştirme özelliği eklemek için kullanışlıdır. En içteki Provider daima kazanır.
İç içe Provider'lar maliyetlidir ama yine de aynı context'i kullanırlar. Yeni context nesnesi tanımlamana gerek yoktur.
Uygulama Tema.Provider ile sar
Aşağıdaki iskeleti tamamla. App bileşeni yaz; <ThemeContext.Provider value="dark"> ile <h1>Site</h1> sarsın. ThemeContext'in ithal edildiğini varsay. Dışa aktarmayı unutma.
Başlangıç kodu
// App bileşenini buraya yazÖrnek çözüm
function App() {
return (
<ThemeContext.Provider value="dark">
<h1>Site</h1>
</ThemeContext.Provider>
);
}
export default App;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 useContext ne döndürür?
- En yakın Provider'ın değerini Doğru cevap
- Tüm Provider'ları
- Varsayılan değeri hep
- State'i
Açıklama: useContext en yakın Provider'ın değerini döndürür.
2 Provider özniteliği
Provider, değeri ____ özniteliği ile alır.Provider, değeri value özniteliği ile alır.Açıklama: Provider value özniteliği ile değer alır.
3 Provider desenini eşleştir
| Kavram | Anlamı |
|---|---|
Provider |
Değer verir |
value |
Veriyi taşır |
useContext |
Okur |
İç içe |
İçteki kazanır |