Provider
- React Native kursu
- Orta seviye
- Ders 15/116
- 5 dk
Context.Provider ile değer sağlamayı öğrenirsin.
Provider nedir?
Provider context'e değer sağlayan bileşendir. Her context nesnesinin .Provider özelliği vardır: <ThemeContext.Provider value={theme}>...</ThemeContext.Provider>. Provider'ın altındaki tüm bileşenler bu değere erişebilir.
Provider'ın value özelliği zorunludur; bu prop olmadan çalışmaz. Değer değiştiğinde tüm tüketen alt bileşenler yeniden render edilir. Birden çok Provider iç içe geçebilir; en içteki değer kazanır. Uygulamanın köküne bir kez koyarak tüm ağacı sarmak yaygın bir desendir.
Provider kullanımı
Provider'ı uygulamanın üst kısmında sarıcı olarak kullanırsın. Örneğin <ThemeContext.Provider value="dark"><App /></ThemeContext.Provider> yazdığında App ve altındaki tüm bileşenler theme değerine erişir.
Değer genellikle state'ten gelir: const [theme, setTheme] = useState("dark") yazıp value={theme} verirsin. Böylece kullanıcı temayı değiştirdiğinde tüm alt bileşenler güncellenir. Provider iç içe de geçebilir; örneğin hem ThemeContext.Provider hem LocaleContext.Provider aynı kökü sarabilir.
Uygulama Provider ile sar
Bir App bileşeni yaz. useState ile theme tut (ilk değer "dark"). <ThemeContext.Provider value={theme}> ile <Text>Tema</Text>'i sar. ThemeContext'i dışarıda tanımla.
Başlangıç kodu
// createContext ve useState'i içe aktar
// ThemeContext'i createContext ile oluştur (varsayılan null)
function App() {
// theme state'ini useState ile tut (ilk değer "dark")
// Provider ile <Text>Tema</Text>'i sar; value prop'una theme ver
return <Text>Tema</Text>;
}Örnek çözüm
import { createContext, useState } from "react";
import { Text } from "react-native";
const ThemeContext = createContext(null);
function App() {
const [theme, setTheme] = useState("dark");
return (
<ThemeContext.Provider value={theme}>
<Text>Tema</Text>
</ThemeContext.Provider>
);
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Parçayı rolüne eşle
| Kavram | Anlamı |
|---|---|
Provider |
Değeri sağlar |
value |
Sağlanan veri |
useContext |
Değeri okur |
createContext |
Context'i oluşturur |
2 Provider kullan
<ThemeContext.Provider ____={theme}><App /></ThemeContext.Provider><ThemeContext.Provider value={theme}><App /></ThemeContext.Provider>Açıklama: value prop'u değeri sağlar.
3 Provider'ın hangi prop'u zorunludur?
<ThemeContext.Provider value={theme}>
<App />
</ThemeContext.Provider>- children
- style
- value Doğru cevap
- key
Açıklama: Provider bu prop olmadan çalışmaz.