React useContext Hook
Tepki Bağlamı
React Context, durumu küresel olarak yönetmenin bir yoludur.
useStateDerin yuvalanmış bileşenler arasında durumu tek başına olduğundan daha kolay paylaşmak için Kanca ile birlikte kullanılabilir useState.
Sorun
Durum, duruma erişim gerektiren yığındaki en yüksek ana bileşen tarafından tutulmalıdır.
Örneklemek gerekirse, birçok iç içe bileşenimiz var. Yığının üstündeki ve altındaki bileşenin duruma erişmesi gerekir.
Bunu Context olmadan yapmak için, durumu iç içe geçmiş her bileşenden "props" olarak geçirmemiz gerekecek. Buna "pervane sondajı" denir.
Örnek:
İç içe geçmiş bileşenlerden "sahne malzemeleri" geçirme:
import { useState } from "react";
import ReactDOM from "react-dom";
function Component1() {
const [user, setUser] = useState("Jesse Hall");
return (
<>
<h1>{`Hello ${user}!`}</h1>
<Component2 user={user} />
</>
);
}
function Component2({ user }) {
return (
<>
<h1>Component 2</h1>
<Component3 user={user} />
</>
);
}
function Component3({ user }) {
return (
<>
<h1>Component 3</h1>
<Component4 user={user} />
</>
);
}
function Component4({ user }) {
return (
<>
<h1>Component 4</h1>
<Component5 user={user} />
</>
);
}
function Component5({ user }) {
return (
<>
<h1>Component 5</h1>
<h2>{`Hello ${user} again!`}</h2>
</>
);
}
ReactDOM.render(<Component1 />, document.getElementById("root"));
Bileşen 2-4'ün duruma ihtiyacı olmamasına rağmen, bileşen 5'e ulaşabilmesi için durumu geçmeleri gerekiyordu.
Sertikalı olmak!
95 $ KAYIT
Çözüm
Çözüm, bağlam oluşturmaktır.
Bağlam Oluştur
Bağlam oluşturmak için İçe Aktarmalı createContextve başlatmalısınız:
import { useState, createContext } from "react";
import ReactDOM from "react-dom";
const UserContext = createContext()
Ardından, Durum Bağlamına ihtiyaç duyan bileşenlerin ağacını sarmak için Bağlam Sağlayıcıyı kullanacağız.
Bağlam Sağlayıcı
Alt bileşenleri Bağlam Sağlayıcıya sarın ve durum değerini sağlayın.
function Component1() {
const [user, setUser] = useState("Jesse Hall");
return (
<UserContext.Provider value={user}>
<h1>{`Hello ${user}!`}</h1>
<Component2 user={user} />
</UserContext.Provider>
);
}Şimdi, bu ağaçtaki tüm bileşenlerin kullanıcı İçeriğine erişimi olacak.
useContextKancayı Kullan
Bağlamı bir alt bileşende kullanmak için, ona Kancayı kullanarak useContexterişmemiz gerekir.
İlk olarak, useContextimport ifadesine şunu ekleyin:
import { useState, createContext, useContext } from "react";
Ardından, tüm bileşenlerde kullanıcı İçeriğine erişebilirsiniz:
function Component5() {
const user = useContext(UserContext);
return (
<>
<h1>Component 5</h1>
<h2>{`Hello ${user} again!`}</h2>
</>
);
}
Tam Örnek
Örnek:
İşte React Context kullanan tam örnek:
import { useState, createContext, useContext } from "react";
import ReactDOM from "react-dom";
const UserContext = createContext();
function Component1() {
const [user, setUser] = useState("Jesse Hall");
return (
<UserContext.Provider value={user}>
<h1>{`Hello ${user}!`}</h1>
<Component2 user={user} />
</UserContext.Provider>
);
}
function Component2() {
return (
<>
<h1>Component 2</h1>
<Component3 />
</>
);
}
function Component3() {
return (
<>
<h1>Component 3</h1>
<Component4 />
</>
);
}
function Component4() {
return (
<>
<h1>Component 4</h1>
<Component5 />
</>
);
}
function Component5() {
const user = useContext(UserContext);
return (
<>
<h1>Component 5</h1>
<h2>{`Hello ${user} again!`}</h2>
</>
);
}
ReactDOM.render(<Component1 />, document.getElementById("root"));