قواعد React
كما أن للغات البرمجة المختلفة طرقها الخاصة للتعبير عن المفاهيم، فإن React لديها لغتها الخاصة - أو قواعدها - لكيفية التعبير عن الأنماط بطريقة يسهل فهمها وتؤدي إلى تطبيقات عالية الجودة.
يصف هذا القسم القواعد التي تحتاج إلى اتباعها لكتابة كود React اصطلاحي. كتابة كود React اصطلاحي يمكن أن يساعدك في كتابة تطبيقات منظمة وآمنة وقابلة للتكوين. هذه الخصائص تجعل تطبيقك أكثر مرونة للتغييرات وتسهل العمل مع المطورين والمكتبات والأدوات الأخرى.
تُعرف هذه القواعد باسم قواعد React. إنها قواعد - وليست مجرد إرشادات - بمعنى أنه إذا تم كسرها، فمن المحتمل أن يحتوي تطبيقك على أخطاء. كما يصبح كودك غير اصطلاحي وأكثر صعوبة في الفهم والتفكير فيه.
نوصي بشدة باستخدام Strict Mode جنبًا إلى جنب مع إضافة ESLint من React لمساعدة قاعدة كودك على اتباع قواعد React. من خلال اتباع قواعد React، ستتمكن من العثور على هذه الأخطاء ومعالجتها والحفاظ على تطبيقك قابلاً للصيانة.
يجب أن تكون Components و Hooks نقية
النقاء في Components و Hooks هو قاعدة أساسية في React تجعل تطبيقك يمكن التنبؤ به، وسهل تصحيحه، وتسمح لـ React بتحسين كودك تلقائيًا.
- يجب أن تكون Components متماثلة – يُفترض أن مكونات React تُرجع دائمًا نفس الإخراج فيما يتعلق بمدخلاتها - props و state والسياق.
- يجب أن تعمل الآثار الجانبية خارج render – يجب ألا تعمل الآثار الجانبية في render، حيث يمكن لـ React تصيير المكونات عدة مرات لإنشاء أفضل تجربة مستخدم ممكنة.
- Props و state غير قابلة للتغيير – props و state الخاصة بالمكون هي لقطات غير قابلة للتغيير فيما يتعلق بـ render واحد. لا تغيرها مباشرة أبدًا.
- قيم الإرجاع والوسائط لـ Hooks غير قابلة للتغيير – بمجرد تمرير القيم إلى Hook، يجب ألا تعدلها. مثل props في JSX، تصبح القيم غير قابلة للتغيير عند تمريرها إلى Hook.
- القيم غير قابلة للتغيير بعد تمريرها إلى JSX – لا تغير القيم بعد استخدامها في JSX. انقل التغيير قبل إنشاء JSX.
React تستدعي Components و Hooks
React مسؤولة عن تصيير المكونات و hooks عند الضرورة لتحسين تجربة المستخدم. إنها تعريفية: أنت تخبر React بما تريد تصييره في منطق مكونك، وسيكتشف React أفضل طريقة لعرضه لمستخدمك.
- لا تستدعِ دوال المكونات مباشرةً أبدًا – يجب استخدام المكونات فقط في JSX. لا تستدعها كدوال عادية.
- لا تمرر hooks كقيم عادية أبدًا – يجب استدعاء Hooks فقط داخل المكونات. لا تمررها أبدًا كقيمة عادية.
قواعد Hooks
تُعرف Hooks باستخدام دوال JavaScript، لكنها تمثل نوعًا خاصًا من منطق واجهة المستخدم القابل لإعادة الاستخدام مع قيود على المكان الذي يمكن استدعاؤها فيه. تحتاج إلى اتباع قواعد Hooks عند استخدامها.
- استدعِ Hooks فقط في المستوى الأعلى – لا تستدعِ Hooks داخل الحلقات أو الشروط أو الدوال المتداخلة. بدلاً من ذلك، استخدم دائمًا Hooks في المستوى الأعلى من دالة React الخاصة بك، قبل أي عوائد مبكرة.
- استدعِ Hooks فقط من دوال React – لا تستدعِ Hooks من دوال JavaScript العادية.