2019 ReactJS أفضل الممارسات

[التحديث ، 22 أيار (مايو) 2019] - أضف ممارسة أخرى من أفضل الممارسات إلى القائمة. انظر أدناه.

[التحديث ، 19 مايو 2019] - أضفنا مقالًا جديدًا عن Redux و Redux-Thunk. وأوضح ببساطة مع الكثير من الأمثلة.

[تحديث ، 23 تموز (يوليو) 2019] - نظرًا للعديد من الطلبات ، سنضيف مقالًا جديدًا عن ReactJS ANTIpatterns. سيتم نشر الرابط هنا. يرجى دعم مع التصفيق. شكرا!

1. يرجى الترحيب ، ReactJS

على مدار السنوات الخمس الماضية ، تزايدت شعبية ReactJS بسرعة وبحلول عام 2018 أصبحت أكثر شعبية من jQuery ، على الأقل فيما يتعلق بعمليات بحث Google. لن نقوم بمقارنة الأدوات من حيث طلبها في محركات البحث ؛ ومع ذلك ، هذا يعطينا فهم واضح أن مكتبة ReactJS تحظى بشعبية بالتأكيد. مع ذلك ، دعنا نتحدث عن استخدام ReactJS لإنشاء تطبيقات أمامية أفضل.

نحن نستمتع حقا برؤيتك تستمتع بكتاباتنا. إذا وجدت هذه المشاركة مفيدة ، يرجى الضغط على زر أدناه :)

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

ReactJS هي مكتبة تستخدم JavaScript لإنشاء تطبيقات. لبدء إنشاء تطبيقات في ReactJS ، تحتاج إلى معرفة API الخاص به ومعرفة JavaScript. جافا سكريبت هي على الأرجح لغة البرمجة الأكثر شعبية في هذه الأيام. يمكّن ReactJS المطورين من تصميم تطبيق ووصفه في مكونات واجهة المستخدم. لذلك أنت فقط تقول ما يجب القيام به ، و ReactJS تعرف كيف تفعل ذلك.

فيما يلي بعض الاتجاهات على مدار السنوات الخمس الماضية من Google:

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

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

2. أنواع مكونات ReactJS

هناك أربعة أنواع رئيسية من مكونات ReactJS:

  1. مكونات دولة كاملة أو القائمة على الطبقة
  2. مكونات الدولة أو القائمة على وظيفة
  3. مكونات العرض التقديمي (أو الترتيب العالي)
  4. مكونات الحاوية

يتم عرض بنية مفضلة لشجرة المكونات الخاصة بك على اليسار.

مكونات دولة كاملة أو مكونات قائمة على الفصل

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

فيما يلي مثال لمكون ReactJS الكامل للدولة والمستند إلى الفصل:

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

الحالة هي كائن يتعرض لعنصر. يقتصر نطاق الدولة على داخل المكون حيث يتم الإعلان عنها. يمكن للمكونات تهيئة الحالة وتمريرها إلى مكون آخر. يمكننا إعلان حالة بطريقتين ، باستخدام المنشئ أو إعلان ملكية الدولة. في الحالة الثانية ، يكون هذا مجرد سكر نحوي ، وسيقوم جهاز التحويل (مثل Babel) بتحويل إعلان ملكية حالتك إلى مُنشئ لك تحت الغطاء. تعتبر مكونات حالة الوظائف أو المكونات المستندة إلى الوظائف وما هو React Hooks للمكونات المستندة إلى الوظيفة مجرد وظائف JavaScript بسيطة. تُرجع المكونات المستندة إلى الوظيفة عنصر ReactJS أو مجموعة ، والتي يمكن أن تكون "مكونًا جزئيًا" مثل <> ... أو مكونًا كاملاً يستند إلى الوظيفة مع المكونات المنطقية والمضمنة. نظرًا لأنه لا يمكنك استخدام مُنشئ في مكون قائم على الوظيفة (جيدًا ، في الواقع ، منذ ReactJS v16.8) ، لا يمكنك جعل حالة المكون الخاص بك ممتلئة. إنه حالة أقل لأنه لا يمكنك الاستمرار في أي بيانات في هذه الأنواع من المكونات. غالبًا ما تقوم بتمرير الدعائم إلى المكون المستند إلى الوظيفة لتقديم واجهة المستخدم الخاصة به.هناك مثال على مكون ReactJS القائم على الوظيفة:

من وجهة نظر الأداء ، لا يوجد عملياً أي فرق بين استخدام المكونات المستندة إلى الفصل واستخدام المكونات المستندة إلى الوظيفة. إن آلية تقديم ReactJS ذكية بما يكفي لتحسين ذلك بالنسبة لنا.

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

لتمكين المطورين من كتابة مكونات قائمة على الوظائف كاملة الوظائف ، وفي الوقت نفسه إعطاء القدرة على استخدام أساليب دورة حياة الحالة والمكون ، أضاف React v16.8 ميزة جديدة تسمى React Hooks. بشكل أساسي ، React Hooks هي محاولة لإزالة المكونات المستندة إلى الفصل. باستخدام React Hooks ، يمكنك كتابة مكونات قائمة على الوظائف كاملة الوظائف دون استخدام الفئات. ربما سنرى المكونات المستندة إلى الفصل يتم التخلص منها مع Hooks في مرحلة ما في المستقبل.

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

3. البيانات لأسفل ، إجراءات المتابعة

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

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

4. ارتفاع ترتيب المكون

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

فيما يلي مثال على المكون HOC ReactJS:

5. مكونات الحاوية

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

6. قائمة أفضل الممارسات

  • [Update May 22nd، 2019] - عند استخدام ReduxJS ، قسّم كود المخفض إلى طرق أصغر لتجنب JSON الضخمة داخل المخفض الخاص بك.
  • فكر في استخدام TypeScript في تطبيقاتك إذا لم تقم بذلك بالفعل.
  • استخدم أداة إنشاء تطبيق رد فعل للتشغيل في تطبيق ReactJS.
  • الحفاظ على رمز الخاص بك جاف. لا تكرر نفسك ، ولكن تذكر أن تكرار الرموز ليس بالأمر السيئ دائمًا.
  • تجنب وجود فئات أو طرق أو مكونات كبيرة ، بما في ذلك المخفضات.
  • استخدم مديرين أكثر قوة لإدارة حالة التطبيق ، مثل Redux.
  • استخدم مزامن الأحداث ، مثل Redux-Thunk ، للتفاعلات مع واجهة برمجة تطبيقات النهاية الخلفية الخاصة بك.
  • تجنب تمرير العديد من السمات أو الوسائط. تحد نفسك إلى خمسة الدعائم التي تمرر إلى المكون الخاص بك.
  • استخدم ReactJS defaultProps و ReactJS propTypes.
  • استخدم linter ، افصل الخطوط الطويلة جدًا.
  • احتفظ بملف تكوين jslint الخاص بك.
  • استخدم دائمًا مدير التبعية مع ملف القفل ، مثل NPM أو الغزل.
  • اختبر رمزك الذي يتم الوصول إليه بشكل شائع ، وهو رمز معقد وعرضة للأخطاء.
  • اكتب المزيد من الاختبارات التي توفر تغطية اختبارية أكثر لرمزك مع القليل من الجهد ورمز الاختبار لضمان حسن سيرها.
  • في كل مرة تجد فيها خللًا ، تأكد من كتابة الاختبار أولاً.
  • استخدم المكونات المستندة إلى الوظيفة عن طريق البدء في استخدام React Hooks ، وهي طريقة جديدة ReactJS لإنشاء مكونات حالة كاملة.
  • استخدام ES6 إلغاء هيكلة الدعائم الخاصة بك.
  • استخدام التقديم الشرطي.
  • مستخدم `map ()` لجمع وتقديم مجموعات من المكونات.
  • استخدم مكونات جزئية ، مثل `<>`…… ``
  • قم بتسمية معالجات الأحداث الخاصة بك باستخدام بادئات المؤشر ، مثل `handleClick ()` أو `handleUpdate ()`.
  • استخدم `onChange` للتحكم في مدخلاتك ، مثل` onChange = {this.handleInputChange ()} `.
  • استخدم JEST لاختبار رمز ReactJS الخاص بك.

لقد ذكرنا مزامنات الأحداث ، مثل Redux-Thunk. قدم ReactJS v16.3 ميزة جديدة تسمى React Context API. جزء من وظيفته هو تقليد وظيفة thux-thux ومزامنة الأحداث مع ReactJS يعني. هذه ميزة مطلوبة بشدة ، حيث يتحدث أي تطبيق ReactJS تقريبًا عن واجهة برمجة تطبيقات النهاية ويجب مزامنة الطلبات والأحداث. سنراقب عن كثب واجهة برمجة التطبيقات هذه وسنطلعك على آخر التحديثات.

فيما يلي مثال على استخدام defaultProps و propTypes:

7. الخاتمة

نأمل أن تسلط هذه المقالة بعض الضوء على أفضل ممارسات وأنماط ReactJS التي تحظى بشعبية كبيرة في عام 2019. نظرًا لأن المكافأة ترى مقالة أخرى أدناه ، يمكنك أيضًا الاشتراك للحصول على تحديثات مجانية ومواد تعليمية جديدة حول ReactJS لتلقي تحديثات جديدة. هناك أكثر من شيء…

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

.

مادة المكافأة: هنا مقالتنا الأخيرة حول Redux و Redux-Thunk. سنشرح كيف يعمل اثنان معًا.

https://medium.com/@konstankino/2019-redux-and-redux-thunk-for-reactjs-explained-e249b70d6188