• 0216 488 01 91
  • destek@sonsuzbilgi.com.tr

E-Ticaret Premium

Basit, Hızlı, Etkili ve Mükemmel bir E-Ticaret Siteniz Olsun

*256 Bit SSL Sertifikası * Full Mobil Uyumlu * Full SEO Uyumlu
İsterseniz Mobil Uygulama Seçeneğiyle


Context API Nedir?

Adı : Context API Nedir?

Context API Nedir?

React, günümüz web geliştirme endüstrisinde en popüler kütüphanelerden biridir. React, bileşen tabanlı bir yapıya sahiptir. Bu nedenle, uygulamanızda birden çok bileşen kullanmanız gerekebilir. Ancak, bazı bileşenler uygulamanızın her bir tarafında kullanılabilir ve bu bileşenlere erişmek için veri aktarımları yapmanız gerekir. Bu, React Context API'nin neden ortaya çıktığını açıklayabilir.

Context API, üst düzey bileşenlerden alt düzey bileşenlere veri aktarma işlemini kolaylaştıran bir React özelliğidir. Ayrıca, React bileşenlerinin veri paylaşımı için bir alternatif görevi de görür.

Context'in Kullanımı

Basit bir örnek olarak, bir uygulamanızda bir tema seçiminiz olduğunu varsayalım. Bu temanın uygulamanızın birçok bileşeni tarafından kullanılması gerekiyor. İşte burada Context API devreye giriyor. Bunu şu şekilde kullanabilirsiniz:

```javascript
const ThemeContext = React.createContext('light');

function App() {
return (

{/* ThemeProvider olduğu yerde JSX kodları */}

);
}

function Main() {
return (

{value =>

Şu anki tema: {value}
}

);
}
```

Yukarıdaki örnekte, App bileşenimizde bir `ThemeProvider` alanı yarattık ve bu alanda bir özellik değeri olan `dark`'ı belirttik. Ardından, `Main` bileşenimizde, `ThemeProvider`'ın sağladığı değeri `Consumer` ile aldık.

Context API Kullanarak Redux Yerine Geçmek

React Redux'un basit bir uygulamasında, `Provider` ve `connect` fonksiyonları, Redux verilerinin tüm ağaç boyunca geçmesini sağlar. Ancak, büyük uygulamalarda, her bir bileşen için bir özel seçici fonksiyon tanımlamak, Redux'tan veri alan ve yeniden çizmek icin birçok ekstra işlem yapmak gerekebilir.

Buna alternatif olarak, Context API, Redux'un yerine geçebilir. Mesela, şu şekilde bir kullanım söz konusu olabilir:

```javascript
const store = {
state: { counter: 0 }
};

const StoreContext = React.createContext(null);

function useStore() {
const context = React.useContext(StoreContext);
if (!context) {
throw new Error('useStore must be used within a StoreContext.Provider');
}
return context;
}

function StoreProvider(props) {
const [state, setState] = React.useState(store.state);
const value = React.useMemo(() => [state, setState], [state]);
return ;
}

function CounterDisplay() {
const [state] = useStore();
return
The current counter count is {state.counter}
;
}

function Counter() {
const [state, setState] = useStore();
const increment = () => setState(s => ({ counter: s.counter + 1}));
return (
<>

The current counter count is {state.counter}


);
}

function App() {
return (




);
}
```

Yukarıda görülebileceği gibi, Redux gibi, önce bir depo nesnesi oluşturulur. Ardından, `StoreProvider` adlı bir ana bileşen içinde verileri depolayan bir `useState` öğesi oluşturulur. `useStore` özelliği, veriyi alan ve depola tekrar gönderen `useState` öğelerini kullanır. Bu, `Counter` bileşenine geçirilen verilerin `CounterDisplay` bileşeninde gösterilmesine olanak tanır.

Sıkça Sorulan Sorular

Soru: Context API nedir ve ne işe yarar?
Cevap: Context API, üst düzey bileşenlerden alt düzey bileşenlere veri aktarma işlemini kolaylaştıran bir React özelliğidir.

Soru: Context API, Redux ile karşılaştırılabilir mi?
Cevap: Evet, Context API, Redux'un yerine geçebilir.

Soru: React uygulamaları, neden Context API kullanmak isteyebilir?
Cevap: React uygulamaları, bir veya daha fazla bileşenin erişebileceği bir veriye sahip olduklarında Context API kullanmak isteyebilir."

Context API Nedir?

Adı : Context API Nedir?

Context API Nedir?

React, günümüz web geliştirme endüstrisinde en popüler kütüphanelerden biridir. React, bileşen tabanlı bir yapıya sahiptir. Bu nedenle, uygulamanızda birden çok bileşen kullanmanız gerekebilir. Ancak, bazı bileşenler uygulamanızın her bir tarafında kullanılabilir ve bu bileşenlere erişmek için veri aktarımları yapmanız gerekir. Bu, React Context API'nin neden ortaya çıktığını açıklayabilir.

Context API, üst düzey bileşenlerden alt düzey bileşenlere veri aktarma işlemini kolaylaştıran bir React özelliğidir. Ayrıca, React bileşenlerinin veri paylaşımı için bir alternatif görevi de görür.

Context'in Kullanımı

Basit bir örnek olarak, bir uygulamanızda bir tema seçiminiz olduğunu varsayalım. Bu temanın uygulamanızın birçok bileşeni tarafından kullanılması gerekiyor. İşte burada Context API devreye giriyor. Bunu şu şekilde kullanabilirsiniz:

```javascript
const ThemeContext = React.createContext('light');

function App() {
return (

{/* ThemeProvider olduğu yerde JSX kodları */}

);
}

function Main() {
return (

{value =>

Şu anki tema: {value}
}

);
}
```

Yukarıdaki örnekte, App bileşenimizde bir `ThemeProvider` alanı yarattık ve bu alanda bir özellik değeri olan `dark`'ı belirttik. Ardından, `Main` bileşenimizde, `ThemeProvider`'ın sağladığı değeri `Consumer` ile aldık.

Context API Kullanarak Redux Yerine Geçmek

React Redux'un basit bir uygulamasında, `Provider` ve `connect` fonksiyonları, Redux verilerinin tüm ağaç boyunca geçmesini sağlar. Ancak, büyük uygulamalarda, her bir bileşen için bir özel seçici fonksiyon tanımlamak, Redux'tan veri alan ve yeniden çizmek icin birçok ekstra işlem yapmak gerekebilir.

Buna alternatif olarak, Context API, Redux'un yerine geçebilir. Mesela, şu şekilde bir kullanım söz konusu olabilir:

```javascript
const store = {
state: { counter: 0 }
};

const StoreContext = React.createContext(null);

function useStore() {
const context = React.useContext(StoreContext);
if (!context) {
throw new Error('useStore must be used within a StoreContext.Provider');
}
return context;
}

function StoreProvider(props) {
const [state, setState] = React.useState(store.state);
const value = React.useMemo(() => [state, setState], [state]);
return ;
}

function CounterDisplay() {
const [state] = useStore();
return
The current counter count is {state.counter}
;
}

function Counter() {
const [state, setState] = useStore();
const increment = () => setState(s => ({ counter: s.counter + 1}));
return (
<>

The current counter count is {state.counter}


);
}

function App() {
return (




);
}
```

Yukarıda görülebileceği gibi, Redux gibi, önce bir depo nesnesi oluşturulur. Ardından, `StoreProvider` adlı bir ana bileşen içinde verileri depolayan bir `useState` öğesi oluşturulur. `useStore` özelliği, veriyi alan ve depola tekrar gönderen `useState` öğelerini kullanır. Bu, `Counter` bileşenine geçirilen verilerin `CounterDisplay` bileşeninde gösterilmesine olanak tanır.

Sıkça Sorulan Sorular

Soru: Context API nedir ve ne işe yarar?
Cevap: Context API, üst düzey bileşenlerden alt düzey bileşenlere veri aktarma işlemini kolaylaştıran bir React özelliğidir.

Soru: Context API, Redux ile karşılaştırılabilir mi?
Cevap: Evet, Context API, Redux'un yerine geçebilir.

Soru: React uygulamaları, neden Context API kullanmak isteyebilir?
Cevap: React uygulamaları, bir veya daha fazla bileşenin erişebileceği bir veriye sahip olduklarında Context API kullanmak isteyebilir."


Doktor & Medikal Web Sitesi

Onlarca Doktor & Medikal Web sitesinden biri mutlaka size göre!

*256 Bit SSL Sertifikası * Full Mobil Uyumlu * Full SEO Uyumlu
İsterseniz Mobil Uygulama Seçeneğiyle


React Context API Bağımlılık Yönetimi Veri Paylaşımı Çapraz Kesimli Uygulamalar Redux Tema Yönetimi createContext Provider Bileşeni ThemeProvider Bileşeni