متى تستخدم الحالة العامة مقابل المحلية
طبّق مبدأ التجاور: أبقِ الحالة قريبة قدر الإمكان من المستهلك، ولا ترفعها إلا عندما تحتاج إليها مكوّنات متعددة غير مترابطة.
متى تستخدم الحالة العامة مقابل المحلية درس مجاني في Frontend Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Frontend Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Frontend Academy 4 دروس في المجموع.
مسألة تحديد موقع الحالة
لكل جزء من الحالة موضع مثالي. ويؤدي اختيار الموضع الخاطئ إما إلى معاناة تمرير الخصائص عبر شجرة المكونات، أو إلى تعقيد غير ضروري بسبب الحالة العامة. المبدأ الإرشادي هو: أبقِ الحالة قريبة قدر الإمكان من المكونات التي تستهلكها.
حالة المكوّن المحلية
إذا كان مكوّن واحد فقط يستخدم الحالة، فينبغي أن تكون داخل useState/ref الخاص بذلك المكوّن. لا حاجة إلى مشاركتها — أبقِها محلية. هذه أبسط الحالات وأكثرها شيوعًا.
// Good: UI state local to the component
function Accordion() {
const [isOpen, setIsOpen] = useState(false); // only this component cares
return (
<div>
<button onClick={() => setIsOpen(o => !o)}>Toggle</button>
{isOpen && <div>Content</div>}
</div>
);
}رفع الحالة إلى الأعلى
عندما يحتاج مكوّنان شقيقان إلى الحالة نفسها، ارفعها إلى أقرب سلف مشترك بينهما. ثم مرّرها إلى الأسفل باستخدام الخصائص ودوال الاستدعاء. هذا هو الأسلوب المعتاد في React/Vue قبل اللجوء إلى مخزن عام.
السياق المشترك — المشاركة على مستوى متوسط
عندما تحتاج إلى مشاركة الحالة عبر شجرة فرعية من دون تمرير الخصائص عبر شجرة المكونات، يكون Context في React أو provide/inject في Vue هو الأداة المناسبة. يُستخدم هذا للمشاركة ضمن نطاق متوسط، مثل صفحة أو وحدة ميزة.
المخزن العام — حالة التطبيق بأكمله
استخدم مخزنًا عامًا (Redux أو Zustand أو Pinia) للحالة التي: 1) تصل إليها مكونات كثيرة غير مترابطة، 2) تحتاج إلى البقاء أثناء التنقل، 3) تحتوي على منطق تحديث معقد، 4) تستفيد من فحص DevTools.
أمثلة: الحالة المحلية
تكون الحالة المحلية مناسبة في الحالات التالية: قيم حقول النموذج، وحالة فتح التلميح أو إغلاقه، وظهور النافذة المنبثقة، وحالة التحويم، وحالة الحركة، ومؤشرات التحميل المحلية لمكوّن واحد.
أمثلة: الحالة المرفوعة
تكون الحالة المرفوعة مناسبة في الحالات التالية: مرشح مشترك تستخدمه قائمتان شقيقتان، أو التبويب المحدد في مجموعة تبويبات، أو بيانات نموذج مشتركة بين خطوتين.
أمثلة: Context / Provide
يكون Context مناسبًا في الحالات التالية: السمة الحالية، والمستخدم الذي تمت مصادقته، والإعدادات المحلية أو اللغة، وfeature flags، ومكدس الإشعارات — أي الأشياء التي تستهلكها مكونات على أعماق متعددة ولكن نادرًا ما تُحدَّث.
أمثلة: المخزن العام
يكون المخزن العام مناسبًا في الحالات التالية: سلة التسوق، ورموز المصادقة مع كائن المستخدم، وقائمة انتظار الإشعارات (تظهر الرسائل في toast من أي موضع)، والبيانات الفورية التي تعرضها عدة واجهات في الوقت نفسه.
حالة الخادم مقابل حالة العميل
تُعد بيانات الشبكة (التي يتم جلبها من API) فئة خاصة تُسمى حالة الخادم. وهي تحتاج إلى معالجة التحميل والأخطاء، والتخزين المؤقت، وإبطال الصلاحية. تتولى React Query / SWR / TanStack Query إدارة حالة الخادم، بحيث يركّز مخزنك على حالة العميل الحقيقية.
خطأ شائع: وضع كل شيء في المخزن العام
لا تضع كل الحالة في المخزن العام «تحسبًا لأي طارئ». فالحالة المحلية أقل تكلفة وأبسط وأسهل في الاختبار. ويؤدي الإفراط في استخدام الحالة العامة إلى إنشاء ترابط بين مكونات ينبغي أن تكون مستقلة.
إطار اتخاذ القرار
اسأل: 1) هل تحتاج مكونات أخرى إلى هذه الحالة؟ لا ← محلية. 2) هل تحتاج إليها المكونات الشقيقة القريبة؟ نعم ← ارفعها إلى الأعلى. 3) هل تحتاج إليها شجرة فرعية من المكونات؟ نعم ← استخدم Context/provide. 4) هل تحتاج إليها مكونات كثيرة غير مترابطة، أو هل تحتاج إلى DevTools؟ نعم ← استخدم مخزنًا عامًا.
تحقق سريع
أين ينبغي تخزين حالة الفتح أو الإغلاق لمكوّن accordion واحد؟
مراجعة: تحديد موقع الحالة
المبدأ: أبقِ الحالة قريبة قدر الإمكان من المكونات التي تستهلكها. استخدم useState/ref المحليين لحالة مكوّن واحد. ارفع الحالة إلى الأعلى عند مشاركتها بين المكونات الشقيقة. استخدم Context/provide عند مشاركتها عبر شجرة فرعية. استخدم المخزن العام لحالة التطبيق بأكمله ذات التحديثات المعقدة. أما حالة الخادم (بيانات API) فمكانها React Query/SWR، وليس المخزن العام.
الأسئلة الشائعة
هل درس «متى تستخدم الحالة العامة مقابل المحلية» مجاني؟
نعم — نص درس «متى تستخدم الحالة العامة مقابل المحلية» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Frontend Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Frontend Academy 4 دروس في المجموع.
ماذا ستتعلم في «متى تستخدم الحالة العامة مقابل المحلية»؟
طبّق مبدأ التجاور: أبقِ الحالة قريبة قدر الإمكان من المستهلك، ولا ترفعها إلا عندما تحتاج إليها مكوّنات متعددة غير مترابطة. تتمرن على Frontend Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Frontend Academy؟
لا تُشترط خبرة سابقة. Frontend Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.
كم من الوقت يستغرق درس «متى تستخدم الحالة العامة مقابل المحلية»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Frontend Academy هذا؟
نعم. كل درس في Frontend Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- Redux Toolkit: createSlice وconfigureStore
- Zustand لحالة React خفيفة
- Pinia لـ Vue: defineStore وstoreToRefs
- متى تستخدم الحالة العامة مقابل المحلية