أسئلة مقابلات React Core & Virtual DOM في React
10 سؤال عن React Core & Virtual DOM من مسار React. اقرأ الإجابة المختصرة لكل سؤال هنا، وافتح السؤال للشرح الكامل والأمثلة والأخطاء الشائعة والمصادر.
- متوسط
ما هو Virtual DOM في ريأكت وكيف يعمل خوارزمية الـ Reconciliation (Diffing)؟
الـ Virtual DOM هو تمثيل خفيف في الذاكرة لشجرة DOM الحقيقية، تستخدمه خوارزمية Reconciliation لحساب الفروقات بدقة وإجراء أقل عدد ممكن من التعديلات المباشرة على متصفح الـ DOM.
اقرأ الشرح الكامل - مبتدئ
لماذا تعتبر الـ Keys مهمة جداً عند عرض القوائم وما مخاطر استخدام فهرس المصفوفة (Index) كـ Key؟
المفاتيح (Keys) تمكّن ريأكت من معرفة هوية العناصر الفريدة بين عمليات إعادة التصيير لمعرفة أيها أضيف أو أزيل أو تم تحريكه؛ استخدام الـ Index يؤدي لمشاكل في الحالة واختلال ترتيب المدخلات عند التعديل.
اقرأ الشرح الكامل - مبتدئ
ما هو JSX وما الذي يحدث له خلف الكواليس أثناء عملية الـ Compilation؟
JSX هو امتداد نحوي لـ JavaScript يسمح بكتابة بنية تشبه HTML داخل الكود، ويقوم المترجم (مثل Babel أو SWC) بتحويله إلى استدعاءات دوال إنشاء العناصر (React.createElement أو jsx runtime).
اقرأ الشرح الكامل - متوسط
ما هو مفهوم الـ Pure Components و Purity في دوال ريأكت (Pure Functions)؟
الدالة أو المكون النقي هو الذي ينتج دائماً نفس المخرجات لنفس المدخلات (Props) دون إحداث أي آثار جانبية (Side Effects) خارج نطاقه أثناء الـ Render.
اقرأ الشرح الكامل - متقدم
ما هو دور React Fiber وما الفرق بين Render Phase و Commit Phase؟
مرحلة Render تحسب التغييرات في الذاكرة ويمكن مقاطعتها وتأجيلها بواسطة Fiber لضمان استجابة الواجهة، بينما مرحلة Commit تطبق التغييرات على الـ DOM الحقيقي دفعة واحدة وتعمل بشكل متزامن دون مقاطعة.
اقرأ الشرح الكامل - متوسط
كيف يعمل الـ Event Pooling والـ SyntheticEvent System في ريأكت؟
يوفر ريأكت كائناً موحداً يدعى SyntheticEvent يغلف أحداث المتصفح الأصلية لضمان توافق سلوك الأحداث عبر كافة المتصفحات، مع إدارة الأحداث عبر Event Delegation عند جذر التطبيق.
اقرأ الشرح الكامل - متوسط
ما هي الـ Portals في ريأكت ومتى يجب استخدامها؟
الـ Portals تتيح تصيير عنصر ابن في عقدة DOM تقع خارج التسلسل الهرمي للمكون الأب، مع الحفاظ على تصاعد الأحداث وسياق الـ Context كأنه عنصر ابن طبيعي.
اقرأ الشرح الكامل - مبتدئ
ما هو الـ StrictMode وما هي الفحوصات والتدقيقات التي يجريها في بيئة التطوير؟
الـ StrictMode هو أداة تساعد المطورين على رصد الممارسات القديمة والمشاكل الخفية في الكود، حيث يقوم بإعادة تصيير المكونات وإعادة تشغيل الـ Effects مرتين في بيئة التطوير.
اقرأ الشرح الكامل - مبتدئ
ما هو مبدأ الـ Lifting State Up ومتى نلجأ إليه؟
هو نقل الحالة المشتركة إلى أقرب سلف (Ancestor) مشترك بين عدة مكونات تحتاج للتزامن مع نفس البيانات وتعديلها.
اقرأ الشرح الكامل - متوسط
ما هي الـ Error Boundaries وكيف تتعامل مع الأخطاء غير المتوقعة في شجرة المكونات؟
هي مكونات خاصة تعترض أخطاء JavaScript في شجرة المكونات التابعة لها أثناء الـ Render و lifecycle methods، وتعرض واجهة بديلة (Fallback UI) دون انهيار التطبيق كاملاً.
اقرأ الشرح الكامل