Context default değeri
- React Native kursu
- Orta seviye
- Ders 17/116
- 5 dk
Context default değeri ve fallback öğrenirsin.
Default değeri nedir?
Context'in default (varsayılan) değeri, bileşen herhangi bir Provider içinde değilken useContext'in döndürdüğü değerdir. createContext("light") yazdığında bu varsayılan "light" olur.
Default değer iki amaçla kullanılır. Birincisi gerçek bir başlangıç değeri vermek: uygulama kökünde Provider yoksa bile bileşenler çalışmaya devam eder. İkincisi hata yakalama: createContext(null) yapıp alt bileşende null dönüyorsa Provider'ı unutmuşsun demektir; bu kolayca fark edilir. Hangi yöntemi seçeceğin, hata yapmaya mı yoksa esnek çalışmaya mı öncelik verdiğine bağlı.
Null default ile hata yakala
Bazı ekipler createContext(null) yazmayı tercih eder. Bu yöntemde, eğer bir bileşen Provider dışında kullanılırsa useContext null döner; bunu gören geliştirici hatayı hemen fark eder.
Özellikle büyük uygulamalarda Provider'ı unutmak kolaydır. null döndüğünde alt bileşen theme.toUpperCase() gibi bir çağrı yaparsa hata alır; bu, ekranın sessizce bozulması yerine erken bir uyarı verir. Bu yüzden birçok ekip default değeri null yapıp hatayı erkenden yakalamayı seçer. Uygulamanın kökünde Provider olduğundan emin olursan bu yaklaşım işe yarar.
Uygulama Default değeri kullan
LangContext adında bir context oluştur. createContext(null) kullan. Sonra Picker bileşeni yaz; useContext(LangContext) ile lang değerini oku ve console.log(lang) yaz.
Başlangıç kodu
// createContext ve useContext'i içe aktar
// LangContext'i createContext ile oluştur; varsayılan null
function Picker() {
// useContext ile LangContext'ten lang değerini oku
// lang değerini console.log ile yaz
return null;
}Örnek çözüm
import { createContext, useContext } from "react";
const LangContext = createContext(null);
function Picker() {
const lang = useContext(LangContext);
console.log(lang);
return null;
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Default değer ver
const ThemeContext = createContext(____);const ThemeContext = createContext("light");Açıklama: "light" varsayılan tema olur.
2 Senaryoyu karara eşle
| Kavram | Anlamı |
|---|---|
Provider var |
Provider değeri döner |
Provider yok, default null |
null döner |
Provider yok, default "light" |
light döner |
useContext çağrısı |
Değeri okur |
3 createContext(null) ne zaman yararlı?
const ThemeContext = createContext(null);- AsyncStorage yerine
- Provider'ı unutanı erken uyarmak için Doğru cevap
- Tüm bileşenlerin varsayılan tema için
- Stilleri paylaşmak için
Açıklama: null default Provider'ı unutanı uyarmak için kullanılır.