مرحلتا العرض والتثبيت

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

خط أنابيب ثنائي الطور

نظام التحديث في React ليس مجرد استدعاء دالة واحدة، بل هو عبارة عن سلسلة عمليات متعددة المراحل. تجعل تقنية Fiber المرحلة الأولى قابلة للمقاطعة بالكامل، بينما تجعل المرحلة الثانية ذرية تمامًا.

• مرحلة العرض: في مرحلة العرض، يحدد React مظهر واجهة المستخدم. هذه هي المرحلة التي:

  • يتم تنفيذ وظائف المكونات.

  • يتم إنتاج أو تحديث شجرة الألياف قيد التطوير.

  • يحدث الاختلاف والتوفيق.

  • يتم إعداد قائمة بالآثار المترتبة.

• ما يُميّز هذه المرحلة ليس ما تفعله، بل كيف تتصرف. مرحلة العرض في React هي:

  • نقي: لا قراءة لنموذج كائن المستند (DOM)، ولا كتابة لنموذج كائن المستند (DOM).

  • قابل للمقاطعة: يمكن React إيقاف عملية العرض مؤقتًا في أي نقطة من الشجرة.

  • قابل لإعادة التشغيل: يمكن تجاهل التقدم السابق إذا لزم الأمر.

  • غير مرئي للمستخدم: لم يتم إضافة أي شيء إلى DOM حتى الآن.

• نظراً لأن مرحلة العرض قد تتكرر، فإن العمل المكلف أو غير المستقر يُكبّد تكاليف مضاعفة. لهذا السبب، تُركز الأنماط المعمارية على التخزين المؤقت، والهويات الثابتة، وأشكال المكونات المتوقعة لضمان الأداء الأمثل.

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

  • متزامن: لا يمكن إيقافه مؤقتًا

  • على المستوى الذري: تحدث جميع طفرات DOM معًا

  • حتمية: تحدث التأثيرات وتحديثات DOM بترتيب دقيق

• تتضمن مرحلة الالتزام أربع خطوات داخلية:

  • قبل التغيير: يقوم React بالتحضير للتغييرات (مثل اللقطات). ...