createContext
- React kursu
- Başlangıç
- Ders 70/84
- 4 dk
createContext ile bir context ve varsayılan değer yaratmayı öğrenirsin.
createContext
createContext(defaultValue) çağrısı bir context nesnesi döndürür. Bu nesne iki parça içerir: Provider (değeri veren taraf) ve Consumer/okuma tarafı.
Varsayılan değer yalnızca ağacın üstünde bir Provider yokken kullanılır. Yani Provider sarmıyorsa bileşen, defaultValue alır; sarmışsa Provider'ın verdiği değeri alır.
Context nesnesinin adı büyük harfle başlamalıdır; bu React'in bileşen mi context mi olduğunu anlaması için bir yöntemdir. ThemeContext, UserContext gibi.
Context nesnesinin parçaları
Her context nesnesinin iki önemli parçası vardır: Provider ve okuma kancası useContext. Provider bir bileşen gibi kullanılır ve value özniteliği alır.
Provider'ı ağacın üstünde bir yere koyarsın; içindeki tüm bileşenler bu değeri okuyabilir. Birden çok Provider iç içe de geçebilir; en içteki kazanır.
Okuma tarafında useContext(MyContext) çağrısı en yakın Provider'ın değerini döndürür. Bu kancayı bir sonraki derste detaylı göreceğiz.
Uygulama UserContext oluştur
Aşağıdaki iskeleti tamamla. UserContext adında bir context oluştur; createContext'e null varsayılan değerini ver. Sonucu dışa aktar.
Başlangıç kodu
// UserContext'i buraya tanımla
import { createContext } from "react";Örnek çözüm
import { createContext } from "react";
const UserContext = createContext(null);
export default UserContext;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Varsayılan değer ne zaman kullanılır?
- Provider varsa
- Hiçbir zaman
- Her zaman
- Provider yoksa Doğru cevap
Açıklama: Varsayılan yalnızca Provider yoksa kullanılır.
2 Context adlandırma
Context nesnesinin adı ____ harfle başlamalıdır.Context nesnesinin adı büyük harfle başlamalıdır.Açıklama: Context adları büyük harfle başlar.
3 Context parçalarını eşleştir
| Kavram | Anlamı |
|---|---|
Provider |
Değer verir |
value |
Veri özniteliği |
useContext |
Okuma kancası |
defaultValue |
Provider yoksa |