Provider ve useContext

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.

Örnek çözümü göster

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <h1>Site</h1>
    </ThemeContext.Provider>
  );
}

export default App;

Kendini test et

useContext ne döndürür?
- En yakın Provider'ın değerini
- Tüm Provider'ları
- Varsayılan değeri hep
- State'i
Cevabı göster

En yakın Provider'ın değerini — useContext en yakın Provider'ın değerini döndürür.

Provider özniteliği

Provider, değeri ____ özniteliği ile alır.

Cevabı göster

Provider, değeri value özniteliği ile alır.

Provider desenini eşleştir

Provider

Değer verir
value

Veriyi taşır
useContext

Okur
İç içe

İçteki kazanır

Sıradaki ders: Özet - Context

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler