useContext
- React Native kursu
- Orta seviye
- Ders 16/116
- 5 dk
useContext ile context tüketmeyi öğrenirsin.
useContext nedir?
useContext bir context'ten değeri okuyan hook'tür. const theme = useContext(ThemeContext) yazdığında en yakın Provider'ın verdiği değeri alırsın. Eğer Provider yoksa, context'in varsayılan değeri döner.
useContext kullanan bileşen, context değeri değiştiğinde otomatik yeniden render edilir. Bu sayede props ile veri taşımaya gerek kalmaz. useContext her zaman en yakın Provider'ın değerini alır; iç içe Provider'lar varsa en içteki geçerli olur. Hook'u react paketinden içe aktar: import { useContext } from "react".
useContext kullanımı
useContext'i çağırmak için önce ilgili context'i içe aktarmalısın. Sonra const theme = useContext(ThemeContext) yazarsın. Bundan sonra theme değişkeni bir state gibi kullanılır; ama güncelleme setState ile değil, Provider'ın değerini değiştirerek yapılır.
Önemli nokta: useContext'i her çağırdığında React o bileşeni context değişimine abone eder. Provider'ın değeri değiştiğinde tüm abone bileşenler yeniden render edilir. Bu yüzden context'i yalnızca gerçekten global verilere ayır; sık değişen ve yalnızca birkaç bileşenin ilgilendiği veriler için state daha uygun olabilir.
Uygulama useContext ile tema oku
Bir ThemedText bileşeni yaz. useContext ile ThemeContext'ten theme değerini oku. Bileşen <Text>{theme}</Text> döndürsün. ThemeContext'i dışarıda tanımla.
Başlangıç kodu
// useContext ve createContext'i içe aktar
// ThemeContext'i createContext ile oluştur; varsayılan "light"
function ThemedText() {
// useContext ile ThemeContext'ten theme değerini oku
return <Text>Tema</Text>;
}Örnek çözüm
import { createContext, useContext } from "react";
import { Text } from "react-native";
const ThemeContext = createContext("light");
function ThemedText() {
const theme = useContext(ThemeContext);
return <Text>{theme}</Text>;
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 useContext ne döndürür?
const theme = useContext(ThemeContext);- Provider bileşenini
- Varsayılan değeri her zaman
- Context nesnesini
- En yakın Provider'ın değerini Doğru cevap
Açıklama: useContext en yakın Provider'ın değerini döner.
2 useContext'i çağır
const theme = ____(ThemeContext);const theme = useContext(ThemeContext);Açıklama: useContext ile değer okunur.
3 Kavramı rolüne eşle
| Kavram | Anlamı |
|---|---|
useContext |
Değeri okur |
ThemeContext |
Context nesnesi |
Provider |
Değeri sağlar |
theme |
Okunan değer |