Context default değeri

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.

Örnek çözümü göster

import { createContext, useContext } from "react";

const LangContext = createContext(null);

function Picker() {
  const lang = useContext(LangContext);
  console.log(lang);
  return null;
}

Kendini test et

Default değer ver

const ThemeContext = createContext(____);

Cevabı göster

const ThemeContext = createContext("light");

Senaryoyu karara eşle

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
createContext(null) ne zaman yararlı?
```
const ThemeContext = createContext(null);
```
- AsyncStorage yerine
- Provider'ı unutanı erken uyarmak için
- Tüm bileşenlerin varsayılan tema için
- Stilleri paylaşmak için
Cevabı göster

Provider'ı unutanı erken uyarmak için — null default Provider'ı unutanı uyarmak için kullanılır.

Sıradaki ders: Özet - Context

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler