React Context API, React bileşenleri arasında veri paylaşmak için kullanılan bir durum yönetimi aracıdır. İşlevsel bileşenlerde kimliği doğrulanmış kullanıcıları takip etmek için Bağlam API'sinin nasıl kullanılacağını öğrenin.

React Context API Nedir?

React, bileşen tabanlı bir kitaplıktır. Uygulamaları şunları içerir: farklı bileşenler bu birlikte çalışır. Bazı durumlarda, uygulamanızın bu bileşenler arasında veri paylaşması gerekir.

Örneğin, mevcut kullanıcının kullanıcı adını şu adresten paylaşmak isteyebilirsiniz: Giriş yapmak uygulamanızdaki diğer bileşenlere bileşen. Bağlam bileşen ağacındaki her bileşenden veri geçirme ihtiyacını ortadan kaldırarak kullanıcı adının paylaşılmasını kolaylaştırır.

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

React bağlamını kullanmadan önce, birlikte ç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üşürür. Veriler ayrıca genel olmalı veya en azından birçok bileşen tarafından, örneğin kullanıcı dili, temalar ve kimlik doğrulama gibi veriler tarafından kullanılmalıdır.

Kullanıcı Kimlik Doğrulama Durumunu Takip Etmek İçin Bağlamı Kullanma

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

içerik oluştur()

Context API'yi kullanmaya başlamak için önce onu bu sözdizimini kullanarak oluşturmanız gerekir.

const Context = React.createContext (defaultValue);

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

Sağlayıcı

Her bağlamın, sardığı 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.

kullanımBağlam

kullanımBağlam() bir Tepki kancası bileşenlerin bağlam tüketmesine izin verir. Yalnızca bağlamda geçmeniz gerekir.

const contextValue = useContext (Bağlam)

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

Yeni bir dosya oluşturarak başlayın, AuthContext.js, ve aşağıdakileri ekleyin.

"tepki" den { createContext } içe aktar;
const AuthContext = createContext();
varsayılan AuthContext'i dışa aktar;

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

'tepkiden' içe { useState, useEffect };
{ getUser } dosyasını './auth.js' dosyasından içe aktarın
AuthContext'i './AuthContext'ten içe aktarın
dışa aktarma const AuthProvider = ({ çocuklar }) => {
 const [kullanıcı, setUser] = useState (boş);
 useEffect(() => {
 const currentUser = getUser()
 setUser (geçerliKullanıcı)
 }, []);
dönüş (
{çocuklar}
 );
 };

Burada, mevcut kullanıcıyı sahte bir kullanıcıdan alıyorsunuz. getKullanıcı() işlev. Gerçek bir uygulamada, bu sizin arka uç hizmetiniz olacaktır.

Herhangi bir değişikliği takip etmek için kullanıcıyı mevcut durumda saklayın ve ardından kullanıcıyı değer prop'unda sağlayıcıya iletin.

AuthProvider.js ayrıca bağlama erişimi olan çocukları da alır.

Sonraki adım, sağlayıcıya sarılmış bileşenlerin bağlama erişmesine izin verecek özel bir kanca oluşturmaktır.

Yeni bir dosya oluştur AuthContext.js'yi kullanın ve aşağıdakileri ekleyin.

AuthContext'i "./AuthContext" içinden içe aktarın;
const useAuthContext.js = () => {
 const kullanıcı = useContext (AuthContext);
 if (kullanıcı tanımsız) {
 throw new Error("useAuthContext yalnızca AuthProvider içinde kullanılabilir");
 }
 geri kullanıcı;
};

Şimdi sağlayıcının dışındaki kod ararsa AuthContext, uygulamanız hatayı zarif bir şekilde işleyecektir.

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

{ AuthProvider } dosyasını "./AuthContext" içinden içe aktarın;
ReactDOM.render(




,
 rootElement
);

Aşağıda, bir sayfayı kimliği doğrulanmamış kullanıcılardan korumak için bağlamı nasıl kullanacağınıza dair bir örnek verilmiştir.

useAuthContext'i "./useAuthContext"ten içe aktarın;
"react-router-dom"dan { Navigate } dosyasını içe aktarın;
const Profil = () => {
 const { kullanıcı } = useAuthContext();
 if (!kullanıcı) {
 dönüş ;
 }
 dönüş (
 <>
Profil

 );
};

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

React Context API Ne Zaman Kullanılmamalı

Bu makalede, bileşenler arasında kimliği doğrulanmış bir kullanıcının izini sürmek için Context'i nasıl kullanacağınızı öğrendiniz. Tüm veri paylaşımı kullanım durumlarınız için Bağlam'ı kullanmak cazip gelse de, kod sürdürülebilirliğini ve performansını azalttığı için kullanmamalısınız. Bağlam değeri her değiştiğinde, durum yeniden işlemelerini tüketen her bir bileşen. Veriler yalnızca birkaç bileşen tarafından kullanılıyorsa, sahne öğelerini seçin.

ReactJS'de Props Nasıl Kullanılır

Sonrakini Oku

Yazar hakkında