React Academy · درس

متى لا تستخدم Context

تعرّف على الحالات التي يكون فيها تمرير الخصائص أو التركيب أو مدير الحالة خيارًا أنسب.

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

مرحبًا

في هذا الدرس، ستتعلمون متى يكون React Context الأداة غير المناسبة، وستتعرّفون على الحالات التي يكون فيها تمرير الخصائص أو التركيب أو مدير الحالة خيارًا أفضل وأبسط.

Context ليس حلًا سحريًا

غالبًا ما يُفرط المطورون في استخدام Context. يلجؤون إليه لتجنب تمرير أي props، لكن ذلك ينشئ تبعيات خفية، ويجعل اختبار المكونات أصعب، وقد يضر بالأداء.

متى تكون props أفضل

إذا كانت القيمة مستخدمةً في مكوّنات متداخلة بشكل وثيق وعددها 1–3، فإن تمرير props يكون أبسط وأكثر وضوحًا وأسهل في التتبع. يضيف Context شيفرة تمهيدية خاصة بـ provider ويخفي تدفق البيانات.

// Don't need Context for this
function Page() {
  const [color, setColor] = useState('blue');
  return <Header color={color} />; // simple, clear
}

متى يكون composition أفضل

إذا كنتم بحاجة إلى تجنب تمرير البيانات عبر 3 مستويات أو أكثر، فجرّبوا composition أولًا: مرّروا المستهلك المُصيّر بالكامل كـ prop. لن تحتاجوا إلى Context، وسيظل تدفق البيانات واضحًا.

Context يسبب اقترانًا خفيًا

لا يمكن إعادة استخدام مكوّن يستدعي useContext(UserCtx) من دون تغليفه داخل UserProvider. تجعل props التبعيات واضحة؛ إذ يمكنكم رؤية ما يحتاج إليه المكوّن بالضبط من خلال توقيعه.

التحديثات عالية التواتر

لا تستخدموا Context للقيم التي تتغير مرات عديدة في الثانية، مثل موضع مؤشر الفأرة أو تقدّم الرسوم المتحركة. تؤدي كل تغييرة إلى إعادة تصيير جميع المستهلكين. استخدموا refs أو مخازن خارجية أو مكتبة تعتمد على signals بدلًا من ذلك.

Context ليس مديرًا للحالة

يوزّع Context القيم فقط؛ فهو لا يوفّر تخزينًا مؤقتًا أو أدوات للمطورين أو middleware مضمّنة. بالنسبة إلى الحالة المشتركة المعقدة ذات التحديثات المتكررة، استخدموا Zustand أو Redux أو Jotai، فهي مصممة لهذا الغرض.

حالة الخادم لا مكان لها في Context

البيانات التي يتم جلبها من خادم، مثل قائمة المستخدمين أو المنشورات، لا مكان لها في Context. تدير React Query وSWR وRTK Query حالة الخادم مع التخزين المؤقت وإعادة الجلب في الخلفية وحالات الخطأ؛ أما Context فلا يدير أيًا من ذلك.

حالة النموذج لا مكان لها في Context

تؤدي إدارة حقول النموذج في Context إلى إعادة تصيير جميع مستهلكي Context مع كل ضغطة مفتاح. استخدموا حالة المكوّن المحلية أو مكتبة للنماذج مثل React Hook Form بدلًا من ذلك.

متى يكون Context هو الأداة المناسبة

يُعد Context مثاليًا للقيم العامة المستقرة مثل: المستخدم الحالي أو حالة المصادقة، والسمة، واللغة أو i18n، وغيرها من القيم المشتركة بين المكونات التي تقرؤها مكونات كثيرة ونادرًا ما تتغير.

تحقق سريع

ما نوع البيانات الأقل ملاءمةً للتخزين في React Context؟

مراجعة

استخدموا Context للقيم العامة المستقرة مثل المصادقة والسمة واللغة. فضّلوا props عند تمرير البيانات عبر 1–3 مستويات. وفضّلوا composition لتجنب تمرير البيانات عبر مستويات كثيرة. استخدموا React Query لحالة الخادم، وZustand أو Redux للحالة المشتركة المعقدة.

اكتملت الدورة

تهانينا! لقد أنهيتم **أنماط Context والأداء في React**. أصبحتم تعرفون الآن كيفية تقسيم السياقات، وتخزين القيم مؤقتًا باستخدام memoization، وتطبيق selectors، والأهم من ذلك، متى لا ينبغي استخدام Context إطلاقًا.

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

هل درس «متى لا تستخدم Context» مجاني؟

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

ماذا ستتعلم في «متى لا تستخدم Context»؟

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

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

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

كم من الوقت يستغرق درس «متى لا تستخدم Context»؟

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

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

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

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

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