useContext

useContext ile context tüketmeyi öğrenirsin.

useContext nedir?

useContext bir context'ten değeri okuyan hook'tür. const theme = useContext(ThemeContext) yazdığında en yakın Provider'ın verdiği değeri alırsın. Eğer Provider yoksa, context'in varsayılan değeri döner.

useContext kullanan bileşen, context değeri değiştiğinde otomatik yeniden render edilir. Bu sayede props ile veri taşımaya gerek kalmaz. useContext her zaman en yakın Provider'ın değerini alır; iç içe Provider'lar varsa en içteki geçerli olur. Hook'u react paketinden içe aktar: import { useContext } from "react".

useContext kullanımı

useContext'i çağırmak için önce ilgili context'i içe aktarmalısın. Sonra const theme = useContext(ThemeContext) yazarsın. Bundan sonra theme değişkeni bir state gibi kullanılır; ama güncelleme setState ile değil, Provider'ın değerini değiştirerek yapılır.

Önemli nokta: useContext'i her çağırdığında React o bileşeni context değişimine abone eder. Provider'ın değeri değiştiğinde tüm abone bileşenler yeniden render edilir. Bu yüzden context'i yalnızca gerçekten global verilere ayır; sık değişen ve yalnızca birkaç bileşenin ilgilendiği veriler için state daha uygun olabilir.

Uygulama useContext ile tema oku

Bir ThemedText bileşeni yaz. useContext ile ThemeContext'ten theme değerini oku. Bileşen <Text>{theme}</Text> döndürsün. ThemeContext'i dışarıda tanımla.

Örnek çözümü göster

import { createContext, useContext } from "react";
import { Text } from "react-native";

const ThemeContext = createContext("light");

function ThemedText() {
  const theme = useContext(ThemeContext);
  return <Text>{theme}</Text>;
}

Kendini test et

useContext ne döndürür?
```
const theme = useContext(ThemeContext);
```
- Provider bileşenini
- Varsayılan değeri her zaman
- Context nesnesini
- En yakın Provider'ın değerini
Cevabı göster

En yakın Provider'ın değerini — useContext en yakın Provider'ın değerini döner.

useContext'i çağır

const theme = ____(ThemeContext);

Cevabı göster

const theme = useContext(ThemeContext);

Kavramı rolüne eşle

useContext

Değeri okur
ThemeContext

Context nesnesi
Provider

Değeri sağlar
theme

Okunan değer

Sıradaki ders: Context default değeri

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler