الفرق بين المراجعتين لصفحة: «ReactNative/timers»
Basema-bakleh (نقاش | مساهمات) |
جميل-بيلوني (نقاش | مساهمات) طلا ملخص تعديل |
||
| (1 مراجعات متوسطة بواسطة نفس المستخدم غير معروضة) | |||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:المؤقتات في React Native}}</noinclude> | <noinclude>{{DISPLAYTITLE:المؤقتات في React Native}}</noinclude> | ||
الموقتات جزءٌ مهم من أجزاء | الموقتات جزءٌ مهم من أجزاء التطبيق، إذ يوفّر إطار React Native المؤقتات نفسها التي يوفرها المتصفّح. | ||
==المؤقتات== | ==المؤقتات== | ||
* | تتوافر في React Native المؤقتتات التالية: | ||
* | * setTimeout - clearTimeout | ||
* | * setInterval - clearInterval | ||
* | * setImmediate - clearImmediate | ||
*requestAnimationFrame - cancelAnimationFrame | |||
لا تسلك الدالة <code>requestAnimationFrame(fn)</code> نفس سلوك الدالة <code>setTimeout(fn, 0)</code>، ستُنفَّذ الدالة الأولى بعد مسح كل الأطر، في حين ستنفّذ الدالة الثانية بأسرع وقت ممكن (أكثر من 1000x في الثانية على iPhone 5S). | لا تسلك الدالة <code>requestAnimationFrame(fn)</code> نفس سلوك الدالة <code>setTimeout(fn, 0)</code>، ستُنفَّذ الدالة الأولى بعد مسح كل الأطر، في حين ستنفّذ الدالة الثانية بأسرع وقت ممكن (أكثر من 1000x في الثانية على iPhone 5S). | ||
| سطر 13: | سطر 14: | ||
تستخدم ميّزةُ <code>Promise</code> الدالةَ <code>setImmediate</code> كدالة لا تزامنٍ أوليّة (asynchronicity primitive). | تستخدم ميّزةُ <code>Promise</code> الدالةَ <code>setImmediate</code> كدالة لا تزامنٍ أوليّة (asynchronicity primitive). | ||
ملاحظة: عند التصحيح (Debugging) على منصة Android إذا انزاحت الأزمنة بين المصحح والجهاز فلن تعمل عدة أشياء (كالحركات وسلوك الأحداث وغيرها) بشكل مناسب، أو لن تكون نتائجها دقيقة. يمكنك تصحيح ذلك بتشغيل <code>adb shell "date `date +%m%d%H%M%Y.%S%3N`"</code>على جهاز تصحيحك. كما يكلب الوصول للجذر (root access) للاستخدام في الجهاز الحقيقي. | '''ملاحظة''': عند التصحيح (Debugging) على منصة Android إذا انزاحت الأزمنة بين المصحح والجهاز فلن تعمل عدة أشياء (كالحركات وسلوك الأحداث وغيرها) بشكل مناسب، أو لن تكون نتائجها دقيقة. يمكنك تصحيح ذلك بتشغيل <code>adb shell "date `date +%m%d%H%M%Y.%S%3N`"</code> على جهاز تصحيحك. كما يكلب الوصول للجذر (root access) للاستخدام في الجهاز الحقيقي. | ||
==واجهة InteractionManager== | ==واجهة InteractionManager== | ||
| سطر 27: | سطر 28: | ||
قارن هذا ببدائل الجدولة الأخرى: | قارن هذا ببدائل الجدولة الأخرى: | ||
* requestAnimationFrame(): للشيفرة التي تُحرّك | * <code>requestAnimationFrame()</code>: للشيفرة التي تُحرّك واجهةً بمرور الوقت. | ||
* setImmediate/setTimeout/setInterval(): تشغيل الشيفرة فيما بعد، لاحظ أن هذا قد يؤدي إلى تأخير التحريكات. | * <code>setImmediate()</code>/<code>setTimeout()</code>/<code>setInterval()</code>: تشغيل الشيفرة فيما بعد، لاحظ أن هذا قد يؤدي إلى تأخير التحريكات. | ||
* runAfterInteractions(): تشغيل الشيفرة فيما بعد دون تأخير التحريكات الجارية حاليًا. | * <code>runAfterInteractions()</code>: تشغيل الشيفرة فيما بعد دون تأخير التحريكات الجارية حاليًا. | ||
يَعُدُّ نظام التعامل مع اللمس لمسةً نشطةً واحدةً أو أكثرَ "تفاعلًا" وسيؤخِّر دوال ردّ نداءِ الدالةِ <code>runAfterInteractions()</code> حتى تنتهي جميع اللمسات أو تُلغى. | يَعُدُّ نظام التعامل مع اللمس لمسةً نشطةً واحدةً أو أكثرَ "تفاعلًا" وسيؤخِّر دوال ردّ نداءِ الدالةِ <code>runAfterInteractions()</code> حتى تنتهي جميع اللمسات أو تُلغى. | ||
تُتيح InteractionManager كذلك للتطبيقات تسجيل التحريكات عبر إنشاء "مقبضِ (handle)" تفاعلٍ عند بدء الحركة، وإزالتَه عند الانتهاء: | تُتيح واجهة <code>InteractionManager</code> كذلك للتطبيقات تسجيل التحريكات عبر إنشاء "مقبضِ (handle)" تفاعلٍ عند بدء الحركة، وإزالتَه عند الانتهاء: | ||
<syntaxhighlight lang="javascript"> | <syntaxhighlight lang="javascript"> | ||
var handle = InteractionManager.createInteractionHandle(); | var handle = InteractionManager.createInteractionHandle(); | ||
| سطر 46: | سطر 47: | ||
* [https://facebook.github.io/react-native/docs/timers صفحة Timers في توثيق React Native الرسمي.] | * [https://facebook.github.io/react-native/docs/timers صفحة Timers في توثيق React Native الرسمي.] | ||
[[تصنيف:ReactNative]] | [[تصنيف:ReactNative]] | ||
[[تصنيف:React Native Docs]] | |||
المراجعة الحالية بتاريخ 13:44، 9 أكتوبر 2021
الموقتات جزءٌ مهم من أجزاء التطبيق، إذ يوفّر إطار 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).
ملاحظة: عند التصحيح (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);
// تُشغّل مهام الطابور عند إزالة جميع المقابض