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

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

في Concurrent Mode في React 18، يمكن إيقاف مرحلة التصيير مؤقتًا أو مقاطعتها أو إعادة تشغيلها. قد يستدعي React دالة المكوّن عدة مرات قبل تنفيذ أي عملية التزام. ولهذا يجب أن تكون دوال المكوّنات نقية؛ فلا يمكنها إحداث آثار جانبية، لأن الدالة قد تُشغّل أكثر من مرة أثناء تحديث مرئي واحد.

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

تتكون مرحلة الالتزام من ثلاث مراحل فرعية: ما قبل التغيير (يُنفّذ فيها getSnapshotBeforeUpdate في مكوّنات الأصناف لقراءة قيم DOM قبل التغييرات)، والتغيير (يُدرج React عقد DOM ويحدّثها ويزيلها)، والتخطيط (تُنفّذ فيها التأثيرات المتزامنة، وتحديدًا useLayoutEffect وcomponentDidMount/componentDidUpdate في مكوّنات الأصناف).

يُعد useEffect تأثيرًا جانبيًا لاحقًا، أي إنه لا يُنفّذ أثناء مرحلة الالتزام. بعد اكتمال مرحلة الالتزام وانتهاء المتصفح من عرض الصفحة، يجدول React التأثيرات الجانبية اللاحقة بشكل غير متزامن. وتُنفّذ هذه التأثيرات بعد أن تتاح للمتصفح فرصة عرض DOM المحدّث على الشاشة.

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

إذا قرأ useEffect DOM وحدّث الحالة (مثل قياس عنصر وتعيين حالة للحجم)، فسيعيد React التصيير ثم ينفّذ الالتزام مرة أخرى. يعرض المتصفح الصفحة مرتين: مرة بالحجم الأولي ومرة بالحجم المصحح. وقد يرى المستخدمون وميضًا بالحجم الخاطئ قبل ظهور التصحيح.

ينشئ React داخليًا شجرة من عُقد fiber، عُقدة واحدة لكل مثيل مكوّن. تحتوي كل عُقدة fiber على حالة المكوّن وتأثيراته ومخرجاته. أثناء مرحلة التصيير، ينشئ React شجرة fiber جديدة قيد العمل. وأثناء مرحلة commit، تصبح الشجرة قيد العمل هي الشجرة الحالية، ويُعاد استخدام الشجرة القديمة.

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

نظرًا إلى إمكانية مقاطعة مرحلة التصيير وإعادة تشغيلها، يجب أن تنتج دوال المكوّنات المخرجات نفسها للمدخلات نفسها، من دون آثار جانبية. إن إجراء عمليات التغيير أو إنشاء الاشتراكات أو استدعاء API داخل جسم الدالة، وليس داخل التأثيرات، سيؤدي إلى تنفيذها مرات أكثر من المتوقع في Concurrent Mode، مما يسبب أخطاء.

لا تقرأ خصائص DOM مباشرةً داخل جسم دالة المكوّن. فقد لا يكون DOM موجودًا بعد، كما في التصيير على الخادم، أو قد تكون قيمه قديمة أثناء إعادة التصيير. احرص دائمًا على قراءة DOM داخل useLayoutEffect للقراءات السابقة للرسم، أو داخل useEffect للقراءات اللاحقة للرسم، حيث يُضمن أن يكون DOM محدثًا.

في أي مرحلة فرعية من مرحلة commit في React يُنفَّذ useLayoutEffect؟

تبني مرحلة التصيير في React شجرة fiber، ويمكن مقاطعتها؛ أما مرحلة commit فتطبّق تغييرات DOM وتكون متزامنة دائمًا. وتتكوّن مرحلة commit من ثلاث مراحل فرعية: ما قبل التعديل، والتعديل، والتخطيط. يُنفَّذ useLayoutEffect في مرحلة التخطيط قبل الرسم. ويُنفَّذ useEffect كتأثير سلبي بعد الرسم.