منذ عدة أيام تم تعديلي إلى قسم جديد. كلفني زميلي الجديد في العمل بمهمة إعادة بناء مشروع React موجود.

عندما كنت أقرأ الكود، صدمت من طريقة استخدام واجهة برمجة تطبيقات السياق. المبرمج من قبل، الذي وضع كل شيء (نعم، كل شيء تقريبًا) في كائن سياق، عامله كمخزن لإدارة جميع الحالات وحتى بعض الحالات المؤقتة المحلية. هذا جنون!

كما أنه يقوم أيضًا بترميز كل شيء للصفحة في مكون واحد فقط (نعم، واحد فقط على الإطلاق) في ملف .ts واحد. من الصعب جدًا بالنسبة لي أن أوضح في ذهني منطق الكود. لكنني ما زلت أقبل هذه الأكواد الرديئة (ليس لدي أي خيار)، لذلك اتخذت قرارًا كبيرًا: سأعيد كتابة كل هذه الصفحات في أسبوع واحد باستخدام Mobx وأقسم الكود إلى مكونات وظيفية مختلفة.

باستخدام Mobx، أقوم بإنشاء العديد من المتاجر للتعامل مع جميع البيانات من واجهات برمجة التطبيقات وتقسيم مكون واحد ضخم إلى أجزاء صغيرة مختلفة؛ كل شيء يبدأ يصبح واضحًا وبسيطًا. يجب أن تكون الحالة المحلية في نطاقها حيث سيتم استخدامها، وسيتم الحصول على الجزء المشترك من متجر Mobx.

أخيرًا قمت بإزالة كائن السياق تمامًا، وتمت إزالة آلاف الأسطر من التعليمات البرمجية، وأصبح العالم هادئًا مرة أخرى!

أريد أن أقول شيئًا عن واجهة برمجة تطبيقات السياق. إذا كان لديك بالفعل شيء ما، مثل بعض معلومات التكوين العامة لمشاركتها مع التطبيق بأكمله، فيمكنك استخدام واجهة برمجة تطبيقات السياق، ولكن إذا كنت تريد فقط تجنب استخدام بعض مكتبات إدارة الحالة التابعة لجهة خارجية، فهذه فكرة سيئة للتعامل مع السياق باعتباره استبدال.

دع السياق يكون سياقًا ودع الحالة تُدار بواسطة مكتبات مثل Mobx.

أوقف إساءة استخدام React context API، من فضلك!