React Context API

React Context API, verilerin uygulama genelinde kolayca yönetilmesini ve iletilmesini sağlayan bir özelliktir createContext fonksiyonu kullanılarak bir context oluşturulur ve bu context'in değeri Provider bileşeninde belirlenir Provider bileşeni, tüm bileşenlere erişim sağlayarak verilerin iletimini kolaylaştırır Value props özelliği de bu verilere erişim için kullanılır React Native uygulamalarında sıkça kullanılan bu özellik, bileşen hiyerarşisine dahil edilerek tüm bileşenler tarafından kullanılabilir hale getirilir

React Context API, React Native'in sunduğu bir özelliktir ve uygulama genelinde kullanılacak verileri depolamak ve yönetmek için kullanılır. Bu API, verilerin bir üst yapıdaki bileşenlerden alt yapıdaki bileşenlere aktarılmasına olanak tanır. Bu sayede, verilerin iletimi ve yönetimi kolaylaşır ve kod kalabalığı azaltılır.

React Context API kullanarak bir context oluşturmak için createContext fonksiyonu kullanılır. Bu fonksiyon, bir provider ve bir consumer bileşenini döndürür. Provider bileşeni, context içindeki verilerin güncellenmesini sağlayacak bir değer propunu alır. Consumer bileşeni ise context'in kullanılacağı yerdir.

Örneğin, bir uygulama içinde kullanıcının oturum açma durumunu yönetmek için bir context oluşturabilirsiniz. Bu context içinde, kullanıcının oturum açması durumunda nelerin gösterileceği ve oturum açmamışken nelerin gösterileceği gibi bilgileri tutabilirsiniz.

Bir context oluşturmak için şu şekilde bir kod yazabilirsiniz:

      const UserContext = React.createContext({        loggedIn: false,        username: null      });

Bu kodda, bir UserContext adında bir context oluşturulur ve varsayılan olarak kullanıcının oturum açmadığı varsayımı yapılır.

Provider bileşeni kullanarak bu context'i alt bileşenlere aktarmak için şu şekilde bir kod yazılabilir:

Bu kodda, UserContext.Provider bileşeni kullanılarak App bileşenine context verileri aktarılır. Bu sayede, App bileşeni içindeki alt bileşenler de bu verilere ulaşabilme imkanına sahip olur.

Yukarıdaki örnekte olduğu gibi, bir context içinde birden fazla veri tutulabilir. Bu verilerin kullanımı, Consumer bileşeni içinde yapılabilir. Ancak, bu yöntemde, her veri için ayrı bir consumer bileşeni oluşturmak gerekebilir. Bunun yerine, useContext Hook'u kullanarak birden fazla veriye tek bir consumer bileşeni içinde ulaşılabilir.

React Context API, React Native'in özellikleri arasında yer alan önemli bir özelliktir ve uygulamalarda verilerin iletimi ve yönetimini kolaylaştırır. Ancak, performans açısından bazı özellikleri dikkate almak gerekir. Bunlar hakkında detaylı bilgiyi sonraki başlıklarda ele alacağız.

Context Oluşturma

Context API, React Native uygulamalarında, birçok bileşen tarafından ortak bir veri havuzu sağlamak için kullanılır. Bu, her bir bileşenin aynı veriyi kullanabilmesini sağlar. Context API kullanarak bir context oluşturmak oldukça basittir.

Bir context oluşturmak için createContext() fonksiyonunun kullanılması gerekiyor. createContext() fonksiyonunun çağırılması, provider ve consumer bileşenlerini oluşturur. createContext() fonksiyonu, içindeki anahtar kelime ile birlikte bir obje döndürür.

Örneğin, bir kullanıcının adı ve soyadı bilgisini içeren bir context oluşturmak istediğimizde, aşağıdaki gibi createContext() fonksiyonunu kullanırız:

```const UserContext = createContext({ name: '', surname: '' });```

Bu, User adında bir context oluşturur ve içinde varsayılan olarak bir isim ve soyisim oluşturur. createContext() fonksiyonu, objenin ilk değeri olarak bu varsayılan değeri kullanır. Ardından bu context'i kullanmak için provider ve consumer bileşenleri oluşturmamız gerekir.

Provider Kullanımı

React Native uygulamalarında Context API, verilerin tüm uygulama boyunca paylaşılmasını sağlayarak, bileşenler arasında iletişim kurmayı kolaylaştırır. Context oluşturmak için, createContext() fonksiyonu kullanılır. Bu fonksiyon, tek bir context nesnesi döndürür ve bu nesneye 'Provider' ve 'Consumer' bileşenleri erişebilir.

Provider, oluşturulan context'in değerini belirler. Normal durumlarda, uygulama seviyesinde bir Provider kullanılır ve bu uygulama boyunca tüm bileşenlere erişim sağlanır. Buna ek olarak, birden fazla Provider kullanarak ayrı context değerleri oluşabilir.

Provider kullanımı çok basit birkaç adımda oluşabilir. İlk adım olarak, createContext() yöntemi kullanarak context oluşturulur. İkinci olarak, oluşturulan context nesnesinden bir Provider oluşturulur ve değer propu atanır. Bu değer propu, tüm bileşenlerde paylaşılacak bir değerdir. Son olarak, oluşturulan Provider kullanılarak, bileşen hiyerarşisine ilgili bileşen eklenir.

Örnek bir Provider kullanımı aşağıdaki gibidir:

```htmlimport { createContext } from 'react';

const AppContext = createContext();

function App(){ return ( )}```

Yukarıdaki örnekte, createContext() yöntemi kullanarak AppContext oluşturulmuştur. App bileşeni içinde, AppContext.Provider kullanarak, değer propu ataması yapılmıştır. Bu değer, name özelliği ile gösterilmiştir. Son olarak, AppContext.Provider kullanılarak MainComponent bileşenine gönderilmiştir.

Provider kullanımı, context'ın bileşen hiyerarşisine en üst düzeyde dahil edilmesi ve tüm bileşenler tarafından erişilebilir olması gerektiğinden, React'da çok yaygın olarak kullanılan bir yöntemdir.

Value Props

React Context API kullanırken, context içindeki verilere erişimin sağlanması için "value" adı verilen propun kullanılması gerekmektedir. Bu prop, Provider tarafından sağlanarak tüm diğer bileşenler tarafından erişilebilir hale gelir.Öncelikle, bir context nesnesi oluşturulur ve value propu içerisine eklenecek olan veriler belirlenir. Bu veriler, bir obje içerisinde saklanabilir ve context nesnesine eklenir. Örneğin, bir kullanıcı objesi içerisinde kullanıcının adı, soyadı ve e-posta adresi gibi veriler bulunabilir.Değer propu eklemek için Provider bileşeni kullanılır. Bu bileşen, context nesnesini tüm uygulama içinde erişilebilir hale getirir. Provider bileşenine, context nesnesinin değerini belirten "value" propu eklenir.Örnek olarak:```const UserContext = React.createContext({ name: '', surname: '', email: '' });function App() { const user = { name: 'John', surname: 'Doe', email: 'john.doe@example.com' }; return ( );}```Yukarıdaki örnekte, UserContext adında bir context nesnesi oluşturulur. Daha sonra, App bileşeni içinde bir kullanıcı objesi tanımlanır ve UserContext.Provider bileşeni içinde "value" propu olarak bu obje belirtilir.Son olarak, context verilerine erişmek için Consumer veya React Hooks kullanılabilir. Consumer bileşeni, context verilerine erişmek için kullanılacak olan callBack fonksiyonunu içerir. Bu fonksiyon, context verisi ile birlikte parametre olarak geçirilir ve herhangi bir bileşene ulaşılmasını sağlar. useContext Hook'u kullanarak, context verileri bir bileşende doğrudan kullanılabilir hale gelir.``` const UserContext = React.createContext({ name: '', surname: '', email: '' });function UserProfile() { const user = useContext(UserContext); return (

{user.email}

);}```Bu örnekte, useContext Hook'u kullanarak UserContext nesnesine erişmek için user adında bir değişken oluşturulur. Bu değişken, kullanıcının adı, soyadı ve e-posta adresi gibi verileri içerir ve return bloğu içindeki JSX ile birlikte kullanılır.

Multiple Context Kullanımı

React Context API, uygulamalarda birden fazla context kullanımına olanak tanır. Birçok uygulama, farklı context'lerin her biri için ayrı ayrı durum depolama işlevselliği gerektirir. Bu nedenle, React Context API birden fazla context kullanımına da izin verir.

Birden fazla context kullanırken, her context ayrı bir dosyada tanımlanabilir ve ana dosyada App'in içinde çağrılabilir. Böylece, farklı context'leri kullanarak, uygulamanın her bir bölümü için farklı durumları depolayabiliriz.

Bir örnek vermek gerekirse, bir e-ticaret uygulamasını düşünelim. Sepet, kullanıcı oturum bilgileri, kullanıcı tercihleri, ödeme bilgileri gibi farklı context'ler kullanılabilir. Her biri ayrı bir dosyada tanımlanabilir ve ana dosyada çağrılabilir.

Birden fazla context kullanırken, her context'in kapsayıcısı ayrı ayrı yazılmalıdır. Örneğin, bir context içinde başka bir context kullanmak gerektiğinde, her iki context de ayrı bir kapsayıcı içinde olmalıdır.

Ayrıca, birden fazla context kullanırken, bir context'in değiştiğinde diğerlerini etkilememesi için, her biri ayrı bir kapsayıcı içinde olmalıdır.

Bu şekilde kullanıldığında, React Context API birden fazla context kullanımına izin verir ve uygulamanın farklı bölümlerinde farklı durumları depolamamıza olanak tanır.

Context API vs Redux

React, modern web uygulamaları geliştirirken yoğun bir şekilde kullanılan bir JavaScript kütüphanesidir. Bu kütüphaneyle birlikte, geliştiriciler arasında Redux ve Context API gibi durum yönetimi araçları oldukça popüler hale geldi.

Redux, ayrılmış bir durum Yönetim kütüphanesi olarak kabul edilir. Context API ise, React arayüzünde verilerin uygulama bileşenleri arasında paylaşılmasına yardımcı olan bir API'dir. İki arasındaki asıl fark, Redux'un daha büyük ve karmaşık uygulamalar için daha uygun olmasıdır. Bu arada, Context API, daha küçük ve basit uygulamalar için tasarlanmıştır.

Redux, uygulama boyunca doğru veri akışının sağlanmasına yardımcı olur. Buna karşılık, Context API, uygulama boyunca verilerin nasıl paylaşılacağına ilişkin bir anlaşma sağlar.

Ayrıca, Redux, birçok farklı bileşen tarafından birden fazla kez kullanılabilen bir durum yönetimi sağlar. Context API ise, bir bileşen ağacındaki herhangi bir yere veri geçişi sağlar.

Redux, bağımsız olarak çalıştırılabilen bir kütüphanedir. Context API ise doğrudan React'in parçasıdır ve ek bir yükleme gerektirmez.

Tüm bunların yanı sıra, Redux’ta kullanılan dil ve yapı karmaşıktır. Context API ise daha basit ve anlaşılırdır.

Redux, durum yönetimi için daha kapsamlı bir çözümdür. Ancak Context API, daha küçük, daha basit uygulamalar için uygun bir seçenektir. Tercih edilen araç, projenin büyüklüğüne ve karmaşıklığına bağlı olarak değişir.

Sonuç olarak, Redux ve Context API, aynı işlevi yerine getirir - durum yönetimi. Farkları, endüstri standardı olan Redux'un daha kapsamlı ve karmaşık uygulamalar için tasarlanmış olmasıdır. Bununla birlikte, Context API, daha küçük ve basit uygulamalar için daha modern, daha basit bir çözüm sağlar.

Consumer Kullanımı

Context API, React Native'deki uygulamalarınızda verileri kullanmak ve paylaşmak için ideal bir yöntemdir. Context API'nin temel unsurlarından biri de Consumer'dır. Consumer, önceki adı Provider tarafından tasarlanmış bir veri depolama mekanizmasıdır. Bir tüketicinin amacı, sağlanan verilere erişmektir ve uygulamanın yapılandırmasına göre sadece ilgili verileri alabilecektir.

Bir Consumer kullanmak istediğinizde, önce oluşturulmuş bir Context'i aynı dosya içerisinde değişken olarak almamız gerekir. Ardından, created Context'in Consumer ıile sarılmasını sağlayabilirsiniz. Birden fazla Consumer kullanmak istiyorsanız, bu adımları her tüketici ve Context için ayrı ayrı tekrarlamanız gerekir.

Örneğin, belirli bir renk şemasına sahip temayı paylaşmak isteyen bir uygulamanız varsa, bu verileri bir Context içinde depolayabilirsiniz. Ardından, Consumer'lar oluşturarak ve ilgili verilere erişim sağlayarak tüketicilere yönlendirmek mümkündür.

Bunun nasıl yapılacağına gelince, bu işlem oldukça kolay ve basittir. Öncelikle, oluşturduğunuz Context'i aşağıdaki örnekte olduğu gibi bir değişken olarak alın:

```import React from 'react';const MyContext = React.createContext();```Ardından, Consumer yaratmak istediğiniz öğenin içinde Context'i kullanabilirsiniz:

``` {context => (

Şuanki renk şeması: {context.colorScheme}

)}```

Burada, Consumer'ın çocuklarının bir fonksiyon olması gerekir. Bu fonksiyonun parametresi, Context'in sağladığı verilerdir. Burada, `

` içinde bir metin yazdığımızda, tüketicinin Context'ten renk şemasına eriştiğini görebilirsiniz.

Consumer'lar ayrıca, Consumer olmadan önce görsel veya işlevsel değişiklikler yapmak için Higher Order Functions (HOC) tarafından da sarmalanabilir.

Overall, Consumer'lar, React Native uygulamalarındaki verilerin ve içeriklerin yönetimi için önemli bir unsurdur. Context API kullanarak Consumer oluşturmak ve verileri ilgili yerlere ulaştırmak, uygulamanızın genel yapısını kolaylaştırabilir.

useContext Hook Kullanımı

React Context API kullanırken en sık kullanılan yöntemlerden biri useContext Hook kullanımıdır. Bu Hook, Provider componenti tarafından sağlanan veriyi Consumer componentinde kullanmamıza olanak verir.

Bir örnekle açıklamak gerekirse, bir blog uygulamasında kullanıcının giriş yapmış veya yapmamış olmasına göre değişen bir navbar bileşeni olsun. Bunun için, Context API kullanarak kullanıcının giriş yapmış olup olmadığını tutan bir context oluşturabiliriz.

Öncelikle createContext fonksiyonu ile bir context oluşturulur:

```jsxconst AuthContext = React.createContext();```

Daha sonra bu context'i Provider componenti içinde kullanılır:

```jsxfunction App() { const [isLoggedIn, setIsLoggedIn] = useState(false);

return ( );}```

Provider componentinde yer alan value propu, AuthContext örneğine referans verir ve isLoggedIn ve setIsLoggedIn gibi değerleri içeren bir obje taşır.

Consumer componentinde useContext Hook kullanarak bu verilere erişebiliriz:

```jsxfunction Navigation() { const { isLoggedIn } = useContext(AuthContext);

return (

);}```

Yukarıdaki örnekte, isLoggedIn değişkeni, useContext Hook kullanılarak AuthContext'ten alınır ve navbar bileşeninde işlevsel hale getirilir.

Bu yöntem, Component Tree'deki herhangi bir bileşenin, context'e erişim sağlamak için contextType statik özelliğinin belirtilmesi gereken eski yöntemden daha kolay ve okunaklıdır. Ayrıca, useContext Hook'u kullanarak context'i tüketmek, contextType kullanılan tek bir bileşenden daha kolaydır.

Higher-Order Component Kullanımı

Higher-Order Component (HOC) kullanarak Context API, işlemleri daha da kolaylaştırmak, yazılım sürecini hızlandırmak ve kodun yeniden kullanılabilirliğini arttırmak için geliştirilmiştir. HOC, Context API kullanarak bir üst bileşeni kullanarak yeniden kullanılabilir işlevsellik sağlayan bir component' dir.

Öncelikle, Context API kullanarak bir bileşen belirleyin. Sonra, görevi tamamlayacak olan bir fonksiyonu HOC olarak oluşturun. Bu fonksiyon, bileşenin üstüne eklenir ve bileşenin işlevselliğini geliştirebilir. HOC, birden çok bileşende kullanılabilir ve her bileşen arasında farklı işlevsellik sağlamak için özelleştirilebilir.

Aşağıda, örnek bir HOC kullanarak Context API'ye nasıl entegre edebileceğimizi gösteren bir kod örneği verilmiştir:

```import React, { Component } from 'react';import { MyContext } from './path/to/MyContext';

function withMyContext(Component) { return function(props) { return ( {myContext => } ); }}

class MyComponent extends Component { render() { const { myContext } = this.props; // myContext ile ilgili işlemler burada yapılır return (

// ...

) }}

export default withMyContext(MyComponent);```

Yukarıdaki kodda, etiketi içindeki bileşenin, HOC tarafından iletilen {myContext} değerlerini kullanabilmesi için olarak iletildiğini görebiliriz.

HOC, Context API kullanırken kodun özelleştirilmesine de yardımcı olabilir. Örneğin, birden fazla bileşen için aynı işlevselliği sağlamak isteyebilirsiniz. HOC, bu döngüyü tekrar tekrar oluşturmak yerine, bileşenlere veya bileşenlerin üst seviyesine eklenebilir. Bu nedenle, aynı işlevselliği sağlamak için kod tekrarlanmaz ve bu da yazılım sürecini hızlandırır veya yeniden kullanılabilirliği artırır.

Sonuç olarak, Higher-Order Component kullanarak Context API'yi kullanmak, kodun tekrarlanmasını önler ve yazılım sürecini hızlandırırken, aynı işlevselliği sağlamanın bir yoludur. Bu yöntem, yazılımın yeniden kullanılabilirliğini artırır ve React Native uygulamalarında kullanılabilirliği artırır.

Context API Performansı

React Context API, büyük uygulamalarda bile mükemmel performans verebilecek şekilde tasarlanmıştır. Ancak, bazı özel senaryolarda performans sorunları yaşanabilir. Bu gibi senaryolar için takip edilmesi gereken bazı öneriler mevcuttur.

Öncelikle, Context API'nin performansını etkileyen en önemli faktör, tüketen bileşenlerin sayısıdır. Tüketen bileşen sayısı arttıkça, bağlantılı bileşenlerin özyinelemeli bir şekilde yeniden oluşturulması gerekebilir. Bu, uygulamanın performansını düşürebileceği için, tüketen bileşenlerin sınırlı sayıda olmasına dikkat edilmelidir.

Bir diğer önemli faktör, Provider bileşenlerinin özelliklerinin dinamik olarak değiştiği senaryolardır. Provider bileşenlerinde değişiklik yapmanın, bağlantılı tüketen bileşenlerin yeniden render edilmesine neden olabileceği unutulmamalıdır. Bu senaryolarda, Provider bileşenleri mümkün olduğunca sabit kalmalıdır.

Ayrıca, Context API geliştirmesi yapanlar, Component Lifecycle'larındaki geleneksel metodların yerine getDerivedStateFromProps () metodunun kullanılması önerilir. Bu yöntem, bileşenin yeniden render edilmesinin önüne geçerek, uygulamanın performansını arttırmaya yardımcı olabilir.

Sonuç olarak, React Context API, uygulamanın performansını yavaşlatmadan bileşenler arasında veri paylaşımını sağlar. Ancak, birkaç senaryoda performans sorunları olabilir. Bu senaryolarda, yukarıda bahsedilen öneriler takip edilerek, uygulamanın performansı arttırılabilir.

Etiketler: