Context nedir?
- React kursu
- Başlangıç
- Ders 69/84
- 4 dk
Context'in prop drilling yerine veri paylaşmanın yolu olduğunu öğrenirsin.
Context nedir?
Context, bileşen ağacının derinliklerine veri aktarmanın React'in resmî yoludur. Normalde veriyi props ile elden ele taşırsın; bu prop drilling olarak bilinir.
Prop drilling kısa ağaçlarda sorun değildir ama dört-beş seviye inildiğinde aradaki bileşenler kullanmadıkları veriyi taşımak zorunda kalır. Context, veriyi doğrudan ihtiyaç duyulan bileşene ulaştırır.
Tipik kullanımlar: tema (koyu/açık), dil (tr/en), oturum açmış kullanıcı. Bu veriler pek çok yerde okunur ve props olarak geçmek yorucudur.
Ne zaman context?
Context her durumda kullanılmaz. İki-üç seviye derinlik için hâlâ props yeterlidir; okunurluğu da iyidir. Context'i küresel hissedilen veriler için sakla.
İyi adaylar: tema, yerel ayar (locale), kimlik doğrulama durumu, genel bildirimler. Kötü adaylar: tek bir bileşenin form verisi ya da tek bir liste için items — bunlar yerel state olarak kalmalıdır.
Context her değişimde tüm tüketen bileşenleri yeniden çizer. Bu yüzden çok sık değişen veriyi context'e koymak performansı düşürebilir; ileri seviyede bunun çözümlerini göreceğiz.
Uygulama TemaBaşlığı bağlamı
Aşağıdaki iskeleti tamamla. ThemeContext adında bir context nesnesi oluştur; createContext'e "light" varsayılan değerini ver. Sonucu dışa aktar.
Başlangıç kodu
// ThemeContext'i buraya tanımla
import { createContext } from "react";Örnek çözüm
import { createContext } from "react";
const ThemeContext = createContext("light");
export default ThemeContext;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Prop drilling ne demektir?
- State'i yukarı taşımak
- Veriyi context ile taşımak
- Veriyi props ile katman katman taşımak Doğru cevap
- useEffect ile veri çekmek
Açıklama: Prop drilling props ile katman katman taşımaktır.
2 Context kullanımı
Tema ve dil gibi ____ veriler context için uygundur.Tema ve dil gibi küresel veriler context için uygundur.Açıklama: Küresel veriler context için idealdir.
3 Context kavramlarını eşleştir
| Kavram | Anlamı |
|---|---|
Prop drilling |
Katman katman props |
Context |
Küresel veri |
Tema |
Tipik kullanım |
useContext |
Okuma kancası |