أهم 50 سؤالاً وإجابة في مقابلة React يجب معرفتها
هل تريد الذهاب إلى مقابلة مطور React وتتساءل عن الأسئلة التي قد تطرح عليك؟ إليك قائمة بأهم 50 سؤالاً وإجاباتها.
هناك طلب كبير على مطوري ReactJS وهناك سبب وجيه لذلك. ولكن سيتعين عليك إثبات كفاءتك في الإطار للحصول على الوظيفة.
فيما يلي الأسئلة الشائعة حول تطوير React وإجاباتها التي يجب أن تكون على دراية بها. وهي تشمل كل شيء من الأساسيات إلى الموضوعات الأكثر تقدمًا.
جدول المحتويات
إخفاء
1. ما هو React؟
React هي مكتبة جافا سكريبت مجانية ومفتوحة المصدر لتطوير واجهات المستخدم، وتستخدم مكونات لإنشاء مخرجات لتطبيقات الصفحة الواحدة. طُوّرت React بواسطة فيسبوك (Meta)، ويديرها مجتمع من المطورين.
2. قم بإدراج الميزات المهمة لـ React
تتضمن أهم ميزات React ما يلي:
- سهولة الاستخدام
- تطور سريع
- استخدام المكونات
- شبيبة
- DOM الافتراضي
- عالية الأداء
- ربط البيانات في اتجاه واحد
3. أين يوجد مستودع مشروع React؟
React هو مستودع أحادي يعيش في https://github.com/facebook/reactإن كونها مستودعًا أحاديًا يعني أن جميع أكوادها والمصادر الأخرى مخزنة في نفس المكان لتسهيل التطوير والإدارة.
4. ما هو الإصدار المستقر الحالي من React؟
الإصدار المستقر الحالي من React اعتبارًا من 14 يونيو 2022 هو 18.2.0.
5. اذكر الاختلافات بين React Native وReactJS
React وReactJS هما نفس الشيء، في حين أن React Native مبني على React. ولاختلافاتهما، يتم استخدام React في إنشاء واجهات مستخدم ديناميكية ومستجيبة لتطبيقات الويب، بينما تم تصميم React Native لبناء التطبيقات كتطبيقات جوال.
6. ما هو الفرق بين العنصر والمكون؟
عنصر React هو كائن بسيط وغير قابل للتغيير تم إنشاؤه لتمثيل عقدة DOM. كونه غير قابل للتغيير يعني أنه لا يمكن تغييره بمجرد إنشائه، حيث يتم عرضه على DOM. من ناحية أخرى، فإن مكون React قابل للتغيير وينتج مخرجات JSX بمجرد عرضه.
7. كيف تقوم بإنشاء مكون؟
هناك طريقتان لإنشاء مكون في React: 1.) مكونات الدالة و2.) مكونات الفئة. وكما تشير الأسماء، يتم إنشاء مكون الدالة باستخدام إعلان الدالة، بينما يتم إنشاء مكون الفئة باستخدام إعلان الفئة.
//function component
function Hello({ message }) {
return <h1>{`Function hello, ${message}`}</h1>
}
//class component
class Hello extends React.Component {
render() {
return <h1>{`Class hello, ${this.props.message}`}</h1>
}
}
8. قم بإدراج المراحل الأربع لمكون React
يخضع مكون React للمراحل الأربع التالية في دورة حياته:
- المرحلة الأولية - إنشاء المكونات في الحالة الافتراضية باستخدام الدعائم الأولية
- مرحلة التركيب - عرض JSX للمكون
- مرحلة التحديث - تغييرات حالة المكونات وإعادة رسم التطبيق
- مرحلة فك التثبيت - إزالة المكونات من DOM
9. اشرح ما يعنيه المكون ذو الدرجة الأعلى
المكون من الدرجة الأعلى (HOC) هو منهجية React لإنشاء المكونات. فهو يستخدم مكونًا موجودًا لإنشاء مكون جديد بوظائف إضافية. بعبارة أخرى، المكون من الدرجة الأعلى هو دالة تأخذ مكونًا كحجة وتعيد مكونًا جديدًا بميزات إضافية.
10. ما هي المكونات الخاضعة للرقابة وغير الخاضعة للرقابة؟
المكون المتحكم فيه هو مكون React يأخذ قيمته من خلال الدعائم ويخطر النظام بأي تغييرات من خلال عمليات الاسترجاع. يتم التحكم فيه بواسطة مكون رئيسي يدير حالة ويمرر القيم كدعامات إلى المكون الخاضع للرقابة. من ناحية أخرى، يدير المكون غير الخاضع للرقابة حالته، وستحتاج إلى الاستعلام عن DOM استخدام المرجع للحصول على قيمتها.
11. ما هي الدعائم في React؟
إن الخصائص في React هي مجرد طريقة بسيطة لقول الخصائص، وبهذا فإنك تشير إلى خصائص أحد المكونات. تُستخدم الخصائص لتمرير البيانات من أحد المكونات الأساسية إلى أحد المكونات الفرعية أو أكثر، وهي قابلة للقراءة فقط بالنسبة للمكون الفرعي.
12. ما هي props.children؟
تحتوي سمة Props.children على معلومات حول كافة محتويات المكون الذي يحتوي على علامة فتح وعلامة إغلاق. تشير هذه العناصر الفرعية إلى كافة العناصر المحددة داخل المكون الحالي، ويمكن أن تكون عنصرًا واحدًا أو أكثر أو لا شيء.
13. هل يمكنك تحديث الدعائم في React؟
لا، فالخصائص في React تكون من أعلى إلى أسفل ولا يمكن تغييرها. وهذا يعني أن المكون يمكنه إرسال أي خصائص يريدها إلى أبنائه، لكنه لا يستطيع تحديث خصائصه. فقط المكون الرئيسي يمكنه تحديث خصائصه.
14. ما هو JSX؟
JSX تعني JavaScript XML. وهو عبارة عن امتداد لقواعد لغة JavaScript يجعل من الممكن كتابة HTML داخل كود React. لا يفهم المتصفح JSX على أي حال، لذا يتعين على React تحويله إلى كود HTML قابل للقراءة.
15. ما هو الفرق بين المكون والعنصر؟
العنصر هو تعريف غير قابل للتغيير ولا يحمل جنسية لعقدة DOM افتراضية. يحتوي على نوع وخاصية، لكنه لا يحتوي على طرق مثل تلك الموجودة في المكون. وهذا الافتقار إلى الطرق يجعله سريعًا.
16. ما هي الحالة في React؟
تشير الحالة في React إلى كائن مضمّن في أحد المكونات يُستخدم لحفظ وإدارة المعلومات حول هذا المكون. يمكن أن تتغير الحالة بمرور الوقت، وبالتالي ستؤدي إلى إعادة عرض هذا المكون. يجب عليك تعريف الحالة في طريقة إنشاء المكون، وإلا يصبح المكون بلا حالة.
17. ما هو المكون عديم الجنسية؟
لا يحتوي مكون React عديم الجنسية على حالة. وهذا يعني أنه لا يمكنك تعيين حالته باستخدام هذه.setState() لا يمكن استخدام الطريقة ولا تقديمها. ومع ذلك، يمكن للمكون عديم الجنسية أن يحتوي على خصائص.
18. كيف تقوم بتحديث حالة في React
يمكنك تحديث حالة أحد المكونات عن طريق استدعاء هذه.setState() الأسلوب.
19. شرح الوضع الصارم في React
الوضع الصارم في React هو أداة تساعد المطور على اكتشاف المشكلات المحتملة في التطبيق من خلال تنشيط عمليات فحص أعمق على المكونات وتسليط الضوء على المزيد من التحذيرات. الوضع الصارم متاح فقط في وضع التطوير فقط.
20. ماذا يعني رفع الحالة في React؟
يعني هذا السماح للمكونات الفرعية بمشاركة حالة مشتركة من مكوناتها الأصلية، حيث يجعل هذا الأمور أسهل في الإدارة بدلاً من قيام كل مكون فرعي بإدارة الحالة المشتركة بشكل فردي.
21. كيف تقوم بتمرير البيانات في React؟
يمكنك تمرير البيانات في React باستخدام الدعائم والوظائف العكسية. إن وظائف React أحادية الاتجاه، مما يسمح للخصائص بالمرور فقط من المكونات الأصلية إلى مكوناتها الفرعية. لتمرير البيانات من مكون أصلي إلى مكون أصلي، يجب عليك استخدام وظيفة استدعاء.
22. تعريف تدفق في React
Flux هو مفهوم أحادي الاتجاه لتوجيه تدفق البيانات في أحد التطبيقات. ويعني كونه أحادي الاتجاه أن البيانات لا يمكن أن تنتقل إلا من المكونات الأصلية إلى المكونات الفرعية. ويمكن أن يتضمن Flux أيضًا مخازن بيانات متعددة لكل تطبيق.
23. تعريف مسترجع في React
Redux هي مكتبة JavaScript مفتوحة المصدر مفيدة لإدارة الحالات المعقدة في التطبيق. وهي مستقلة ويمكن استخدامها في أطر عمل أخرى مثل Angular. وعلى عكس Flux، تعمل Redux على مركزية إدارة حالة التطبيق، مما يجعل من السهل إنشاء واجهات مستخدم معقدة.
24. متى يجب عليك استخدام Redux؟
لا تحتاج جميع التطبيقات إلى Redux. لكنه مفيد في الحالات التالية:
- عندما يكون لديك كميات كبيرة من حالات التطبيق في تطبيقك
- عندما يكون منطق التطبيق الخاص بك معقدًا
- عندما يكون تطبيقك يحتوي على قاعدة بيانات كبيرة
- عندما يتعين عليك تحديث التطبيق بشكل متكرر
- عندما يكون لديك العديد من الأشخاص يعملون على التطبيق
25. ما هو الفرق الرئيسي بين Redux و Flux؟
الفرق الرئيسي بين الاثنين هو أن Redux يدير جميع بيانات التطبيق من متجر واحد، بينما يمكنك الحصول على متاجر متعددة ضمن Flux.
26. قم بإدراج مكونات Redux
هناك أربعة أجزاء رئيسية لـ Redux:
- المتجر - هذا هو المكان الذي تخزن فيه حالة التطبيق.
- اكشن - هذه هي الأحداث التي تتسبب في قيام التطبيق بإرسال البيانات إلى متجر Redux.
- المخفض - هذه وظيفة تقبل حالة التطبيق الحالية والإجراء كحجج، ثم تقوم بإرجاع حالة جديدة كنتيجة.
- الوسيطة - تتيح هذه الميزة للمطور التقاط جميع الإجراءات من أحد المكونات قبل وصولها إلى وظيفة التخفيض.
27. ما هي خطافات React؟
تعتبر خطافات React ميزة من ميزات مكونات الوظيفة التي تتيح لك الوصول إلى ميزات React المختلفة، مثل بيانات الحالة وتحديثات العرض. وقد تم تقديمها في React 16.8.
28. قم بإدراج نوع الخطافات في React
يوجد أكثر من 15 خطافًا في React، بدءًا من الخطافات الأساسية مثل useState وuseEffect وuseContext إلى الخطافات الإضافية مثل useCallback وuseReducer وuseMemo وuseRef وما إلى ذلك.
29. ما هي الشظايا؟
تُعد شظية React طريقة ملائمة لتجميع عناصر فرعية متعددة في مكون، دون إضافتها إلى DOM. ما عليك سوى تعريف العلامة باستخدام:
<>
or
وحمل جميع العناصر الفرعية التي تريدها بداخلها. والفرق الوحيد هو أن الإصدار المختصر <> لا يقبل المفاتيح والسمات، بينما يقبله الإصدار الطويل.
30. قم بإدراج الطرق الرئيسية لحزمة react-dom
هناك طريقتان هما createPortal() لعرض العناصر الفرعية في DOM خارجي وflushSync() لمسح التحديثات. هناك أيضًا طريقتا render() وhydrate()، اللتان تم استبدالهما بـ createRoot() وhydratRoot() منذ React 18.
31. ما هي مفاتيح React؟
المفاتيح هي معرّفات فريدة تُستخدم بشكل أفضل لإدارة القوائم. تسهل المفاتيح تحديد العناصر الفردية في القائمة ومعرفة متى تم تحديث كل عنصر أو حذفه أو تغييره بأي طريقة.
32. لماذا تعتبر مفاتيح React مهمة؟
المفاتيح مهمة في React لأنها تساعد في العرض الفعال لـ DOM الحقيقي. React جيد لأنه يحاول تقليل المكونات التي يعيد عرضها بعد حدث، واستخدام المفاتيح في قائمة يمنع React من إعادة عرض القوائم بالكامل، وهو ما قد يشكل مشكلة مع القوائم الكبيرة.
33. ما هو الحدث في React؟
الحدث هو أي إجراء في تطبيق يأتي من المستخدم أو النظام. يمكن أن يتراوح الحدث من النقر بالماوس أو الضغط على الأجهزة المحمولة إلى تغيير حجم النافذة أو الضغط على مفتاح أو السحب أو التركيز وما إلى ذلك.
34. اشرح ماذا حدث اصطناعي يعني
الحدث الاصطناعي هو غلاف حول الأحداث الأصلية للمتصفح، والمشكلة هي أن المتصفحات المختلفة تسمي أحداثها بشكل مختلف. يستخدم React الأحداث الاصطناعية لتجنب مشكلة الاضطرار إلى إنشاء تنفيذات وطرق متعددة لجميع المتصفحات المختلفة الموجودة. بهذه الطريقة، يحتفظ React بأسماء مشتركة لجميع أحداث المتصفح المختلفة كواجهة برمجة تطبيقات موحدة.
35. ما هو Webpack؟
Webpack هو نظام تجميع وحدات يستخدم لدمج ملفات JavaScript وCSS وتقليص حجمها. وهو مبني على Node.js وهو مفيد عند العمل مع عدد كبير من الملفات أو الأصول غير البرمجية مثل الصور والخطوط.
36. ما هو تطبيق create-react؟
Create-react-app هي أداة تساعدك على إنشاء تطبيق React بصفحة واحدة في بيئة Node.js الخاصة بك. فهي تولد جميع الملفات والمجلدات التي تحتاجها لبدء تشغيل تطبيق أساسي ثم تتولى الأمر من هناك. وهي تتطلب إصدار Node 14.0.0 وما فوق وnpm من الإصدار 5.6.
الاستخدام بسيط:
npx إنشاء تطبيق تفاعلي myNewApp
قرص مضغوط myNewApp
npm البداية
37. هل يمكنك تقديم جانب الخادم باستخدام React؟
نعم، يمكنك ذلك، مع أنه قد يتطلب موارد كثيرة للمشاريع الكبيرة. يُعدّ العرض من جانب الخادم مفيدًا لأنه يُحسّن تجربة المستخدم وتحسين محركات البحث. ستحتاج إلى بيئة Node.js، وحزمة برامج مثل Webpack، وإطار عمل مثل Next.js و ريمكس لعرض تطبيقات React أثناء التشغيل. أحد الحلول لاستهلاك الموارد المكثف هو استخدام مُولِّد مواقع ثابت، مثل Next.js المستند إلى غاتسبي.
38. اشرح ما تفعله دالة السهم
دالة السهم هي ببساطة طريقة مختصرة لتعريف الدوال. وهي اختصار ES6 يحل محل:
= دالة () مع ()=>.
على سبيل المثال:
اختبار = دالة (){
العودة "هذا اختبار"؛
}
ثم يصبح:
اختبار = () => {
العودة "هذا اختبار"؛
}
أو بالنسبة لعبارات السطر الواحد:
اختبار = () => “هذا اختبار”؛
39. ما هو رد فعل راوتر?
React router عبارة عن مكتبة توفر وظيفة التوجيه في تطبيق React. فهي تسهل تضمين واستخدام مكونات التنقل الغنية، والتي يمكن أن تكون مفيدة للغاية للمشاريع الكبيرة أو المعقدة.
40. ما هي المزايا الرئيسية لاستخدام React Router؟
إنه ينشئ مسارات URL مختلفة لتطبيقك ويوفر قيم window.location وكائن السجل.
41. ما هو ComponentWillUnmount()؟
هذه طريقة مكون يتم استدعاؤها كلما كان React على وشك تدمير المكون. إنها مكان جيد لتنظيف الأشياء، ومسح المؤقتات، وإلغاء طلبات الشبكة، والتعامل مع مشكلات إلغاء التهيئة المهمة الأخرى.
42. ما هو Constructor()؟
المنشئ هو طريقة المكون التي يتم استدعاؤها أثناء تهيئة المكون. يتم استخدامه عادةً لتهيئة الحالات المحلية وربط طرق معالج الأحداث.
43. ما هو Virtual DOM؟
DOM الافتراضي في React هو نسخة خفيفة الوزن من DOM الخاص بمستند HTML الفعلي. يتم استخدامه لإدارة التغييرات وتحديثها بكفاءة على DOM الحقيقي.
44. ما هي مزايا DOM الافتراضي مقارنة بـ DOM الحقيقي؟
DOM الافتراضي خفيف الوزن وأسرع في العرض من DOM الحقيقي، وهذا يجعل العرض على DOM الافتراضي أولاً أكثر كفاءة وإجراء تغييرات على DOM الحقيقي فقط عند الحاجة. كل عقدة على DOM الحقيقي لها مكون مقابل على DOM الافتراضي، وبمجرد إجراء تغييرات على مكون افتراضي بعد العرض، يعرف React بعد ذلك بالضبط عقدة HTML الحقيقية التي يجب تحديثها أو حذفها.
45. اشرح المصطلح تصالح في React
المصالحة هي طريقة React لتحديث DOM الحقيقي فقط عند الضرورة، عن طريق التحقق من الإصدارات المحدثة من DOM الافتراضي من خلال الاختلاف وتحديث العقد الدقيقة التي تغيرت على DOM الحقيقي فقط.
46. اشرح المصطلح ملف في React
Profiler هي أداة React تساعد في تحسين التطبيق من خلال قياس عدد مرات عرض التطبيق ومدة عرض كل مكون. يساعد هذا المطور على تحديد أجزاء التطبيق التي قد تحتاج إلى تحسين.
47. اشرح المصطلح السياق في React
السياق هو طريقة لتمرير البيانات بين مكونات React على مستويات عديدة دون الحاجة إلى تمرير البيانات عبر كل مستوى تعشيش باستخدام الدعائم. من الأفضل استخدامه لمشاركة البيانات بسهولة مع العديد من المكونات التي لا تحتاج إلى تحديثات مستمرة، مثل معلومات السمة وبيانات المستخدم. الجانب السلبي هو أنه قد يجعل إعادة استخدام المكونات أمرًا صعبًا.
48. اشرح المصطلح متزايد في React
التركيب في React هو عملية ربط مكون كعقدة بـ DOM. إلغاء التركيب هو العكس.
49. اشرح المصطلح أداء في React
العرض هو عملية رسم مكون. يحدث هذا عادةً عندما تتغير حالة المكون ويتعين على React إعادة رسم واجهة المستخدم. إذا تمت إعادة رسم مكون أثناء العرض، فسيتم إعادة رسم مكوناته الفرعية أيضًا.
50. اشرح المصطلح حدود الخطأ في React
تشير حدود الخطأ إلى مكون React الذي يلتقط أخطاء JavaScript من مكوناته الفرعية، ويسجل الأخطاء، ويعرض واجهة مستخدم بديلة بدلاً من العقد التي تعطلت. تم تقديم حدود الخطأ في React 16.
خاتمة
لقد وصلنا إلى نهاية هذه القائمة التي تحتوي على أهم 50 سؤالاً يجب معرفتها في مقابلة React، ونأمل أن تكون لديك فكرة جيدة عما يمكنك توقعه الآن.
يجب عليك أيضًا ملاحظة أن لا شيء يبقى على حاله وأن مقابلتك قد تأخذ أي اتجاه، لذلك يجب عليك الاستمرار في الدراسة والبقاء على اطلاع دائم على المستجدات.
مقالات ذات صلة
