التصيير والإيداع

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

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

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

1. تشغيل
2. تصيير
3. إيداع

الرسوم التوضيحية منRachel Lee Nabors

الخطوة 1: شغل عملية تصيير

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

1. هذا هو التصيير الأولي للمكون.
2. تم تحديث الحالة الخاصة بالمكون (أو أحد أسلافه).

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

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

جرب تعليق استدعاءroot.render()وشاهد المكون يختفي!

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

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

1. تحديث الحالة...
2. ...يشغل...
3. ...تصيير!

الرسوم التوضيحية منRachel Lee Nabors

الخطوة 2: تصير React مكوناتك

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

• في التصيير الأولي،ستستدعي React المكون الجذري.
• في عمليات التصيير اللاحقة،ستستدعي React مكون الدالة الذي أدى تحديث حالته إلى تشغيل التصيير.

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

In the following example, React will callGallery()andImage()several times:

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

الخطوة 3: يلتزم React بالتغييرات في DOM

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

• بالنسبة للتصيير الأولي،سيستخدم React واجهة برمجة تطبيقات DOMappendChild()لوضع جميع عُقَد DOM التي أنشأها على الشاشة.
• بالنسبة لإعادة التصيير،سيُطبق React الحد الأدنى الضروري من العمليات (التي تم حسابها أثناء التصيير!) لجعل DOM يتطابق مع ناتج التصيير الأحدث.

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

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

خاتمة: تلوين المتصفح

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

الرسم التوضيحي بواسطةراشيل لي نابورز

ملخص

• يحدث أي تحديث للشاشة في تطبيق React في ثلاث خطوات:
  1. التحفيز
  2. التصيير
  3. التسليم
• يمكنك استخدام الوضع الصارم للعثور على الأخطاء في مكوناتك
• لا يقوم React بلمس DOM إذا كانت نتيجة التصيير مطابقة للنتيجة السابقة