useContext
و مدیریت دادهها در سطح جهانی در React
در React، برای ارسال دادهها بین کامپوننتهای مختلف، معمولاً از props استفاده میکنیم. اما اگر دادهها باید بین چندین کامپوننت غیرمرتبط به اشتراک گذاشته شوند، ارسال props
میتواند پیچیده و سخت مدیریت شود.
✅ برای حل این مشکل، از useContext
استفاده میکنیم که یک روش ساده و بهینه برای مدیریت دادهها در سطح جهانی است.
۱. useContext
چیست؟
useContext
یک هوک در React است که به کامپوننتها اجازه میدهد بدون نیاز به ارسال props
، به دادههای سراسری دسترسی داشته باشند.
🔹 با استفاده از useContext
:
✔ نیازی به ارسال props
در چندین سطح نیست.
✔ کد سادهتر و خواناتر میشود.
✔ دادهها در سطح بالا نگهداری و بین کامپوننتها به اشتراک گذاشته میشوند.
۲. نحوه استفاده از useContext
مراحل استفاده از useContext
۱. ایجاد Context
۲. ایجاد Provider
و ارسال دادهها
3. مصرف دادهها با useContext
۳. مثال ساده از useContext
🎯 اشتراکگذاری theme
(تم روشن/تاریک) بین چند کامپوننت
مرحله ۱: ایجاد Context
// ایجاد یک Context برای مدیریت تم
const ThemeContext = createContext("light");
export default ThemeContext;
🔹 مقدار پیشفرض light
است.
مرحله ۲: ایجاد Provider
برای ارسال دادهها
import ThemeContext from "./ThemeContext";
import ThemedButton from "./ThemedButton";
const ThemeProvider = () => {
const [theme, setTheme] = useState("light");
const toggleTheme = () => {
setTheme(theme === "light" ? "dark" : "light");
};
return (
<ThemeContext.Provider value={{ theme, toggleTheme }}>
<ThemedButton />
</ThemeContext.Provider>
);
};
export default ThemeProvider;
✅ ThemeContext.Provider
دادهها (theme
و toggleTheme
) را به تمام کامپوننتهای داخلی ارسال میکند.
مرحله ۳: مصرف دادهها با useContext
import ThemeContext from "./ThemeContext";
const ThemedButton = () => {
const { theme, toggleTheme } = useContext(ThemeContext);
return (
<div style={{ background: theme === "light" ? "#fff" : "#333", color: theme === "light" ? "#000" : "#fff", padding: "20px", textAlign: "center" }}>
<p>تم فعلی: {theme}</p>
<button onClick={toggleTheme}>تغییر تم</button>
</div>
);
};
export default ThemedButton;
✅ useContext(ThemeContext)
مقدار theme
و toggleTheme
را مستقیماً دریافت میکند.
۴. مقایسه useContext
با prop drilling
در روش سنتی، اگر دادهها در سطح بالایی باشند، باید از طریق props
آن را به فرزندها ارسال کنیم (که مشکل prop drilling
ایجاد میکند).
❌ مشکل prop drilling
const user = { name: "Ali" };
return <Child user={user} />;
};
const Child = ({ user }) => {
return <GrandChild user={user} />;
};
const GrandChild = ({ user }) => {
return <p>نام کاربر: {user.name}</p>;
};
🚨 در این روش، user
از Parent
به GrandChild
ارسال میشود، حتی اگر Child
نیازی به آن نداشته باشد.
✅ با useContext
، دیگر نیازی به ارسال props
نیست!
۵. مثال پیشرفته: مدیریت سبد خرید با useContext
فرض کنید میخواهیم سبد خرید را مدیریت کنیم.
مرحله ۱: ایجاد CartContext
const CartContext = createContext();
export default CartContext;
مرحله ۲: ایجاد CartProvider
برای مدیریت سبد خرید
import CartContext from "./CartContext";
import Cart from "./Cart";
import AddToCart from "./AddToCart";
const CartProvider = () => {
const [cart, setCart] = useState([]);
const addToCart = (item) => {
setCart([...cart, item]);
};
return (
<CartContext.Provider value={{ cart, addToCart }}>
<AddToCart />
<Cart />
</CartContext.Provider>
);
};
export default CartProvider;
مقدار cart
و تابع addToCart
را به همه کامپوننتها ارسال میکند.
مرحله ۳: افزودن محصول به سبد خرید
import CartContext from "./CartContext";
const AddToCart = () => {
const { addToCart } = useContext(CartContext);
return (
<button onClick={() => addToCart({ id: 1, name: "محصول ۱" })}>
افزودن به سبد خرید
</button>
);
};
export default AddToCart;
با useContext(CartContext)
, تابع addToCart
را دریافت کرده و محصول را اضافه میکند.
مرحله ۴: نمایش سبد خرید
import CartContext from "./CartContext";
const Cart = () => {
const { cart } = useContext(CartContext);
return (
<div>
<h2>سبد خرید</h2>
<ul>
{cart.map((item) => (
<li key={item.id}>{item.name}</li>
))}
</ul>
</div>
);
};
export default Cart;
✅ سبد خرید نمایش داده میشود، و هر تغییری در cart
باعث بهروزرسانی کامپوننت میشود.
جمعبندی و نکات مهم
✅ useContext
برای مدیریت دادهها در سطح جهانی در React استفاده میشود.
✅ نیاز به ارسال props
در چندین سطح را حذف میکند و از prop drilling
جلوگیری میکند.
✅ شامل سه مرحله اصلی است:
1️⃣ ایجاد Context
با createContext
2️⃣ ارائهدهنده (Provider
) برای ارسال دادهها
3️⃣ مصرفکننده (Consumer
) با useContext
برای دریافت دادهها
✅ مناسب برای مدیریت تم، زبان، احراز هویت، سبد خرید و سایر دادههای سراسری.
✅ برای مدیریت پیچیدهتر دادهها، بهتر است از useReducer
یا مدیریت وضعیتهایی مثل Redux استفاده کنیم.
