Context nedir?
- React Native kursu
- Orta seviye
- Ders 13/116
- 5 dk
Context API ile global state öğrenirsin.
Context nedir?
React Native'te Context veriyi bileşen ağacı boyunca props ile elle geçirmeden paylaşmayı sağlar. Üst bileşen bir değer verir; alt bileşenler bu değeri doğrudan okur. Bu, prop drilling (her katmana aynı prop'u geçmek) sorununu çözer.
Örneğin tema, kullanıcı oturumu veya dil seçimi tüm uygulama genelinde kullanılır. Context bunları tek bir kaynakta tutar. Context, theme ve locale gibi global veriler için idealdir; sık değişen verilerde performans kaygısı olduğundan dikkatli kullanılır. Üç adımdan kurulur: oluştur, sağla, tüket.
Üç adım
Context üç adımda kurulur. Birincisi oluştur: createContext ile bir context nesnesi yaparsın. İkincisi sağla: üst bileşende Context.Provider ile değeri verirsin. Üçüncüsü tüket: alt bileşende useContext ile değeri okursun.
Bu üç adım context'in kalbidir. Provider'dan geçen her alt bileşen değere erişebilir; aradaki bileşenlerin değeri prop olarak geçmesine gerek kalmaz. Bu yapı sayesinde uygulamanın herhangi bir yerinden merkezi değere ulaşabilirsin; tema değiştiğinde tüm alt bileşenler otomatik güncellenir.
Uygulama Context oluştur
ThemeContext adında bir context oluştur. createContext kullan; varsayılan değer "light" olsun. Sonra console.log(ThemeContext) ile yaz.
Başlangıç kodu
// createContext'i içe aktar
// ThemeContext'i createContext ile oluştur; varsayılan "light"
// ThemeContext'i yazdırÖrnek çözüm
import { createContext } from "react";
const ThemeContext = createContext("light");
console.log(ThemeContext);Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Context hangi sorunu çözer?
const ThemeContext = createContext("light");- Prop drilling Doğru cevap
- Stil karışıklığını
- Bileşen adlandırmasını
- Klasör yapısını
Açıklama: Context, prop drilling sorununu çözer.
2 Context'i içe aktar
import { ____ } from "react";import { createContext } from "react";Açıklama: createContext react paketinden içe aktarılır.
3 Adımı sıraya eşle
| Kavram | Anlamı |
|---|---|
createContext |
Oluştur |
Provider |
Sağla |
useContext |
Tüket |
value |
Sağlanan veri |