العرض المتزامن والتجميع التلقائي

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

التزامن كنموذج جدولة

لا يُسرّع React الكود البطيء، بل يُغيّره عند تنفيذ المهام. يدخل كل تحديث للحالة إلى مُجدول React مع تحديد أولوية. تُعالج التحديثات العاجلة، مثل إدخال المستخدم، على الفور، بينما تُعالج المهام غير العاجلة، مثل عمليات إعادة الحساب المُعقدة، أو تصفية القوائم، أو انتقالات المسارات، بأولوية أقل. قد يبدأ React في عرض تحديث ذي أولوية منخفضة، ويتوقف مؤقتًا في منتصف العملية لإجراء تفاعل ذي أولوية عالية، ثم يستأنف العمل الأصلي لاحقًا. يتحقق ذلك من خلال تقسيم الوقت ، حيث يتم تقسيم عملية العرض إلى نوافذ صغيرة (~5ms ) ويقوم React بإعطاء الأولوية خيط الرئيسي بين النوافذ للتحقق من المهام العاجلة.

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

الأعمال العاجلة، والانتقالية، والمؤجلة

في التطبيقات المتقدمة، تتنافس أنواع متعددة من التحديثات على خيط الرئيسي:

• التحديثات العاجلة: يجب أن تنعكس هذه التحديثات فورًا: حالة إدخال ، وموضع المؤشر، وخيارات التبديل، والتغييرات الإلزامية في واجهة المستخدم. ينفذ React هذه التحديثات بشكل متزامن (أو بأولوية عالية في الوضع المتزامن) ويُثبّتها في أسرع وقت ممكن.

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

• القيم المؤجلة: هي تحديثات لاحقة تعتمد نسخة أبطأ وأقل تطوراً من حالة سابقة. وهي تقلل من انتشار التغييرات السريعة غير الضرورية وتسمح للعمل الانتقالي بالاستقرار قبل بدء عمليات العرض العميق.

نموذج هذه الآليات مجتمعةً تسلسلاً هرمياً للجدولة بدلاً من كونها ثلاثة مفاهيم مستقلة. فالتحديثات العاجلة تُستبق عمليات الانتقال، وعمليات الانتقال تُستبق القيم المؤجلة. والهدف ليس التوازي، بل الحفاظ على استجابة مُتحكَّم بها تحت الضغط.

التجميع الآلي

في React 19، يتم تجميع تحديثات الحالة تلقائيًا عبر جميع المصادر، وليس فقط معالجات أحداث React . يشمل ذلك التحديثات من:

• وعود

• Async/await

• استدعاءات الجلب

• مهلة زمنية

• مستمعو الأحداث الأصليون ...