أفضل 20 سؤالاً وأجوبة مقابلة تفاعلية تحتاج إلى معرفتها في عام 2022

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

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

إذن ، إليك أهم أسئلة مقابلة React لمساعدتك على ترك انطباع أول ممتاز.

أعلى أسئلة وأجوبة المقابلة رد

1. قارن DOM الحقيقي و DOM الظاهري

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

يمكن لـ Virtual DOM التحديث بشكل أسرع وتحديث JSX إذا تم تحديث العنصر. لا يمكن تحديث HTML مباشرة. لكن معالجة DOM سهلة في مفهوم البرمجة هذا. ولا توجد قضية هدر للذاكرة.

2. اشرح React بعبارات بسيطة

React هي مكتبة JavaScript تم تطويرها بواسطة Facebook في عام 2011. وأصبحت مفتوحة المصدر في عام 2015 ، واكتسبت شعبية بين مجتمع المطورين والشركات الفردية. يُعد React مفيدًا في تطوير واجهة مستخدم الويب والجوال المعقدة والتفاعلية. يستخدم نهجًا قائمًا على المكونات لبناء مكونات قابلة لإعادة الاستخدام.

3. ضع قائمة ببعض ميزات React

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

4. ما هي مزايا React؟ أيضا ، ضع قائمة ببعض حدودها.

ليس من الصعب تكامل React مع أطر عمل JavaScript أخرى مثل Meteor و Angular وغيرها. كتابة حالات اختبار لواجهة المستخدم تصبح ملائمة مع هذه الأداة. إنها أداة سهلة الاستخدام لكل من العميل والخادم. ميزة أخرى لـ React هي أنها تحسن أداء التطبيق. أيضا ، الكود لديه قابلية عالية للقراءة بسبب JSX.

الآن دعونا نلقي نظرة على بعض العيوب.

أولاً ، تعتبر React مكتبة وليست إطار عمل كامل. يمكن للقوالب المضمنة و JSX إنشاء مجمع الترميز ، والذي يمكن أن يكون مهمة للمبرمجين المبتدئين لفهمها. نظرًا لأن مكتبة React واسعة ، فإن فهمها يمكن أن يكون عملية تستغرق وقتًا طويلاً.

5. ما هو React JSX؟

JSX هو الشكل المختصر لـ JavaScript XML. يقوم بتحويل علامات HTML إلى عناصر React ، والتقاط تعبيرات JavaScript مع بناء جملة مثل HTML. JSX يحول علامات HTML إلى عناصر تفاعل. يسهل فهم هذا النوع من الملفات وينتج عنه تطبيقات قوية وعالية الأداء.

6. هل يمكن للمتصفحات قراءة JSX؟

لا ، يمكن للمتصفحات قراءة كائنات JavaScript فقط. لذلك ، نحتاج إلى تمكين المتصفح من قراءة JSX. يتضمن هذا التمرين تحويل ملف JSX إلى كائن JavaScript قبل تمريره إلى المتصفح. يمكن استخدام محولات مثل Babel لنفس الغرض.

7. شرح طريقة عمل DOM الظاهري

يعد DOM الظاهري في البداية نسخة خفيفة الوزن من DOM الحقيقي. إنه كائن JavaScript في شكل شجرة عقدة. تُنشئ وظيفة العرض في React شجرة عُقَد من مكونات React تحتوي على العناصر والسمات وخصائص الكائن. تتسبب الإجراءات المختلفة من قبل المستخدم أو النظام في حدوث طفرات في نموذج البيانات وتحديث هذه الشجرة. تعمل العملية المكونة من ثلاث خطوات في Virtual DOM بالطريقة التالية:

1. يتم إعادة عرض واجهة المستخدم بالكامل عندما تتغير البيانات الأساسية
2. بعد ذلك ، تتم مقارنة تمثيل DOM الظاهري الجديد بالسابق ، ويتم حساب الفرق
3. يتم تحديث DOM الحقيقي مع الأخذ في الاعتبار التغيير أو الاختلاف الفعلي

8. فرق بين React و Angular.

يستخدم Angular DOM الحقيقي وربط البيانات ثنائي الاتجاه مقارنةً بـ DOM الظاهري وربط البيانات أحادي الاتجاه في React. يحتوي على تصحيح وقت التشغيل وليس تصحيح أخطاء وقت التجميع مثل React. أيضًا ، يتم صيانة Angular بواسطة Google ، بينما يعد React أحد منتجات Facebook.

9. "كل شيء هو مكون في React." هل توافق؟

تتكون واجهة المستخدم لتطبيق React من لبنات بناء تسمى المكونات. المكونات تقسم واجهة المستخدم بأكملها إلى أجزاء مستقلة قابلة لإعادة الاستخدام. يتم عرض هذه الأجزاء بعد ذلك بشكل مستقل عن بقية واجهة المستخدم.

10. ما هو الغرض من العرض () في React؟

يحتوي كل مكون في React على عرض () ، والذي يقوم بإرجاع عنصر واحد يمثل مكون DOM الأصلي. يتم تجميع العناصر معًا عند الحاجة إلى تقديم أكثر من عنصر HTML. يتم تجميع العناصر داخل علامات الإغلاق مثل <group> و <form> و <div> وما إلى ذلك. عند الاستدعاء ، يجب أن تُرجع هذه الوظيفة نفس النتيجة.

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

11. ما هي الدعائم في React؟

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

12. اشرح الحالة في React

الحالة هي قلب مكون في React يتم الوصول إليه باستخدام this.state (). الدول هي في الأساس مصدر البيانات التي تحدد طريقة عرض المكونات وسلوكها. على عكس الدعائم ، فإن الحالات عبارة عن كائنات قابلة للتغيير تنشئ مكونات تفاعلية.

قراءة: أسئلة وأجوبة مقابلة مطور Python

13. ما مراحل دورة حياة مكون React؟

تتكون دورة حياة مكون React من ثلاث مراحل رئيسية. وهذه هي:

• العرض الأولي: يشق المكون طريقه إلى DOM.
• التحديث: يتم تحديث المكون أو إعادة تصييره كعوامل أو تغييرات في الحالة.
• إلغاء التركيب: تم ​​إتلاف المكون وإزالته من DOM.

14. كيف تُستخدم المراجع في React؟

يمكننا إرجاع مراجع لعنصر معين يتم إرجاعه بواسطة التصيير (). خاصية Refs تجعل هذا ممكنا. لذلك ، تخزن المراجع مرجعًا لمكوِّن React ليتم إرجاعه بواسطة وظيفة تكوين العرض. نستخدم المراجع عمومًا لإضافة طرق إلى المكونات أو القياسات إلى DOM.

15. المكونات الخاضعة للرقابة مقابل المكونات الخارجة عن السيطرة

يتمثل الاختلاف الأساسي بين المكونات الخاضعة للرقابة وغير المتحكم فيها في أن الأولى تحصل على قيمها الحالية من خلال الدعائم والأخيرة من خلال المراجع. لا تحتفظ المكونات الخاضعة للرقابة بحالتها الخاصة حيث يمكن إخطار التغييرات عبر عمليات الاسترجاعات. المكون الرئيسي يتحكم في بياناتهم. من ناحية أخرى ، تحافظ المكونات غير الخاضعة للرقابة على حالتها ، ويتحكم DOM في بياناتها.

قراءة: أفضل أسئلة وأجوبة مقابلة Blockchain

16. اشرح الأحداث في React

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

17. ماذا تقصد بالتمويه؟

Flux هو نمط معماري يوفر الاستقرار للتطبيق عن طريق تقليل أخطاء وقت التشغيل. يستخدم "مخزنًا" مركزيًا لتمكين الاتصال بين المكونات المختلفة ، والحفاظ على السلطة على البيانات. يجب أن تحدث جميع التحديثات في التطبيق هنا فقط.

18. ما هو Redux؟ ما هي مكوناته؟

Redux عبارة عن حاوية حالة يمكن التنبؤ بها تُستخدم لإدارة حالة تطبيقات JavaScript. يستخدم شجرة حالة واحدة أو "مخزن" لتخزين حالة التطبيق بالكامل في مكان واحد.

يتكون Redux من الأجزاء التالية:

• Action: كائن يصف ما حدث
• المخفض: يحدد كيف ستتغير الحالة
• المتجر: شجرة للتطبيق بأكمله تشتمل على كائنات وحالات
• طريقة العرض: تعرض البيانات المقدمة من المتجر

قراءة: أسئلة وأجوبة مقابلة MongoDB

تعلم دورات البرمجيات عبر الإنترنت من أفضل الجامعات في العالم. اربح برامج PG التنفيذية أو برامج الشهادات المتقدمة أو برامج الماجستير لتتبع حياتك المهنية بشكل سريع.

19. ما هي أهمية المخفضات؟

تحدد المخفضات كيف ستتغير حالة التطبيق استجابة لإجراءات محددة. بناءً على نوع النشاط ، تحدد المخفضات التحديثات المطلوبة ثم تُرجع القيم الجديدة. يعيدون نفس الحالة السابقة إذا لم يكن التغيير ضروريًا.

20. ما هو جهاز التوجيه React؟

React Router هي مكتبة توجيه تساعد في إضافة شاشات جديدة وتدفق إلى تطبيقات JavaScript. يمكنك إضافة هذه المكتبة إلى تطبيقك لإنشاء مسارات متعددة ، كل منها يؤدي إلى صفحة فريدة. يتطابق عنوان URL مع ما يتم عرضه على صفحة الويب.

بهذا نكون قد غطينا معظم أسئلة مقابلة React التي ستواجهها في أي مقابلة. أن تكون دقيقًا في كل هذه الموضوعات سيساعد في الحصول على وظيفة التطوير الأمامية هذه!

إذا كنت مهتمًا بمعرفة المزيد حول React ، فتحقق من برنامج upGrad & IIIT-B's Executive PG في تطوير برامج مكدس كامل والذي تم تصميمه للمهنيين العاملين ويقدم أكثر من 500 ساعة من التدريب الصارم ، وأكثر من 9 مشاريع ، والمهام ، IIIT -ب حالة الخريجين ، ومشاريع التخرج العملية العملية والمساعدة في العمل مع الشركات الكبرى.