ReactNative/fast refresh

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

كيفية عمل ميزة التحديث السريع

• إن عدّلتَ وحدةً تصدّر مكوّن (أو مكونات) React فقط، فستحدّث ميزة التحديث السريع شيفرة تلك الوحدة فقط، وتعيد تصيير مكوّنك. يمكنك تعديل أي شيء في هذا الملف، بما في ذلك الأنماط styles أو منطق التصيير rendering logic أو معالجات الأحداث أو التأثيرات.
• إن عدّلتَ وحدةً بها عمليات تصدير ليست من مكوّنات React، فسيعيد التحديث السريع تشغيل تلك الوحدة والوحدات الأخرى التي تستوردها، لذلك إذا استورد المكونان Button.js و Modal.js المكوّن Theme.js، فسيؤدي تحرير Theme.js إلى تحديث كلا المكوّنين.
• أخيرًا، إذا عدّلتَ ملفًا استوردته وحدات خارج شجرة React، فسيعود التحديث السريع إلى إجراء إعادة تحميل كاملة. قد يكون لديك ملف يصيِّر مكوّن React، ولكنه يصدّر أيضًا قيمة يستوردها مكوّن ليس مكون React. قد يصدّر مكوّنك أيضًا ثابتًا constant، وتستورده وحدة ليست وحدة React. ضع في حساباتك في هذه الحالة تهجير migrating الاستعلام إلى ملف منفصل واستيراده في كلا الملفين، وسيؤدي ذلك إلى إعادة تفعيل التحديث السريع، ويمكن حل مشاكل الحالات الأخرى بطريقة مماثلة.

مرونة التعامل مع الأخطاء

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

إن ارتكبت خطأ وقت التشغيل أثناء تهيئة الوحدة (مثل كتابة Style.create بدلًا من StyleSheet.create)، فستُستكمَل جلسة التحديث السريع بمجرد إصلاح الخطأ. سيختفي الصندوق الأحمر ، وستُحدَّث الوحدة.

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

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

تقييدات

يحاول التحديث السريع الحفاظ على حالة React المحلية في المكوّن الذي تعدّله فقط إن كان ذلك آمنًا. فيما يلي بعض الأسباب التي قد تسبّب إعادة ضبط الحالة المحلية في كل عملية تعديل لملف:

• لا يُحتفَظ بالحالة المحلية لمكونات الصنف (تحتفظ فقط مكونات الدالة والخطافات بالحالة).
• قد تحتوي الوحدة التي تعدّلها على عمليات تصدير أخرى بالإضافة إلى مكوّن React.
• تصدّر الوحدة أحيانًا نتيجة استدعاء مكون ذي ترتيب أعلى مثل createNavigationContainer(MyScreen). إذا كان المكون المُعاد صنفًا، فسيُعاد ضبط الحالة.

يمكنك توقّع الاحتفاظ بالحالة في المزيد من الحالات على المدى الطويل ومع انتقال المزيد من قاعدة شيفرتك إلى مكونات الدالة والخطافات.

نصائح

• يحافظ التحديث السريع على حالة React المحلية في مكونات الدالة (والخطافات) افتراضيًا.
• قد ترغب أحيانًا في إجبار الحالة ليُعاد ضبطها، ويُعاد تحميل أحد المكوّنات. يمكن أن يكون هذا مفيدًا إذا عدّلتَ حركةً تحدث فقط عند التثبيت على سبيل المثال، ويمكن تنفيذ ذلك من خلال إضافة ‎// @refresh reset في أي مكان ضمن الملف الذي تعدّله. هذا التوجيه محلي للملف، ويوجّه التحديث السريع لإعادة تحميل المكونات المحدَّدة في هذا الملف في كل تعديل.

التحديث السريع والخطافات Hooks

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

ستُحدَّث الخطافات ذات الاعتماديات مثل useEffect و useMemo و useCallback أثناء التحديث السريع، وستُهمَل قائمة الاعتماديات الخاصة بها أثناء إجراء التحديث السريع.

إذا عدّلتَ useMemo(() => x * 2, [x]) لتصبح useMemo(() => x * 10, [x]) مثلًا، فإنها ستنفّذ على الرغم من x (الاعتمادية) لم تتغير. إن لم تفعل مكتبة React ذلك، فلن ينعكس تعديلك على الشاشة.

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

مصادر

• صفحة Fast Refresh في توثيق React Native الرسمي.