createContext
createContext
, bileşenlerin sağlayabileceği veya okuyabileceği bir context oluşturmanızı sağlar.
const SomeContext = createContext(defaultValue)
Referans
createContext(defaultValue)
Bir context oluşturmak için bileşenlerin dışından createContext
’i çağırın.
import { createContext } from 'react';
const ThemeContext = createContext('light');
Daha fazla örnek için aşağıya bakınız.
Parametreler
defaultValue
: Context’i okuyan bileşenlerin üzerinde eşleşen bir context sağlayıcısı olmadığında contextin sahip olmasını istediğiniz değer. Anlamlı bir varsayılan değeriniz yoksa,null
belirtin. Varsayılan değer, “son çare” olarak başvurulacak bir alternatif olarak düşünülür. Statiktir ve zamanla asla değişmez.
Geri Dönüş Değeri
createContext
bir context nesnesi döndürür.
Context nesnesinin kendisi herhangi bir bilgi içermez. Diğer bileşenlerin hangi contexti okuyacağını veya sağlayacağını temsil eder. Genellikle, context değerini belirtmek için bileşenin üstünde SomeContext.Provider kullanır ve bileşenin altında okumak için useContext(SomeContext) çağırırsınız. Context nesnesinin birkaç özelliği vardır:
SomeContext.Provider
bilenşenlerin context değerini sağlamanıza olanak tanır.SomeContext.Consumer
context değerini okumak için nadiren kullanılan alternatif bir yöntemdir.
SomeContext.Provider
Bileşenlerinizi bir context sağlayıcısı ile sarmalayarak içindeki tüm bileşenler için bu contextin değerini belirtin:
function App() {
const [theme, setTheme] = useState('light');
// ...
return (
<ThemeContext.Provider value={theme}>
<Page />
</ThemeContext.Provider>
);
}
Props
value
: Ne kadar derin olursa olsun, bu sağlayıcının içindeki contexti okuyan tüm bileşenlere aktarmak istediğiniz değer. Context değeri herhangi bir türde olabilir. Sağlayıcı içindeuseContext(SomeContext)
kullanan bir bileşen, üzerindeki en içte bulunan ilgili context sağlayıcısınınvalue
değerini alır.
SomeContext.Consumer
useContext
var olmadan önce, contexti okumak için daha eski bir yol vardı:
function Button() {
// 🟡 Eski yöntem (önerilmez)
return (
<ThemeContext.Consumer>
{theme => (
<button className={theme} />
)}
</ThemeContext.Consumer>
);
}
Bu eski yöntem hala çalışıyor olsa da, yeni yazılan kodun contextini useContext()
ile okumak daha uygundur:
function Button() {
// ✅ Önerilen yöntem
const theme = useContext(ThemeContext);
return <button className={theme} />;
}
Props
children
: Bir fonksiyon. React, üst bileşenlerden gelen contextin güncel değeriniuseContext()
ile aynı algoritmayı kullanarak belirleyecek ve bu fonksiyondan döndürdüğünüz sonucu render edecektir. Üst bileşenlerden gelen context değiştiğinde, React bu fonksiyonu tekrar çalıştırır ve UI’yi günceller.
Kullanım
Context oluşturma
Context, bileşenlerin bilgiyi derinlemesine aktarmasına olanak tanır ve açıkça propları geçirmeden yapar.
Bir veya birden fazla context oluşturmak için bileşenlerin dışında createContext
’i çağırın.
import { createContext } from 'react';
const ThemeContext = createContext('light');
const AuthContext = createContext(null);
createContext
bir context nesnesi döndürür. Bileşenler okumak istediği contexti useContext()‘e ileterek kullanabilir:
function Button() {
const theme = useContext(ThemeContext);
// ...
}
function Profile() {
const currentUser = useContext(AuthContext);
// ...
}
Varsayılan olarak, aldıkları değerler contexti oluştururken belirttiğiniz varsayılan değerler olacaktır. Ancak, varsayılan değerlerin hiçbiri zamanla değişmediği için bu tek başına yararlı değildir.
Context, bileşenlerinizden diğer dinamik değerleri sağlayabileceğiniz için kullanışlıdır:
function App() {
const [theme, setTheme] = useState('dark');
const [currentUser, setCurrentUser] = useState({ name: 'Taylor' });
// ...
return (
<ThemeContext.Provider value={theme}>
<AuthContext.Provider value={currentUser}>
<Page />
</AuthContext.Provider>
</ThemeContext.Provider>
);
}
Şimdi Page
bileşeni ve içindeki herhangi bir bileşen, ne kadar derin olursa olsun, iletilen context değerlerini “görecek” ve iletilen context değerleri değişirse, React contexti okuyan bileşenleri yeniden render edecektir.
Okuma ve sağlama contexti hakkında daha fazla bilgi edinin ve örnekleri görün.
Contexti bir dosyadan içe ve dışa aktarma
Çoğu zaman, farklı dosyalardaki bileşenlerin aynı contexte erişmesi gerekecektir. Bu nedenle, contextleri ayrı bir dosyada oluşturmak yaygındır. Ardından, diğer dosyalar için contexti kullanılabilir kılmak için export ifadesini kullanabilirsiniz:
// Contexts.js
import { createContext } from 'react';
export const ThemeContext = createContext('light');
export const AuthContext = createContext(null);
Diğer dosyalarda tanımlanan bileşenler, bu contexti okumak veya sağlamak için import
ifadesini kullanabilir:
// Button.js
import { ThemeContext } from './Contexts.js';
function Button() {
const theme = useContext(ThemeContext);
// ...
}
// App.js
import { ThemeContext, AuthContext } from './Contexts.js';
function App() {
// ...
return (
<ThemeContext.Provider value={theme}>
<AuthContext.Provider value={currentUser}>
<Page />
</AuthContext.Provider>
</ThemeContext.Provider>
);
}
Bu, bileşenleri içe ve dışa aktarma. işlemine benzer şekilde çalışır.
Sorun Giderme
Context değerini değiştirmenin bir yolunu bulamıyorum
Böyle bir kod, varsayılan context değerini belirtir:
const ThemeContext = createContext('light');
Bu değer asla değişmez. React, yalnızca eşleşen bir sağlayıcı bulamazsa bu değeri bir geri dönüş olarak kullanır.
Contextin zaman içinde değişmesini sağlamak için, state ekleyin ve bileşenleri context sağlayıcısıyla sarın.