- Konu sahibi
- #1
React Context, aynı React ağacındaki uzak bileşenlerin ortak bir değere props zinciri kurmadan erişmesi gerektiğinde kullanılır. Tema, dil, oturum açmış kullanıcı veya uygulama genelindeki ayarlar bunun tipik örnekleridir. Ancak her değişkeni Context'e taşımak doğru değildir; yalnızca belirli bir bileşen alt ağacının paylaşması gereken ve birçok seviyeden geçirilmesi zahmetli olan değerlerde tercih edilmelidir.
Önce
Context bir veritabanı veya otomatik durum yönetimi sistemi değildir. Değerin kendisi çoğunlukla
Context'in en güçlü kullanım alanı, aradaki bileşenlerin değeri kullanmadığı prop drilling problemidir. Örneğin üstteki uygulama bileşeni temayı, arada kalan sayfa ve yerleşim bileşenlerinden geçirerek düğmeye ulaştırmak zorunda kalıyorsa Context bu aktarımı sadeleştirir.
Aşağıdaki örnek, sağlayıcıyı kurar ve alt bileşenden temayı okur:
Uygulama çalıştığında düğmede önce
Örnek tema adını değiştirip düğmede gösterir; bütün sayfanın renklerini kendiliğinden değiştirmez. Gerçek tema stilleri ayrıca bu değere bağlanır. Provider her render’da yeni bir value nesnesi üretir; büyük bir uygulamada sorun ölçülürse sorumlulukları ayırma veya uygun memoization düşünülebilir. En baştan her değeri memoize etmek zorunlu değildir.
Context’te kullanıcı bilgisi taşımak sunucudaki oturum ve yetkilendirmenin yerine geçmez. Tarayıcıdaki kullanıcı nesnesi veya bir menünün gizlenmesi API erişimi için güvenlik kanıtı değildir.
Context'i tüm uygulama durumlarının varsayılan deposu yapmak, veri akışını görünmezleştirir ve bileşenlerin hangi değere bağlı olduğunu anlamayı zorlaştırır. Sık değişen bağımsız değerleri tek büyük Context nesnesinde toplamak da gereksiz yeniden değerlendirmeleri artırabilir. Ayrıca sağlayıcı dışında
Context değeri yalnızca belirli bir React ağacındaki sağlayıcı ve tüketiciler arasında paylaşır. Global değişken ise React'in veri akışı ve yeniden render mekanizmasının dışında kalabilir; bu yüzden arayüz güncellemeleri kendiliğinden ve öngörülebilir olmayabilir.
Hayır. Esas olarak ilgili Context'i tüketen bileşenler güncellenir; ancak bu bileşenlerin alt ağacı ve sağlayıcı yapısı yine önemlidir. Değeri gereksiz yere sık değiştirmemek ve farklı sorumlulukları ayrı Context'lerde tutmak daha iyi kontrol sağlar.
Context nasıl çalışır?
Önce
createContext ile bir Context oluşturulur. Değeri sağlayacak üst bileşen, alt ağacı Provider ile sarar. Alt bileşenler de useContext kullanarak en yakın sağlayıcının değerini okur. Sağlayıcının value değeri Object.is karşılaştırmasına göre değiştiğinde ilgili Context’i tüketen bileşenler güncellenir. Aynı alanları taşısa bile her render’da oluşturulan yeni bir nesne farklı değer kimliğidir.Context bir veritabanı veya otomatik durum yönetimi sistemi değildir. Değerin kendisi çoğunlukla
useState, useReducer ya da başka bir kaynaktan gelir; Context yalnızca bu değeri bileşen ağacında ulaştırır.Hangi durumlarda uygundur?
| Durum | Context kararı | Gerekçe |
|---|---|---|
| Tema veya görünüm ayarı | Genellikle uygundur | Birçok uzak bileşen aynı ayarı okur |
| Dil ve yerelleştirme bilgisi | Uygundur | Metin ve biçimlendirme bileşenler arasında paylaşılır |
| Oturum açmış kullanıcı | Uygundur | Menü, profil ve yetki kontrollü alanlar aynı bilgiyi kullanır |
| Yalnızca ebeveyn ile çocuğun kullandığı veri | Gerekmez | Props daha açık ve daha kolay izlenir |
| Çok sık değişen büyük liste | Dikkatli kullanılmalı | Çok sayıda tüketici gereksiz yeniden değerlendirme yapabilir |
Context'in en güçlü kullanım alanı, aradaki bileşenlerin değeri kullanmadığı prop drilling problemidir. Örneğin üstteki uygulama bileşeni temayı, arada kalan sayfa ve yerleşim bileşenlerinden geçirerek düğmeye ulaştırmak zorunda kalıyorsa Context bu aktarımı sadeleştirir.
Çalışan bir tema örneği
Aşağıdaki örnek, sağlayıcıyı kurar ve alt bileşenden temayı okur:
Kod:
import { createContext, useContext, useState } from "react";
const ThemeContext = createContext(null);
function ThemeProvider({ children }) {
const [theme, setTheme] = useState("light");
const value = {
theme,
toggleTheme: () => {
setTheme((current) => current === "light" ? "dark" : "light");
}
};
return (
<ThemeContext.Provider value={value}>
{children}
</ThemeContext.Provider>
);
}
function ThemeButton() {
const { theme, toggleTheme } = useContext(ThemeContext);
return (
<button type="button" onClick={toggleTheme}>
Tema: {theme}
</button>
);
}
export default function App() {
return (
<ThemeProvider>
<ThemeButton />
</ThemeProvider>
);
}Uygulama çalıştığında düğmede önce
Tema: light görünür; düğmeye basınca dark olur. Bu sonuç, ThemeButton bileşeninin aradaki props aktarımı olmadan sağlayıcıdaki değeri okuyabildiğini gösterir. Kendi uygulamanızda sağlayıcıyı yalnızca temaya ihtiyaç duyan sayfa veya uygulama bölümünün çevresine yerleştirin.Örnek tema adını değiştirip düğmede gösterir; bütün sayfanın renklerini kendiliğinden değiştirmez. Gerçek tema stilleri ayrıca bu değere bağlanır. Provider her render’da yeni bir value nesnesi üretir; büyük bir uygulamada sorun ölçülürse sorumlulukları ayırma veya uygun memoization düşünülebilir. En baştan her değeri memoize etmek zorunlu değildir.
Uygulamaya karar verme adımları
- Değerin kaç bileşen tarafından kullanılacağını belirleyin. Tek bir ebeveyn ve doğrudan çocuğu arasında kullanılıyorsa önce props ile başlayın.
- Değerin ortak bir anlamı olup olmadığını kontrol edin. Tema, dil, kullanıcı veya form kapsamı gibi bir kavramsa Context adayıdır.
- Context'i değere ihtiyaç duyan en küçük ortak üst bileşene yerleştirin; tüm uygulamayı gereksiz yere sarmalamayın.
- Değeri ve değiştirme işlemlerini anlaşılır bir nesneyle sağlayın. Tüketici bileşenlerinin sağlayıcının iç durumunu doğrudan değiştirmesine izin vermek yerine işlev sunun.
- Değer çok sık değişiyorsa veya tüketici sayısı fazlaysa güncellemelerin gereksiz bileşenleri etkileyip etkilemediğini gözlemleyin. Gerekirse Context'leri tema, kullanıcı ve ayar gibi ayrı sorumluluklara bölün.
Context’te kullanıcı bilgisi taşımak sunucudaki oturum ve yetkilendirmenin yerine geçmez. Tarayıcıdaki kullanıcı nesnesi veya bir menünün gizlenmesi API erişimi için güvenlik kanıtı değildir.
Sık yapılan hatalar
Context'i tüm uygulama durumlarının varsayılan deposu yapmak, veri akışını görünmezleştirir ve bileşenlerin hangi değere bağlı olduğunu anlamayı zorlaştırır. Sık değişen bağımsız değerleri tek büyük Context nesnesinde toplamak da gereksiz yeniden değerlendirmeleri artırabilir. Ayrıca sağlayıcı dışında
useContext çağırmak, oluşturulurken verilen varsayılan değerin kullanılmasına veya beklenmeyen bir sonuca yol açabilir. Bu nedenle zorunlu Context'lerde, sağlayıcı eksikse açık hata veren özel bir yardımcı hook yazmak daha güvenlidir.Kaynaklar
Sık sorulan sorular
Context ile global değişken arasındaki fark nedir?
Context değeri yalnızca belirli bir React ağacındaki sağlayıcı ve tüketiciler arasında paylaşır. Global değişken ise React'in veri akışı ve yeniden render mekanizmasının dışında kalabilir; bu yüzden arayüz güncellemeleri kendiliğinden ve öngörülebilir olmayabilir.
Her Context değişikliğinde tüm uygulama yeniden mi çizilir?
Hayır. Esas olarak ilgili Context'i tüketen bileşenler güncellenir; ancak bu bileşenlerin alt ağacı ve sağlayıcı yapısı yine önemlidir. Değeri gereksiz yere sık değiştirmemek ve farklı sorumlulukları ayrı Context'lerde tutmak daha iyi kontrol sağlar.
