6 نصائح لتحسين أداء تطبيق React Native

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

ألق نظرة على هذه النصائح والتقنيات لتحسين أداء تطبيق React Native الخاص بك.

1. تقليل عمليات إعادة التصيير غير الضرورية باستخدام خطاف useMemo

يعرض React Native المكونات باستخدام تقنية DOM (VDOM). يتتبع VDOM جميع التغييرات التي تم إجراؤها على مكون التطبيق ويعيد عرض التسلسل الهرمي للعرض بالكامل عندما يراه ضروريًا. هذه العملية باهظة الثمن ، لذا يجب تجنب التحديثات غير الضرورية لحالة المكون والدعائم.

توفر مكتبة React امتداد useMemo و useCallback الخطافات لحل هذه المشكلة في المكونات الوظيفية. يمكنك استخدام الخطاف useMemo ل احفظ القيمة الناتجة لوظيفة JavaScript التي لا تريد إعادة حسابها في كل تصيير.

فيما يلي مثال على كيفية استخدام useMemo خطاف:

يستورد {useMemo} من'تتفاعل';
وظيفةMyComponent({ بيانات }) {
// تعد وظيفة computeExpensiveValue عملية حسابية باهظة الثمن
// لا يحتاج إلى إعادة حسابه في كل تصيير.
مقدار ثابت باهظة الثمن = useMemo (() => computeExpensiveValue (بيانات) ، [بيانات]) ؛
// يمكن للمكون استخدام قيمة الذاكرة دون إعادة الحساب 
// في كل تصيير.
يعود
{costValue} </div>;
}

التفاف computeExpensiveValue تعمل داخل useMemo الخطاف يحفظ نتيجة الوظيفة. ال useMemo يمكن أن يقبل الخطاف وسيطة ثانية على أنها تبعية. هذا يعني أن الوظيفة المحفوظة في الذاكرة ستعمل فقط عندما تتغير هذه التبعية.

useCallback مشابه ل useMemo، لكنه يحفظ وظيفة رد الاتصال بدلاً من القيمة. يمكن أن يكون هذا مفيدًا لمنع عمليات إعادة التصيير غير الضرورية للمكونات الفرعية التي يتم تشغيلها بواسطة وظيفة رد الاتصال التي يتم تمريرها لأسفل كدعم.

2. معالجة بيانات الحالة الفعالة

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

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

على سبيل المثال:

يستورد رد فعل ، {useState} من'تتفاعل';
وظيفةMyComponent() {
مقدار ثابت [state، setState] = useState ({
 عدد: 0,
 نص: 'مرحبًا'
 });
وظيفةمقبض() {
 setState (الدولة السابقة => {
يعودهدف.assign ({}، prevState، {count: prevState.count + 1 });
 });
 }
يعود (


زيادة عدد </button>
 </div>
 );
}

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

يمكنك أيضًا استخدام مكتبة إدارة الدولة مثل Redux و واجهة برمجة تطبيقات السياق المضمنة لتنفيذ هذه التقنية.

3. تطبيق نظام مراقبة الأداء

أنظمة مراقبة أداء تطبيقات الأجهزة المحمولة (PMS) هي أدوات تتيح لك قياس أداء تطبيقات الأجهزة المحمولة الخاصة بك وتحليلها. أنها توفر ميزات مثل المراقبة في الوقت الحقيقي ، وتقارير الأعطال ، ومراقبة الشبكة ، ومقاييس الأداء ، وإعادة تشغيل جلسة المستخدم. سيسمح لك استخدام نظام مراقبة الأداء مع تطبيق React Native بتحديد اختناقات الأداء لإصلاح تطبيقك وتوسيع نطاقه.

فيما يلي قائمة بالعديد من أدوات PMC المتاحة.

• React Native Debugger: تطبيق مستقل يتيح لك تصحيح الأخطاء وفحص حالة تطبيق React Native الخاص بك. كما يتضمن أيضًا جهاز مراقبة الأداء لمساعدتك في تحديد مشكلات الأداء وإصلاحها.
• React Native Profiler: تتيح لك أداة مراقبة الأداء المضمنة هذه مشاهدة أداء تطبيقك عن طريق قياس الوقت الذي يستغرقه عرض كل مكون.
• Flipper: نظام أساسي لتطوير تطبيقات الأجهزة المحمولة مزود بشاشة أداء يمكنها مساعدتك في تحديد مشكلات الأداء وإصلاحها.
• مراقبة أداء Firebase: أداة مراقبة الأداء التي يوفرها Firebase والتي تتيح لك تتبع أداء تطبيقك على الأجهزة والأنظمة الأساسية المختلفة.

4. قم بإزالة عبارات Console.log

عند تشغيل جملة console.log ، فإنها ترسل رسالة إلى محرك JavaScript لتسجيل الرسالة إلى وحدة التحكم. يستغرق محرك JS وقتًا لمعالجة الرسالة وعرضها.

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

5. بناء نظام ملاحة فعال

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

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

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

يحتوي React Native على العديد من المكتبات المتاحة للتنقل ، مثل React Navigation و React Native Navigation. يمكنك استخدامها لتنفيذ بعض أنماط التنقل الشائعة في تطبيقك.

6. تقليل حجم التطبيق من خلال تقسيم الكود والتحميل البطيء

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

يُعد تقسيم الشفرة والتحميل البطيء من الأساليب التي يمكنها تقليل حجم تطبيق React Native وتحسين الأداء.

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

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

لماذا يعد تحسين الأداء مهمًا

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

هذه الحيل ليست سوى عدد قليل من الطرق التي يمكنك استخدامها لضمان تجربة ممتعة لقاعدة مستخدمي تطبيقك.