Context nedir?

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.

Örnek çözümü göster

import { createContext } from "react";

const ThemeContext = createContext("light");
console.log(ThemeContext);

Kendini test et

Context hangi sorunu çözer?
```
const ThemeContext = createContext("light");
```
- Prop drilling
- Stil karışıklığını
- Bileşen adlandırmasını
- Klasör yapısını
Cevabı göster

Prop drilling — Context, prop drilling sorununu çözer.

Context'i içe aktar

import { ____ } from "react";

Cevabı göster

import { createContext } from "react";

Adımı sıraya eşle

createContext

Oluştur
Provider

Sağla
useContext

Tüket
value

Sağlanan veri

Sıradaki ders: createContext

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler