عندما يتحدث React عن الـ Re-render، فإنه يقصد ثلاثة أشياء
عندما تستدعي setState، لا يقوم React بتحديث الـ DOM فحسب، بل ينفذ ثلاث مراحل منفصلة بالتتابع. يخلط معظم المطورين بين هذه المراحل، وفهم الفرق بينها يساعدك في حل مشكلات الأداء.
المراحل الثلاث:
• Render: يقوم React باستدعاء دالة المكون (component function) الخاصة بك. • Reconcile: يقوم React بمقارنة المخرجات الجديدة بالمخرجات القديمة. • Commit: يقوم React بتطبيق التغييرات على الـ DOM.
- مرحلة الـ Render
يقوم React بتشغيل الدالة الخاصة بك، مستخدماً الـ props الحالية. تعيد الدالة JSX، وهذا الـ JSX ليس سوى قائمة من كائنات JavaScript. يطلق الناس على هذا الاسم virtual DOM، ولكنه ليس DOM حقيقياً، بل هو وصف لما يجب أن تبدو عليه واجهة المستخدم (UI). لا يظهر أي شيء على الشاشة بعد؛ فهذه المرحلة هي مجرد عمليات رياضية ومنطقية بحتة.
- مرحلة الـ Reconcile
يحتفظ React بالشجرة القديمة والشجرة الجديدة، ويبحث عن الاختلافات بينهما. إذا تغير نوع العنصر، يقوم React باستبدال الشجرة بأكملها. أما إذا تغيرت الـ props فقط، فيقوم React بتحديثها. هنا تبرز أهمية الـ keys؛ حيث تساعد الـ keys الـ React على مطابقة العناصر في القائمة بناءً على الهوية بدلاً من الموقع. تقوم هذه المرحلة بإنشاء قائمة بأقل الخطوات اللازمة لتحديث الـ DOM.
- مرحلة الـ Commit
يأخذ React قائمة التغييرات ويقوم بتعديل الـ DOM الحقيقي، حيث ينشئ عقدًا (nodes) جديدة ويحذف القديمة. في هذه اللحظة يرى المستخدمون التغييرات على الشاشة. بعد ذلك، يقوم المتصفح بعملية الرسم (paint) للشاشة، ثم يتم تنفيذ useEffect.
مفاهيم خاطئة شائعة:
• إعادة الصيرورة (re-render) لا تؤدي دائماً إلى تغيير الـ DOM؛ فإذا كانت المخرجات هي نفسها، فلن يفعل React شيئاً في مرحلة الـ commit. • React.memo يتخطى استدعاء الدالة، لكنه لا يتخطى تحديث الـ DOM. • الـ props لا تسبب الـ re-renders؛ بل إن إعادة صيرورة المكون الأب (parent) هي التي تحفز المكون الابن (child)، وتغيير الـ prop هو مجرد نتيجة لذلك.
كيفية إصلاح الأداء:
إذا كانت الدالة بطيئة، فلديك مشكلة في الـ Render. انقل العمليات الثقيلة خارج الدالة أو استخدم الـ memoization.
إذا كان React يعيد بناء قوائم ضخمة، فلديك مشكلة في الـ Reconcile. تحقق من الـ keys الخاصة بك.
إذا كان الـ DOM يتحدث بشكل مفرط، فلديك مشكلة في الـ Commit. استخدم الـ virtualization أو قم بتغيير هيكلية الكود.
يقوم React 19 و React Compiler الآن بمعالجة الكثير من هذا العمل نيابة عنك، ولكن معرفة هذه المراحل تساعدك في تصحيح الأخطاء (debug) بشكل أفضل.
المصدر: https://