التصيير والتأكيد

تخيل أن مكوناتك طهاة في المطبخ، يطبخون وصفات لذيذة، في هذا السيناريو، React هو النادل الذي يسجل طلبات الزبائن ويقدمها لهم. هذه العملية من طلب وتقديم الواجهة لها ثلاث خطوات:

1. تنشيط عملية التصيير (تسليم طلب الزبون للمطبخ)
2. تصيير المكون (إعداد الطلب في المطبخ)
3. التأكيد على DOM (وضع الطلب على الطاولة)

الخطوة الأولى: تنشيط التصيير

هناك سببان لتنفيذ تصيير المكون:

1. التصيير الأوَّلِي للمكون. (initial render)
2. تم تحديث حالة المكون (أو أحد آبائه). (state)

التصيير الأوَّلِي

عند بدء تشغيل التطبيق، تحتاج لبدء التصيير الأوَّلِي، تخفي إطارات العمل ومحررات الأكواد البسيطة هذا الكود، لكنه يتم بواسطة استدعاء createRoot مستهدفًا عنصر DOM، ثم استدعاء طريقة render مع المكون الخاص بك:

جرب عمل تعليق على السطر الذي يستدعي root.render() وانظر كيف تختفي الصورة.

مثل هذا:

// root.render(<Image />);

إعادة التصيير عند تحديث الحالة

بمجرد أن يتم تصيير المكون لأول مرة، يمكنك تنشيط عمليات التصيير الأخرى عن طريق تحديث حالته باستخدام دالة set. تحديث حالة المكون الخاص بك يضع تلقائيًا عملية تصيير في قائمة الانتظار. (يمكنك تخيل هذه العمليات على أنها طلبات من زبون المطعم للحصول على الشاي أو الحلويات أو أي شيء آخر بعد طلبه الأول، اعتمادًا على حالة عطشه أو جوعه.)

الخطوة الثانية: يقوم React بتصيير مكوناتك

بعد تنشيط عملية التصيير، يقوم React بتصيير مكوناتك لمعرفة ما يجب عرضه على الشاشة. “التصيير” هو استدعاء React لمكوناتك.

• عند التصيير الأوَّلِي، سينشئ React المكون الأصل.
• عند التصيير اللاحق، سينشئ React المكون الذي أدى تحديث حالته إلى التصيير.

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

في المثال التالي، سينفذ React Gallery() و Image() عدة مرات:

• أثناء التصيير الأولي ستقوم React بإنشاء عناصر DOM لعلامات <section>، <h1>، وثلاث علامات <img>.
• أثناء التصيير اللاحق سيحسب الخصائص التي تغيرت منذ التصيير السابق، إن وجدت. لن يفعل أي شيء بهذه المعلومات حتى الخطوة التالية، وهي مرحلة التأكيد.

الخطوة الثالثة: يؤكد React التغييرات على DOM

بعد تصيير (استدعاء) للمكونات، سيعدل React الـ DOM.

• أثناء التصيير المبدئي سيستخدمReact DOM API appendChild() لوضع جميع عناصر DOM التي أنشأها على الشاشة.
• أثناء إعادة التصيير سينفذ React العمليات اللازمة (التي تم حسابها أثناء التصيير!) لجعل DOM يتطابق مع أحدث نتيجة تصيير.

يغيّر React عناصر DOM فقط إذا كان هناك فرق بين التصييرين. على سبيل المثال، هناك مكون يقوم بإعادة التصيير مع اختلاف الخصائص المُمَرَّرة من المكون الأصلي كل ثانية. لاحظ كيف يمكنك إضافة بعض النص إلى <input>، وتحديث value، ولكن النص لا يختفي عند إعادة تصيير المكون:

هذا يعمل لأنه أثناء هذه الخطوة الأخيرة، يحدّث React محتوى <h1> بالوقت الجديد. يرى React أن <input> يظهر في JSX في نفس المكان كالمرة السابقة، لذلك لا يلمس React الـ <input> - أو value!

الخاتمة: رسم المتصفح

بعد الانتهاء من التصيير وتحديث React لـ DOM، سيعيد المتصفح رسم الشاشة. على الرغم من أن هذه العملية معروفة باسم “تصيير المتصفح”، سنشير إليها باسم “رسم” طوال التوثيق لتجنب الخلط.