Altın Konu React Context API Nedir?

[Replicant]

ROHAN2 WORLD 1-120 TR TİPİ OFFICIAL YOHARA, BALATHOR VE AMON! 80. GÜNÜNDE! +10.000 ONLİNE! HİLE VE BOT %100 ENGELLİ HEMEN TIKLA!

​

React Context API'si, React bileşenleri arasında veri paylaşmak için kullanılan bir durum yönetim aracıdır. İşlevsel bileşenlerde kimliği doğrulanmış kullanıcıları izlemek için Context API'sini nasıl kullanacağınızı öğrenin.

React Context API Nedir?​

React bileşen tabanlı bir kitaplıktır. Uygulamaları birlikte çalışan farklı bileşenlerden oluşur. Bazı durumlarda, uygulamanızın bu bileşenler arasında veri paylaşması gerekir.

Örneğin, geçerli kullanıcının kullanıcı adını Login bileşeninden uygulamanızdaki diğer bileşenlerle paylaşmak isteyebilirsiniz. Context, bileşen ağacındaki her bileşenden veri geçirme gereksinimini ortadan kaldırarak kullanıcı adını paylaşmayı kolaylaştırır.

React Context API'sini Ne Zaman Kullanmalısınız?​

React bağlamını kullanmadan önce, çalıştığınız veri türünü göz önünde bulundurun. Bağlam statik veriler için daha uygundur. Sürekli değişen veriler çok fazla yeniden işlemeye neden olur ve sonuç olarak performansı düşürecektir. Veriler ayrıca genel olmalıdır veya en azından kullanıcı dili, temalar ve kimlik doğrulama gibi veriler gibi birçok bileşen tarafından kullanılmalıdır.

Kullanıcı Kimlik Doğrulama Durumunu İzlemek için Bağlamı Kullanma​

Uygulamanız kimlik doğrulaması kullanıyorsa, bileşenlerinin çoğunun geçerli kullanıcının kimlik doğrulama durumunu bilmesi gerekir. Kimlik doğrulama durumunu her bileşene aktarmak gereksizdir ve prop delmesine yol açar, bu nedenle bağlamı kullanmak iyi bir seçenektir.

createContext()​

Bağlam API'sini kullanmaya başlamak için önce bu sözdizimini kullanarak oluşturmanız gerekir.

const Context = React.createContext(defaultValue);

Varsayılan değer gereksizdir ve genellikle sınama amacıyla kullanılır.

Provider​

Her bağlamın, kaydırdığı bileşenler tarafından tüketilen bir değeri alan bir sağlayıcısı vardır. Bu bileşenlerin bağlam değişikliklerine abone olmasını sağlar.

<Context.Provider value={/* some value */}>

useContext​

useContext(), bileşenlerin bağlamı kullanmasına izin veren bir React kancasıdır. Sadece bu bağlamda geçmeniz gerekir.

const contextValue = useContext(Context)

Şimdi kimlik doğrulama durumunu izlemek için kimlik doğrulama bağlamını oluşturalım.

AuthContext.js adında yeni bir dosya oluşturarak başlayın ve aşağıdakileri ekleyin.

import { createContext } from "react";
const AuthContext = createContext();
export default AuthContext;

Ardından, AuthProvider.js oluşturun ve sağlayıcı işlevini ekleyin.

import { useState, useEffect } from 'react';
import { getUser } from './auth.js'
import AuthContext from './AuthContext'
export const AuthProvider = ({ children }) => {
 const [user, setUser] = useState(null);
 useEffect(() => {
 const currentUser = getUser()
 setUser(currentUser)
 }, []);
 
 return (
 <AuthContext.Provider value={{ user }}>{children}</AuthContext.Provider>
 );
 };

Burada, geçerli kullanıcıyı sahte bir getUser() işlevinden alıyorsunuz. Gerçek bir uygulamada, bu sizin arka uç hizmetiniz olacaktır.

Değişiklikleri izlemek için kullanıcıyı geçerli durumda depolayın, ardından kullanıcıyı değer prop'unda sağlayıcıya geçirin.

AuthProvider.js, içeriğe erişimi olan çocukları da alır.

Bir sonraki adım, sağlayıcıyla sarılmış bileşenlerin içeriğe erişmesine izin verecek özel bir kanca oluşturmaktır.

Yeni bir dosya oluşturun AuthContext.js ve aşağıdakileri ekleyin.

import AuthContext from "./AuthContext";
const useAuthContext.js = () => {
 const user = useContext(AuthContext);
 if (user === undefined) {
 throw new Error("useAuthContext can only be used inside AuthProvider");
 }
 return user;
};

Şimdi sağlayıcı dışındaki kod AuthContext'i çağırırsa, uygulamanız hatayı düzgün bir şekilde işler.

Son adım, authProvider.js ile bağlamı kullanarak bileşenleri sarmaktır.

import { AuthProvider } from "./AuthContext";
ReactDOM.render(
 <React.StrictMode>
 <AuthProvider>
 <App />
 </AuthProvider>
 </React.StrictMode>,
 rootElement
);

Aşağıda, bir sayfayı kimlik doğrulaması olmayan kullanıcılardan korumak için bağlamı nasıl kullanacağınıza ilişkin bir örnek verilmiştir.

import useAuthContext from "./useAuthContext";
import { Navigate } from "react-router-dom";
const Profile = () => {
 const { user } = useAuthContext();
 if (!user) {
 return <Navigate replace to="/login" />;
 }
 return (
 <>
 <h1>Profile</h1>
 </>
 );
};

Bu bileşen, kullanıcının kimlik doğrulama durumuna bağlı olarak profil sayfasını koşullu olarak işler. Kullanıcının var olup olmadığını kontrol eder ve yoksa, onları oturum açma sayfasına yönlendirir. Aksi takdirde, profil sayfasını direk işler.

React Bağlam API'si Kullanılmadığında​

Bu makalede, bileşenler arasında kimliği doğrulanmış bir kullanıcıyı izlemek için Context'ın nasıl kullanılacağını öğrendiniz. Tüm veri paylaşımı kullanım örnekleriniz için Context'ı kullanmak isteyebilirsiniz, ancak kod sürdürülebilirliğini ve performansını azalttığı için bunu yapmamalısınız. Bağlam değeri her değiştiğinde, durumu yeniden işleyen her bileşen yeniden işlenir. Veriler yalnızca birkaç bileşen tarafından kullanılıyorsa, props'ı tercih edin.

 

[ByMoDuS]

Adminim, paylaşımınız için teşekkür ederiz.

 

[ßyMesMes]

Paylaşım için teşekkürler, eline sağlık.

 

[Epiméthé]

Paylaşım için teşekkürler

 

[Replicant]

Adminim, paylaşımınız için teşekkür ederiz.

Paylaşım için teşekkürler, eline sağlık.

Paylaşım için teşekkürler

Rica ederim.