Merhaba👋🏻,  Bu makale, birden fazla bileşen arasındaki durumu yönetmek için daha etkili yöntemler öğrenmek isteyen yeni başlayanlar için özel olarak oluşturulmuştur. Ayrıca, kodunuzun bakımını ve anlaşılmasını zorlaştıran pervane sondajı sorununu da ele almayı amaçlamaktadır. Bağlam API'sinin ne tür bir sorunu çözdüğüyle başlayalım.  Video formatını tercih ediyorsanız işte YouTube kanalımda izleyebileceğiniz eğitim.👇🏻   https://youtu.be/4p_VWn1AEvg?embedable=true  Pervane Sondajı Nedir?  Bazen verileri bir ana bileşenden alt bileşene aktarmanız gerektiğini ve sonunda sahne malzemelerini aradaki bir grup bileşenden geçirmek zorunda kaldığınızı biliyor musunuz? Buna   denir ve hızlı bir şekilde ortalığı karıştırabilir. Bunu açıklığa kavuşturmak için bir örnek üzerinden gidelim. pervane delme    Diyagramda gösterildiği gibi, uygulamanızın kökünde bulunan   bileşeninden bazı verileri getirdiğinizi hayal edin. Şimdi, derinlemesine yuvalanmış bir bileşenin, örneğin   bileşeninin bu verilere erişmesi gerekiyorsa, genellikle bunu   ulaşmadan önce destek olarak   ve   bileşenlerinden geçirirsiniz. Uygulamanız büyüdükçe bu durum çirkinleşebilir. App Grandchild Grandchild Parent Child  İşte başka bir görsel temsil:    Yukarıdaki örnekte,   bileşeni kullanıcı verilerine ihtiyaç duyar ancak bu ara bileşenler verileri kendileri kullanmasa bile bu verilerin öncelikle   ve   bileşenleri üzerinden geçmesi gerekir. Peki bunu nasıl temizleyeceğiz? Bağlam API'sinin kullanışlı olduğu yer burasıdır. Profile App Navigation  Sondajdan aksesuarlar:  Bileşenlerin yeniden oluşturulmasını artırır  Standart kodu artırır  Bileşen bağımlılığı oluşturur  Performansı azaltır  React Bağlam API'si  React.js'deki Context API, verileri bileşen ağacının her düzeyinde destek olarak aktarmaya gerek kalmadan bileşenler arasında aktarmanıza olanak tanır. Durumunuzu bir bağlam nesnesinde tanımladığınız ve ardından ona bileşen ağacının herhangi bir yerinden kolayca erişebildiğiniz küresel bir durum yönetim sistemi gibi çalışır. Bunu bir örnekle anlayalım.    Diyagramda görebileceğiniz gibi, birden fazla bileşenin erişeceği verileri saklayan bir bağlam nesnemiz var. Bu veriler API'lerden veya üçüncü taraf hizmetlerden alınır. Herhangi bir bileşende bu bağlam verilerine erişmeden önce, bu veriyi gerektiren tüm bileşenleri bir bağlam sağlayıcı bileşenine sarmamız gerekir.  Yalnızca gezinme ve profil bileşenlerindeki verilere erişmemiz gerekiyorsa uygulama bileşenini tamamlamamıza gerek yoktur. İlgili bileşenleri   ile sardıktan sonra, onu tüketen herhangi bir bileşendeki bağlam verilerine doğrudan erişebilirsiniz. Henüz anlamadıysanız endişelenmeyin; Hadi kodun içine dalalım ve onu çalışırken görelim. ContextProvider  Bağlam API'si Nasıl Kullanılır?  Öncelikle   kullanarak bir React uygulaması oluşturalım. Projeyi kurmak için aşağıdaki komutları kopyalamanız yeterlidir. Vite.js   npm create vite@latest  Proje adınızı ekleyin  React'ı seçin  Seçeneklerden daktilo seçeneğini seçin   cd project_name // to change to project directory npm install npm run dev  Daha sonra tarayıcınızda geliştirme sunucunuzu   açabilirsiniz. http://localhost:5173  Öncelikle gerekli klasörleri oluşturalım. İşte projemizin klasör yapısı.   src | components | context  Components klasöründe   dosyasını oluşturup aşağıdaki kodu ekleyelim. Profile.jsx   import React from 'react' const Profile = () => { return ( <div>Profile</div> ) } export default Profile  Bileşenler klasöründe   adında bir bileşen daha oluşturun. Navbar.jsx   import Profile from './Profile' const Navbar = () => { return ( <nav style={{ display: "flex", justifyContent: "space-between", alignItems: "center", width: "90%", height: "10vh", backgroundColor: theme === "light" ? "#fff" : "#1b1b1b", color: theme === "light" ? "#1b1b1b" : "#fff", border: "1px solid #fff", borderRadius: "5px", padding: "0 20px", marginTop: "40px", }}> <h1>LOGO</h1> <Profile /> </nav> ) } export default Navbar  Bu   bileşenini   dosyasına aktaralım. <Navbar /> App.jsx   import Navbar from "./components/Navbar"; function App() { return ( <main style={{ display: "flex", flexDirection: "column", justifyContent: "start", alignItems: "center", height: "100vh", width: "100vw", }} > <Navbar /> </main> ); } export default App;  Yani temel olarak,   bileşeni   'ın çocuğudur ve     bileşeninin çocuğudur. <Profile /> <Navbar /> <Navbar /> <App />  Bağlam API'si Ekleme    klasöründe   dosyasını oluşturalım. Aşağıdaki kodu dosyaya ekleyin. context UserContext.jsx   import { createContext, useEffect, useState } from "react"; export const UserContext = createContext(); export const UserProvider = ({ children }) => { const [user, setUser] = useState(null); const fetchUserData = async (id) => { const response = await fetch( `https://jsonplaceholder.typicode.com/users/${id}` ).then((response) => response.json()); console.log(response); setUser(response); }; useEffect(() => { fetchUserData(1); }, []); return ( <UserContext.Provider value={{ user, fetchUserData }} > {children} </UserContext.Provider> ); };  Öncelikle   kullanarak boş bir   nesnesi oluşturuyoruz.   içe aktardığımızdan emin oluyoruz. Bağlam nesnesinin içine varsayılan değerler ekleyebiliriz ancak şimdilik onu boş tutuyoruz. createContext UserContext react  Daha sonra,   gibi   kullanan bir sağlayıcıyı döndüren   oluşturuyoruz. Çocuk bileşenlerini sarar ve değerde, çocuk bileşenlerde kullanmak istediğimiz her şeyi iletebiliriz. UserContext.Provider UserContext UserProvider  Şu anda kullanıcı verilerini almak için   kullanıyoruz.   test amacıyla sahte API uç noktaları sağlar.   işlevi   kabul eder ve kullanıcı verilerini getirmek için bu kimliği kullanır. Daha sonra yanıtı   durumunda saklarız. jsonplaceholder API'sini jsonplaceholder, fetchUserData id user      işlevini çağırıyoruz, böylece sayfa yüklenirken işlevi çağırır ve verileri   durumunda enjekte eder. useEffect fetchUserData user  Şimdi bu bağlamı   bileşeninde kullanalım.   bileşenini   kullanarak sarın; aşağıdaki kodla aynı: <App /> <NavBar /> <UserProvider />   <UserProvider> <Navbar /> </UserProvider>    bileşeninde   durumunu kullanalım. Bunun için   kancasını kullanacağız. Bu,   alır ve   ilettiğimiz   durumu ve   işlevi gibi değerleri sağlar. Unutmayın, zaten sağlayıcıyla sarılmış olan   bileşeninin içinde olduğundan   bileşenini sarmalamamıza gerek yok. <Profile /> user useContext UserContext UserProvider user fetchUserData <Navbar /> <Profile />    dosyasını açın ve aşağıdaki kodu ekleyin. Profile.jsx  const { user } = useContext(UserContext); if (user) { return ( <span style={{ fontWeight: "bold", }} > {user.name} </span> ); } else { return <span>Login</span>; }  Burada     durumunu kullanıyoruz.   varsa kullanıcı adını görüntüleyeceğiz, aksi takdirde yalnızca giriş mesajını görüntüleyeceğiz. Şimdi çıktıyı görüyorsanız gezinme çubuğu bileşeninde bir kullanıcı adı bulunmalıdır. Herhangi bir bileşenin bağlamındaki herhangi bir durumu doğrudan bu şekilde kullanabiliriz. Bu durumu kullanan bileşenin   içine sarılması gerekir. UserContext user user <Provider />  Ayrıca birden fazla bağlam da kullanabilirsiniz. Aşağıdaki örnekte gösterildiği gibi sağlayıcı bileşenlerini başka bir sağlayıcı bileşeninin içine sarmanız yeterlidir.   <ThemeProvider> <UserProvider> <Navbar /> </UserProvider> </ThemeProvider>  Yukarıdaki örnekte tema durumunu yöneten   kullanıyoruz. <ThemeProvider />  Birden fazla içerik sağlayıcı kullanmanın tam örneğini görmek için yukarıdaki youtube videosunu izleyebilirsiniz.  React Context API'sinde Yeniden Oluşturmayı Optimize Etme  Bağlam API'sini birden çok bileşende kullandığınızda ortaya çıkan bir sorun vardır. Context API'de durum veya değer değiştiğinde, tüm bileşenler değiştirilen durumu kullanmasa bile söz konusu bağlama abone olan tüm bileşenleri yeniden işler. Bu yeniden oluşturma sorununu anlamak için sayım değerlerini depolamak ve görüntülemek için bağlamı kullanan bir   bileşeni oluşturalım. <Counter />  Aşağıdaki örneğe göz atın. Components klasöründe   dosyası oluşturup aşağıdaki kodu yapıştırabilirsiniz. Counter.jsx   import { createContext, memo, useContext, useState } from "react"; const CountContext = createContext(); const CountProvider = ({ children }) => { const [count, setCount] = useState(0); return ( <CountContext.Provider value={{ count, setCount }}> {children} </CountContext.Provider> ); }; function CountTitle() { console.log("This is Count Title component"); return <h1>Counter Title</h1>; } function CountDisplay() { console.log("This is CountDisplay component"); const { count } = useContext(CountContext); return <div>Count: {count}</div>; } function CounterButton() { console.log("This is CounterButton component"); const { count, setCount } = useContext(CountContext); return ( <> <CountTitle /> <CountDisplay /> <button onClick={() => setCount(count + 1)}>Increase</button> </> ); } export default function Counter() { return ( <CountProvider> <CounterButton /> </CountProvider> ); }  Yukarıdaki kodda:  Öncelikle createContext'i kullanarak bir   nesnesi oluşturuyoruz  CountContext createContext.    sayım değerlerini saklayacak bir durumumuz var.   ve   metodunu alt bileşenlere value prop aracılığıyla gönderiyoruz. CountProvider, count setCount  Bireysel bileşenlerin kaç kez yeniden oluşturulduğunu görmek için bileşenleri ayrı ayrı oluşturduk.    : Bu bileşen yalnızca başlığı görüntüler ve bağlamdaki herhangi bir değeri bile kullanmaz. <CountTitle />    : Bu bileşen sayım değerlerini görüntüler ve bağlamdan   durumunu kullanır. <CountDisplay /> count    : Bu bileşen, hem yukarıdaki bileşeni hem de   kullanarak sayım değerlerini artıran bir düğmeyi işler. <CounterButton /> setCount  Son olarak   bileşenini   bileşeni içerisine sarıyoruz ki diğer bileşenler de count değerlerine erişebilsin. <CounterButton /> CountProvider  Şimdi, kodu çalıştırıp   düğmesini tıklarsanız, günlüklerde, durum her değiştiğinde her bileşenin yeniden oluşturulduğunu göreceksiniz.   sayım değerlerini bile kullanmıyor, henüz yeniden oluşturuluyor. Bunun nedeni,   'nin   ana bileşeninin count değerini kullanması ve güncellemesi ve bu nedenle yeniden oluşturmasıdır. Increase <CountTitle /> <CountTitle /> <CounterButton />  Bu davranışı nasıl optimize edebiliriz? Cevap   dır. React   bir bileşenin özellikleri değişmediğinde yeniden oluşturma işlemini atlamanıza olanak tanır.   bileşeninden sonra aşağıdaki satırı ekleyelim. memo memo <CountTitle />   const MemoizedCountTitle = React.memo(CountTitle)  Şimdi   bileşenini render ettiğimiz   bileşeninde, aşağıdaki koddaki gibi   yerine   yazın: <CountTitle /> <CounterButton /> <CountTitle /> <MemoizedCountTitle />   <> <MemoizedCountTitle /> <CountDisplay /> <button onClick={() => setCount(count + 1)}>Increase</button> </>  Şimdi, eğer sayıyı arttırıp logları kontrol ederseniz, artık   bileşenini render etmediğini görebilmelisiniz. <CountTitle />  Redux ve Bağlam API'si    daha öngörülebilir durum geçişlerine sahip karmaşık durum yönetimi için bir durum yönetimi kitaplığıdır. Bağlam API'si basit durum yönetimi ve verileri bileşen ağacından detay detaylandırması olmadan geçirmek için tasarlanmıştır. Peki hangisini ne zaman seçmeli? Redux  Durumun sıklıkla değişmediği basit, yerelleştirilmiş durum yönetimi için   kullanın. React Context API'yi  Özellikle yapılandırılmış durum yönetiminin faydalarının ekstra kuruluma ağır bastığı daha büyük uygulamalarda, karmaşık durum yönetimi ihtiyaçları için   kullanın. Redux'u  Ayrıca devlet yönetimi için de popüler bir seçenek olan bir kütüphane daha var.   . React Geri Tepmesi    React için Context API'nin basitliğini Redux'un gücü ve performansıyla sağlamayı amaçlayan bir durum yönetimi kütüphanesidir. React Recoil,    hakkında daha fazla bilgi edinmek istiyorsanız yorumlarda bana bildirin; geri bildirimlerinize dayanarak bu konuyla ilgili derinlemesine eğitimler oluşturacağım. React Recoil  Çözüm    Context API, birden fazla bileşenin durumlarını yönetmenin güçlü ve etkili bir yolunu sunarak pervane sondajı sorununu etkili bir şekilde ele alır. Context API'yi kullanarak kodunuzu basitleştirebilir, gereksiz yeniden oluşturmaları azaltabilir ve genel uygulama performansını artırabilirsiniz. React.js  Context API basit durum yönetimi için ideal olsa da, daha karmaşık uygulamalar   veya   gibi diğer durum yönetimi kitaplıklarının kullanılmasından yararlanabilir. Bu araçların ne zaman ve nasıl kullanılacağını anlamak, daha sürdürülebilir ve ölçeklenebilir React uygulamaları oluşturmanıza olanak sağlayacaktır. Redux React Recoil  Bu makaleyi okuduğunuz için teşekkürler, umarım faydalı bulmuşsunuzdur. React, Redux ve Next.js kullanarak projeler öğrenmek ve oluşturmak ilginizi çekiyorsa YouTube kanalımı buradan ziyaret edebilirsiniz:  CodeBucks  Okumak isteyebileceğiniz diğer yazılarım:   Next.js'de Lenis ve GSAP ile düzgün kaydırma nasıl uygulanır?   React.js'de Kullanıcının Konumunu Alma   Denemeniz Gereken En Popüler 10 VS Code Teması  Kişisel blogumu ziyaret edin:  DevDreaming

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Helping you to learn code! 
here you'll find tutorials around web development. Keep Coding...😜

React.js Context API ile Durum Yönetimi Nasıl Basitleştirilir - Bir Eğitim

About Author

YORUMLAR

ETİKETLERİ ASIN

BU YAZI

Related Stories

Bu 18 Geliştirici Aracıyla Üretkenliğinizi Artırın 🚀🔥

Başarılı Buluta Geçiş İçin Tam Kılavuz: Stratejiler ve En İyi Uygulamalar

AI/ML Datalake için Referans Mimarisi Oluşturmaya Yönelik Mimar Kılavuzu

Claude Sonnet 3.5 Sistem Bilgi Sızıntısı: Adli Analiz

Bu 18 Geliştirici Aracıyla Üretkenliğinizi Artırın 🚀🔥

Başarılı Buluta Geçiş İçin Tam Kılavuz: Stratejiler ve En İyi Uygulamalar

AI/ML Datalake için Referans Mimarisi Oluşturmaya Yönelik Mimar Kılavuzu

Claude Sonnet 3.5 Sistem Bilgi Sızıntısı: Adli Analiz

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps