الفرق بين المراجعتين ل"ReactNative/timers"

مراجعة 20:07، 22 مارس 2021

الموقتات جزءٌ مهم من أجزاء التطبيق. يوفّر إطار 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).

ملاحظة: عند التصحيح (Debugging) على منصة Android إذا انزاحت الأزمنة بين المصحح والجهاز فلن تعمل عدة أشياء (كالحركات وسلوك الأحداث وغيرها) بشكل مناسب، أو لن تكون نتائجها دقيقة. يمكنك تصحيح ذلك بتشغيل adb shell "date `date +%m%d%H%M%Y.%S%3N`"على جهاز تصحيحك. كما يكلب الوصول للجذر (root access) للاستخدام في الجهاز الحقيقي.

واجهة 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);

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

مصادر

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

@@ سطر 2: / سطر 2: @@
 الموقتات جزءٌ مهم من أجزاء التطبيق. يوفّر إطار React Native مؤقتات المتصفّح.
 ==المؤقتات==
-* <code>setTimeout</code>، و<code>clearTimeout</code>
+* setTimeout، وclearTimeout
-* <code>setInterval</code>، و<code>clearInterval</code>
+* setInterval، وclearInterval
-* <code>setImmediate</code>، و<code>clearImmediate</code>
+* setImmediate، وclearImmediate
-*<code>requestAnimationFrame</code>، و<code>cancelAnimationFrame</code>
+*requestAnimationFrame، وcancelAnimationFrame
 لا تسلك الدالة ‎<code>requestAnimationFrame(fn)‎</code>‎ نفس سلوك الدالة ‎<code>setTimeout(fn, 0)‎</code>‎، ستُنفَّذ الدالة الأولى بعد مسح كل الأطر، في حين ستنفّذ الدالة الثانية بأسرع وقت ممكن (أكثر من 1000x في الثانية على iPhone 5S).
@@ سطر 13: / سطر 13: @@
 تستخدم ميّزةُ <code>Promise</code> الدالةَ <code>setImmediate</code> كدالة لا تزامنٍ أوليّة (asynchronicity primitive).
-==<code>InteractionManager</code>==
+ملاحظة: عند التصحيح (Debugging) على منصة Android إذا انزاحت الأزمنة بين المصحح والجهاز فلن تعمل عدة أشياء (كالحركات وسلوك الأحداث وغيرها) بشكل مناسب، أو لن تكون نتائجها دقيقة. يمكنك تصحيح ذلك بتشغيل <code>adb shell "date `date +%m%d%H%M%Y.%S%3N`"</code>على جهاز تصحيحك. كما يكلب الوصول للجذر (root access) للاستخدام في الجهاز الحقيقي.
+==واجهة InteractionManager==
 من بين الأسباب التي تجعل التطبيقات الأصلية مُتقنَةِ التصميم تبدو سَلسةً للغاية هو تجنّب إجراء العمليات المُكلّفة التي تأخذ وقتًا طويلًا أثناء التفاعلات والتحريكات. في React Native، هناك حاليا قيدٌ يتمثّل في وجود سِلسلَة تنفيذ JavaScript واحدة فقط (execution thread)، ولكن يمكنك استخدام واجهة <code>InteractionManager</code> للتأكد من جدولة العمليّات المُكلّفة لتشغيلها بعد اكتمال أي تفاعلات أو تحريكات.
@@ سطر 25: / سطر 27: @@
 قارن هذا ببدائل الجدولة الأخرى:
-* <code>requestAnimationFrame()‎</code>: للشيفرة التي تُحرّك عرضًا بمرور الوقت.
+* requestAnimationFrame()‎: للشيفرة التي تُحرّك عرضًا بمرور الوقت.
-* <code>setImmediate</code>/<code>setTimeout</code>/<code>setInterval()‎</code>: تشغيل الشيفرة فيما بعد، لاحظ أن هذا قد يؤدي إلى تأخير التحريكات.
+* setImmediate/setTimeout/setInterval()‎: تشغيل الشيفرة فيما بعد، لاحظ أن هذا قد يؤدي إلى تأخير التحريكات.
-* <code>runAfterInteractions()‎</code>: تشغيل الشيفرة فيما بعد دون تأخير التحريكات الجارية حاليًا.
+* runAfterInteractions()‎: تشغيل الشيفرة فيما بعد دون تأخير التحريكات الجارية حاليًا.
 يَعُدُّ نظام التعامل مع اللمس لمسةً نشطةً واحدةً أو أكثرَ "تفاعلًا" وسيؤخِّر دوال ردّ نداءِ الدالةِ <code>runAfterInteractions()‎</code> حتى تنتهي جميع اللمسات أو تُلغى.
-تُتيح <code>InteractionManager</code> كذلك للتطبيقات تسجيل التحريكات عبر إنشاء "مقبضِ (handle)" تفاعلٍ عند بدء الحركة، وإزالتَه عند الانتهاء:
+تُتيح InteractionManager كذلك للتطبيقات تسجيل التحريكات عبر إنشاء "مقبضِ (handle)" تفاعلٍ عند بدء الحركة، وإزالتَه عند الانتهاء:
 <syntaxhighlight lang="javascript">
 var handle = InteractionManager.createInteractionHandle();
@@ سطر 41: / سطر 43: @@
 // تُشغّل مهام الطابور عند إزالة جميع المقابض
 </syntaxhighlight>
-==<code>TimerMixin</code>==
-اكتشفنا أن السبب الأساسي للأخطاء في التطبيقات المبنيّة باستخدام React Native كان بسبب تنفيذ المؤقتات بعد فصل (unmount) المكوّن. لحل هذه المشكلة المتكررة، أضاف مطورو الإطار مخلوط TimerMixin. إذا ضمَّنت مخلوط <code>TimerMixin</code>، فيمكنك استبدال استدعاءات ‎<code>setTimeout(fn, 500)</code>‎ بالاستدعاء ‎<code>this.setTimeout(fn, 500)</code>‎ (أضِف فقط المقطع ‎<code>this.</code>‎) وسَيُنظَّفُ كل شيءٍ بشكل صحيحٍ عند فصل المكوّن.
-هذه المكتبة ليست جزءًا من React Native. لاستخدامها في مشروعك، سوف تحتاج إلى تثبيتها بالأمر ‎<code>npm i react-timer-mixin --save</code>‎ في المشروع الخاص بك.
-<syntaxhighlight lang="javascript">
-import TimerMixin from 'react-timer-mixin';
-var Component = createReactClass({
-  mixins: [TimerMixin],
-  componentDidMount: function() {
-    this.setTimeout(() => {
-      console.log('I do not leak!');
-    }, 500);
-  },
-});
-</syntaxhighlight>
-سيختصر هذا الكثيرَ من الوقت والجهد ويقلّل من الأخطاء، كالتوقف الفجائي الناجم عن تنفيذ دوال ‎<code>timeout</code>‎ بعد فصل أحد المكونات.
-'''ملاحظة:''' إذا كنت تستخدم أصناف ES6 لكتابة مكونات React الخاصة بك، فلا وجود [https://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html#mixins لواجهة برمجيّة مُضمنَة للمخاليط]. لاستخدام <code>TimerMixin</code> مع أصناف ES6، يُنصَح باستخدام [https://github.com/brigand/react-mixin react-mixin].
 == مصادر ==
 * [https://facebook.github.io/react-native/docs/timers صفحة Timers في توثيق React Native الرسمي.]
 [[تصنيف:ReactNative]]

الفرق بين المراجعتين ل"ReactNative/timers"

مراجعة 20:07، 22 مارس 2021

المؤقتات

واجهة InteractionManager

مصادر

قائمة التصفح

بحث