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

تستكشف هذه المقالة بعض الممارسات التي يجب عليك اتباعها لتحسين أداء تطبيق React الخاص بك.

1. استخدام المكونات الوظيفية والخطافات بدلاً من الأصناف

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

ضع في اعتبارك مكون الفئة التالي الذي يعرض البيانات من NASA API.

تقوم فئة NASaData بتوسيع رد الفعل. عنصر {
 المُنشئ (الدعائم) {
 سوبر (الدعائم) ؛
 this.state = {
 بيانات: []،
 };
 }
 componentDidMount () {
 أحضر(" https://api.nasa.gov/planetary/apod? api_key = DEMO_KEY ")
 ثم ((الدقة) => res.json ())
 ثم ((json) => {
 this.setState ({
 البيانات: json ،
 });
 });
 }
 يقدم - يجعل() {
 const {data} = this.state؛
 إذا (! data.length)
 إرجاع (


 جلب البيانات... 
{" "}



 );
 إرجاع (
 <>
 إحضار البيانات باستخدام مكون الفصل 
{" "}
 {data.map ((item) => (
{عنوان البند}

 ))}
 );
 }
}

يمكن كتابة نفس المكون باستخدام الخطافات.

const NasaData = () => {
 const [data، setdata] = useState (خالية) ؛
 useEffect (() => {
 أحضر(" https://api.nasa.gov/planetary/apod? api_key = DEMO_KEY ")
 ثم ((الدقة) => res.json ())
 ثم ((json) => {
 سيتداتا (جسون) ؛
 });
 }، [بيانات])؛
 إرجاع (
 <>
 إحضار البيانات باستخدام مكون الفصل 
{" "}
 {data.map ((item) => (
{عنوان البند}

 ))}
 );
};

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

2. تجنب استخدام الحالة (إن أمكن)

تتعقب حالة React البيانات التي عند تغييرها تُشغِّل مكوِّن React لإعادة التصيير. عند إنشاء تطبيقات React ، تجنب استخدام الحالة قدر الإمكان نظرًا لأنه كلما زادت الحالة التي تستخدمها ، زادت البيانات التي يتعين عليك تتبعها عبر تطبيقك.

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

بدلاً من القيام بذلك:

const [username، setusername] = useState ('')
const [password، setpassword] = useState ('')

افعل هذا:

const [user، setuser] = useState ({})

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

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

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

4. تجنب استخدام الفهارس كدعامات رئيسية

تستخدم React مفاتيح لتعريف العناصر في المصفوفة بشكل فريد. باستخدام المفاتيح ، يمكن لـ React تحديد العنصر الذي تم تغييره أو إضافته أو إزالته من المصفوفة.

في معظم الأوقات عند عرض المصفوفات ، قد تستخدم الفهرس كمفتاح.

عناصر const = () => {
 const arr = ["item1"، "item2"، "item3"، "item4"، "item5"]؛
 إرجاع (
 <>
 {arr.map ((elem، index) => {
{عنصر}
;
 })}
 );
};

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

const arr = ["item1"، "item2"، "item3"، "item4"، "item5"]؛

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

الحل هو استخدام قيمة فريدة كفهرس لضمان الحفاظ على هوية عنصر القائمة.

5. اختر الأجزاء بدلاً من Divs حيثما أمكن ذلك

تحتاج مكونات React إلى إرجاع رمز ملفوف في علامة واحدة عادةً أو جزء React. يجب عليك اختيار الأجزاء حيثما أمكن ذلك.

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

مثال على التخلص من الأشياء غير الضرورية العلامات لا تستخدمها عند إرجاع عنصر واحد.

زر const = () => {
 إرجاع عرض;
};

6. اتبع اصطلاحات التسمية

يجب عليك دائمًا استخدام PascalCase عند تسمية المكونات لتمييزها عن ملفات JSX الأخرى غير المكونة. علي سبيل المثال: حقل النص, ناف، و زر النجاح.

استخدم camelCase للوظائف المعلنة داخل مكونات React مثل المدخلات () أو showElement ().

7. تجنب التعليمات البرمجية المتكررة

إذا لاحظت أنك تكتب رمزًا مكررًا ، فحوله إلى مكونات يمكن إعادة استخدامها.

على سبيل المثال ، من المنطقي إنشاء مكون لقائمة التنقل الخاصة بك بدلاً من تكرار كتابة التعليمات البرمجية في كل مكون يتطلب قائمة.

هذه هي ميزة العمارة القائمة على المكونات. يمكنك تقسيم مشروعك إلى مكونات صغيرة يمكنك إعادة استخدامها عبر تطبيقك.

8. استخدم خاصية إتلاف الكائنات للحصول على الدعائم

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

على سبيل المثال ، ما يلي هو مكون يستخدم الخاصيات كما هي.

زر const = (الدعائم) => {
 إرجاع {props.text};
};

مع إتلاف الكائن ، يمكنك الرجوع إلى النص مباشرة.

زر const = ({text}) => {
 إرجاع {نص};
};

9. عرض المصفوفات ديناميكيًا باستخدام الخريطة

يستخدم خريطة() لعرض كتل HTML المتكررة ديناميكيًا. على سبيل المثال ، يمكنك استخدام ملفات خريطة() لعرض قائمة بالعناصر بتنسيق العلامات.

عناصر const = () => {
 const arr = ["item1"، "item2"، "item3"، "item4"، "item5"]؛
 إرجاع (
 <>
 {arr.map ((elem، index) => {
{عنصر}
;
 })}
 );
 };

لأغراض المقارنة ، إليك كيفية عرض القائمة بدون خريطة(). هذا النهج متكرر للغاية.

قائمة const = () => {
 إرجاع (


البند 1

البند 2

البند 3

البند 4

البند 5




 );
};

10. اكتب الاختبارات لكل مكون من مكونات التفاعل

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

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

عند اتباع هذه النصائح ، ضع مشروعك وأهدافك في الاعتبار ؛ سيكون بعضها أكثر صلة في حالات معينة من غيرها.

كيفية استهلاك واجهات برمجة التطبيقات في التفاعل باستخدام الجلب والمحاور

تريد أن تعرف كيفية استخدام واجهات برمجة التطبيقات؟ يعد فهم كيفية استهلاك واجهات برمجة التطبيقات في React عنصرًا أساسيًا في استخدام واجهة برمجة التطبيقات.

اقرأ التالي

عن المؤلف