react-applications-ریکت-کاربردهادوره رایگان-الگوریتم اول-free-آموزش کامل

لطفا صبر کنید...

useContext و مدیریت داده‌ها در سطح جهانی در React

در React، برای ارسال داده‌ها بین کامپوننت‌های مختلف، معمولاً از props استفاده می‌کنیم. اما اگر داده‌ها باید بین چندین کامپوننت غیرمرتبط به اشتراک گذاشته شوند، ارسال props می‌تواند پیچیده و سخت مدیریت شود.

✅ برای حل این مشکل، از useContext استفاده می‌کنیم که یک روش ساده و بهینه برای مدیریت داده‌ها در سطح جهانی است.

 

۱. useContext چیست؟

useContext یک هوک در React است که به کامپوننت‌ها اجازه می‌دهد بدون نیاز به ارسال props، به داده‌های سراسری دسترسی داشته باشند.

🔹 با استفاده از useContext:
✔ نیازی به ارسال props در چندین سطح نیست.
✔ کد ساده‌تر و خواناتر می‌شود.
✔ داده‌ها در سطح بالا نگهداری و بین کامپوننت‌ها به اشتراک گذاشته می‌شوند.

 

۲. نحوه استفاده از useContext

مراحل استفاده از useContext

۱. ایجاد Context
۲. ایجاد Provider و ارسال داده‌ها
3. مصرف داده‌ها با useContext

 

۳. مثال ساده از useContext

🎯 اشتراک‌گذاری theme (تم روشن/تاریک) بین چند کامپوننت

مرحله ۱: ایجاد Context

import { createContext } from "react";
// ایجاد یک Context برای مدیریت تم
const ThemeContext = createContext("light");
export default ThemeContext;

🔹 مقدار پیش‌فرض light است.

 

مرحله ۲: ایجاد Provider برای ارسال داده‌ها

import React, { useState } from "react";
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 React, { useContext } from "react";
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 Parent = () => {
  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

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

 

مرحله ۲: ایجاد CartProvider برای مدیریت سبد خرید

import React, { useState } from "react";
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 React, { useContext } from "react";
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 React, { useContext } from "react";
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 استفاده کنیم.