Context nedir?

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.

Örnek çözümü göster

import { createContext } from "react";

const ThemeContext = createContext("light");

export default ThemeContext;

Kendini test et

Prop drilling ne demektir?
- State'i yukarı taşımak
- Veriyi context ile taşımak
- Veriyi props ile katman katman taşımak
- useEffect ile veri çekmek
Cevabı göster

Veriyi props ile katman katman taşımak — Prop drilling props ile katman katman taşımaktır.

Context kullanımı

Tema ve dil gibi ____ veriler context için uygundur.

Cevabı göster

Tema ve dil gibi küresel veriler context için uygundur.

Context kavramlarını eşleştir

Prop drilling

Katman katman props
Context

Küresel veri
Tema

Tipik kullanım
useContext

Okuma kancası

Sıradaki ders: createContext

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler