إعادة التصيير مقابل عمليات Commit: متى نحسّن الأداء

الهدف: معرفة الفرق بين التصيير والتثبيت.

• التصيير: حساب واجهة المستخدم التالية
• التثبيت: كتابة التغييرات في DOM
• التجاوزات: قد يتخطى التصيير العمل على DOM

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

يزداد عدد مرات التصيير في كل مرة تُشغَّل فيها دالة المكوّن؛ بينما يوضّح useEffect عمليات التثبيت (بعد تحديث DOM).

يتخطى React.memo إعادة التصيير إذا كانت الخصائص متساوية بالمقارنة السطحية. لن تؤدي عملية تبديل حالة غير مرتبطة في المكوّن الأب إلى إعادة تصيير المكوّن الابن المحفوظ مؤقتًا.

حسّن الأداء عندما:

• يُظهر تحليل الأداء أن عمليات التصيير بطيئة
• تتعامل مع قوائم كبيرة أو مكوّنات أبناء ثقيلة
• تسمح الخصائص ومعالجات الأحداث الثابتة باستخدام الحفظ المؤقت

وإلا فابدأ بالحفاظ على بساطة الشيفرة.

تجنّب:

• حفظ كل شيء مؤقتًا (فهذا يزيد التعقيد)
• تغيير هويات الخصائص في كل عملية تصيير
• الخلط بين إعادة تصيير المكوّن الأب وتحديثات DOM للمكوّن الابن

مراجعة: يحسب التصيير واجهة المستخدم؛ بينما يتعامل التثبيت مع DOM. حسّن الأداء عندما يشير تحليل الأداء إلى ذلك، واستخدم React.memo عندما تبقى الخصائص ثابتة.