Mobx React - أفضل الممارسات

في هذه المقالة ، أريد أن أوضح لك أفضل الممارسات الشائعة لاستخدام React مع mobx. سأقدم لهم كقواعد. لذلك كلما واجهت مشكلة معينة ، حاول حلها مع الالتزام بهذه القواعد.

تتطلب هذه المقالة أن يكون لديك فهم أساسي للمتاجر في mobx. إذا لم يكن كذلك ، اقرأ هذا أولاً.

تحتاج إلى بداية سريعة؟ لقد أنشأت مشروعًا للمبتدئين يقوم بتنفيذ الممارسات الموصى بها. https://github.com/danielbischoff/react-mobx-starter

تمثل المتاجر حالة واجهة المستخدم

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

افصل مكالماتك الباقية عن المتاجر

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

حافظ على منطق عملك في المتاجر

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

لا تنشئ مثيلات تخزين عالمية

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

يسمح فقط للمتجر بتغيير خصائصه

لا تقم أبدًا بتغيير خاصية المتجر مباشرة في أحد المكونات. يُسمح للمخزن فقط بتغيير خصائصه. اتصل دائمًا بأسلوب من المتجر يغير خاصية المتجر. بخلاف ذلك ، يتم تحديث حالة التطبيقات (المخازن = حالة التطبيق) من كل مكان وأنت تفقد السيطرة ببطء. هذا يجعل من الصعب للغاية تصحيح.

قم دائمًا بتعليق كل مكون باستخدام @ observer

يسمح التعليق التوضيحي لكل مكون باستخدام @ observer لكل مكون بالتحديث في تغييرات دعم المتجر. خلاف ذلك ، يحتاج المكون الأصلي المشروح بـ @ component إلى إعادة تقديم ، لتحديث المكون الفرعي الخاص به. تحتاج مكونات أقل ليتم تقديمها.

استخدام @ حسابها

لنفترض أنك تريد تعطيل الزر الخاص بك عندما لا يكون لدى المستخدم دور المسؤول ولا يكون التطبيق في "وضع المسؤول". خاصية واحدة مثل isAdmin في متجر واحد ليست كافية لهذا الغرض. ستحتاج إلى خاصية محسوبة في متجرك.

ربما لا تحتاج إلى جهاز توجيه رد فعل

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

حاول تفضيل المكونات الخاضعة للرقابة على المكونات غير المراقبة

حاول دائمًا بناء مكونات محكومة. هذا يجعل اختبار المكونات والتعقيد الكلي للمكونات الخاصة بك من السهل التعامل معها.

آمل أن أتمكن من مساعدتك في هذه النصائح البسيطة.
اطرح أسئلة أو قدم ملاحظات في التعليقات أدناه.