Frontend Academy · درس

useContext للحالة العامة

أنشئ Context، ولفّ شجرة فرعية باستخدام Provider الخاص به، واستهلك القيمة باستخدام useContext لمشاركة حالة السمة أو المصادقة دون تمرير الخصائص عبر المكوّنات.

useContext للحالة العامة درس مجاني في Frontend Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Frontend Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Frontend Academy 4 دروس في المجموع.

مشكلة تمرير الخصائص عبر المكوّنات

يعني تمرير الخصائص عبر المكوّنات تمرير البيانات عبر عدة مكوّنات وسيطة لا تستخدمها، وذلك لمجرد الوصول إلى مكوّن فرعي متداخل بعمق. يحل Context هذه المشكلة بجعل قيمة ما متاحة لأي مكوّن في الشجرة من دون تمرير صريح.

إنشاء Context

ينشئ createContext(defaultValue) كائن Context. وتُستخدم القيمة الافتراضية عندما يقرأ مكوّن السياق من دون وجود Provider مطابق أعلى منه.

import { createContext } from 'react';

interface ThemeContextType {
  theme: 'light' | 'dark';
  toggleTheme: () => void;
}

const ThemeContext = createContext<ThemeContextType>({
  theme: 'light',
  toggleTheme: () => {}
});

توفير Context

أحط الجزء من الشجرة الذي يحتاج إلى السياق بـ Provider. ويمكن لجميع المكوّنات الموجودة داخله قراءة قيمة السياق.

function ThemeProvider({ children }: { children: React.ReactNode }) {
  const [theme, setTheme] = useState<'light' | 'dark'>('light');

  const toggleTheme = () => setTheme(t => t === 'light' ? 'dark' : 'light');

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

// In app root:
<ThemeProvider>
  <App />
</ThemeProvider>

استهلاك السياق باستخدام useContext

يمكن لأي مكوّن داخل Provider الوصول إلى قيمة السياق باستخدام useContext(ThemeContext). ولا حاجة إلى تمرير أي شيء كخاصية (prop).

function ThemeToggle() {
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    <button onClick={toggleTheme}>
      Switch to {theme === 'light' ? 'dark' : 'light'} mode
    </button>
  );
}

Hook مخصص لتغليف useContext

صدّر Hook مخصصًا يستدعي useContext داخليًا. هذا أنظف من إتاحة السياق مباشرة، كما يتيح لك إضافة عمليات تحقق.

function useTheme() {
  const ctx = useContext(ThemeContext);
  if (!ctx) throw new Error('useTheme must be used inside ThemeProvider');
  return ctx;
}

// Usage:
const { theme } = useTheme();

إعادة التصيير مع Context

عندما تتغير القيمة التي يوفّرها Provider، يُعاد تصيير جميع المستهلكين. وإذا كانت القيمة كائنًا، فإن إنشاء مرجع كائن جديد في كل عملية تصيير سيؤدي إلى إعادة تصيير جميع المستهلكين. استخدم useMemo لتخزين القيمة مؤقتًا ومنع ذلك.

const value = useMemo(
  () => ({ theme, toggleTheme }),
  [theme] // toggleTheme is stable if created with useCallback
);

<ThemeContext.Provider value={value}>

متى تستخدم Context

مناسب لـ: السمة، والإعدادات المحلية، والمستخدم الذي تمت مصادقته، وأعلام الميزات، ونظام الإشعارات. وغير مناسب لـ: التحديثات عالية التواتر (مع كل ضغطة مفتاح)، والحالة الكبيرة والمعقدة (استخدم store بدلًا من ذلك).

سياقات متعددة

يمكنك إنشاء سياقات مستقلة متعددة. اجعل كل سياق متخصصًا — استخدم AuthContext للمصادقة وThemeContext للسمة. وتجنب إنشاء سياق شامل واحد يحتفظ بكل شيء.

Context أم Redux

Context مضمّن في React وكافٍ للبيانات العامة التي نادرًا ما تتغير. أما Redux/Zustand/Pinia فهي أفضل للحالة المعقدة التي تتضمن تحديثات كثيرة، أو تصحيحًا زمنيًا، أو حاجة إلى middleware.

نمط Auth Context

نمط شائع هو إنشاء AuthContext يحتفظ بالمستخدم الحالي وطرق المصادقة. ويمكن للمكوّنات المستهلكة الحصول على المستخدم دون تمرير الخصائص عبر عدة مستويات.

interface AuthContext {
  user: User | null;
  login: (creds: Credentials) => Promise<void>;
  logout: () => void;
}
const AuthCtx = createContext<AuthContext | null>(null);
export const useAuth = () => {
  const ctx = useContext(AuthCtx);
  if (!ctx) throw new Error('Outside AuthProvider');
  return ctx;
};

Context وTypeScript

حدّد نوع السياق باستخدام interface. استخدم null كقيمة ابتدائية، وألقِ خطأً في الـ Hook المخصص إذا كانت القيمة null. يمنع ذلك بقاء حالة «الاستهلاك خارج Provider» المستحيلة دون اكتشاف.

الأداء: memo + Context

لا يُعاد تصيير المكوّنات المغلّفة بـ React.memo إلا إذا تغيرت خصائصها. وإذا كان ناتج مستهلك السياق يعتمد على جزء من السياق فقط، فقسّم السياق أو استخدم أنماط المحددات لتجنب عمليات إعادة التصيير غير الضرورية.

تحقق سريع

ما الذي تعيده useContext(MyContext) عند استدعائها داخل مكوّن لا يوجد فوقه Provider؟

مراجعة: useContext

تنشئ createContext سياقًا بقيمة افتراضية. لفّ شجرة المكوّنات باستخدام Provider لتوفير قيمة. تقرأ useContext القيمة من أي موضع داخل الشجرة. وتغلّف Hooks المخصصة useContext لإجراء التحقق. خزّن قيمة Provider مؤقتًا لمنع عمليات إعادة التصيير غير الضرورية. استخدمه للبيانات العامة التي نادرًا ما تتغير، مثل السمة والمصادقة.

الأسئلة الشائعة

هل درس «useContext للحالة العامة» مجاني؟

نعم — نص درس «useContext للحالة العامة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Frontend Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Frontend Academy 4 دروس في المجموع.

ماذا ستتعلم في «useContext للحالة العامة»؟

أنشئ Context، ولفّ شجرة فرعية باستخدام Provider الخاص به، واستهلك القيمة باستخدام useContext لمشاركة حالة السمة أو المصادقة دون تمرير الخصائص عبر المكوّنات. تتمرن على Frontend Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Frontend Academy؟

لا تُشترط خبرة سابقة. Frontend Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.

كم من الوقت يستغرق درس «useContext للحالة العامة»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Frontend Academy هذا؟

نعم. كل درس في Frontend Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

useContext للحالة العامة
useReducer للحالة المعقّدة
useMemo وuseCallback لتحسين الأداء
الخطافات المخصّصة: استخراج المنطق القابل لإعادة الاستخدام

← العودة إلى Frontend Academy