المؤقتات في React Native

الموقتات جزءٌ مهم من أجزاء التطبيق. يوفّر إطار React Native مؤقتات المتصفّح.

المؤقتات

• setTimeout، clearTimeout
• setInterval، clearInterval
• setImmediate، clearImmediate
• requestAnimationFrame، cancelAnimationFrame

لا تسلك الدالة ‎requestAnimationFrame(fn)‎‎ نفس سلوك الدالة ‎setTimeout(fn, 0)‎‎، ستُنفَّذ الدالة الأولى بعد مسح كل الأطر، في حين ستنفّذ الدالة الثانية بأسرع وقت ممكن (أكثر من 1000x في الثانية على iPhone 5S).

تُنفَّذ الدالة setImmediate في نهاية كتلة تنفيذ JavaScript الحالية، مباشرة قبل إرسال الاستجابة المجمعة (batched response) إلى اللغة الأصيلة. لاحظ أنه إذا استدعيت setImmediate داخل دالة رد نداءٍ (callback) خاصة بالدالة setImmediate، فستُنفَّذ فورًا، ولن تعود إلى الجهة الأصيلة أثناء ذلك.

تستخدم ميّزةُ Promise الدالةَ setImmediate كدالة لا تزامنٍ أوليّة (asynchronicity primitive).

InteractionManager

من بين الأسباب التي تجعل التطبيقات الأصلية مُتقنَةِ التصميم تبدو سَلسةً للغاية هو تجنّب إجراء العمليات المُكلّفة التي تأخذ وقتًا طويلًا أثناء التفاعلات والتحريكات. في React Native، هناك حاليا قيدٌ يتمثّل في وجود سِلسلَة تنفيذ JavaScript واحدة فقط (execution thread)، ولكن يمكنك استخدام واجهة InteractionManager للتأكد من جدولة العمليّات المُكلّفة لتشغيلها بعد اكتمال أي تفاعلات أو تحريكات.

يمكن للتطبيقات جدولة المهام لتشغيلها بعد إنتهاء التفاعلات بما يلي:

InteractionManager.runAfterInteractions(() => {
  // ...ضع هنا المهام المتزامنة التي تأخذ وقتا طويلا...
});

قارن هذا ببدائل الجدولة الأخرى:

• requestAnimationFrame()‎: للشيفرة التي تُحرّك عرضًا بمرور الوقت.
• setImmediate/setTimeout/setInterval()‎: تشغيل الشيفرة فيما بعد، لاحظ أن هذا قد يؤدي إلى تأخير التحريكات.
• runAfterInteractions()‎: تشغيل الشيفرة فيما بعد دون تأخير التحريكات الجارية حاليًا.

يَعُدُّ نظام التعامل مع اللمس لمسةً نشطةً واحدةً أو أكثرَ "تفاعلًا" وسيؤخِّر دوال ردّ نداءِ الدالةِ runAfterInteractions()‎ حتى تنتهي جميع اللمسات أو تُلغى.

تُتيح InteractionManager كذلك للتطبيقات تسجيل التحريكات عبر إنشاء "مقبضِ (handle)" تفاعلٍ عند بدء الحركة، وإزالتَه عند الانتهاء:

var handle = InteractionManager.createInteractionHandle();
// تشغيل التحريك (`runAfterInteractions` ستُضاف المهام إلى طابور انتظار)

// إزالة المقبض بعد انتهاء التحريك
InteractionManager.clearInteractionHandle(handle);

// تُشغّل مهام الطابور عند إزالة جميع المقابض

TimerMixin

اكتشفنا أن السبب الأساسي للأخطاء في التطبيقات المبنيّة باستخدام React Native كان بسبب تنفيذ المؤقتات بعد فصل (unmount) المكوّن. لحل هذه المشكلة المتكررة، أضاف مطورو الإطار مخلوطTimerMixin. إذا ضمَّنت مخلوط TimerMixin، فيمكنك استبدال استدعاءات ‎setTimeout(fn, 500)‎ بالاستدعاء ‎this.setTimeout(fn, 500)‎ (أضِف فقط المقطع ‎this.‎) وسَيُنظَّفُ كل شيءٍ بشكل صحيحٍ عند فصل المكوّن.

هذه المكتبة ليست جزءًا من React Native. لاستخدامها في مشروعك، سوف تحتاج إلى تثبيتها بالأمر ‎npm i react-timer-mixin --save‎ في المشروع الخاص بك.

import TimerMixin from 'react-timer-mixin';

var Component = createReactClass({
  mixins: [TimerMixin],
  componentDidMount: function() {
    this.setTimeout(() => {
      console.log('I do not leak!');
    }, 500);
  },
});

سيختصر هذا الكثيرَ من الوقت والجهد ويقلّل من الأخطاء، كالتوقف الفجائي الناجم عن تنفيذ دوال ‎timeout‎ بعد فصل أحد المكونات.

ملاحظة: إذا كنت تستخدم أصناف ES6 لكتابة مكونات React الخاصة بك، فلا وجود لواجهة برمجيّة مُضمنَة للمخاليط. لاستخدام TimerMixin مع أصناف ES6، يُنصَح باستخدام react-mixin.

مصادر

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