أفضل 40 سؤالاً وإجابة في مقابلة React JS (2026)
فريق التحرير
هل تستعد لمقابلة React JS؟ حان الوقت لاستكشاف ما ينتظرك. أسئلة مقابلة React JS يساعدك على الكشف عن وضوحك المفاهيمي ونقاط قوتك في التنفيذ في العالم الحقيقي.
يوفر React JS فرصًا وظيفية واعدة للمهنيين ذوي الخبرة التقنية والتخصصية. سواءً كنتَ جديدًا أو متقدمًا بخبرة مهنية تمتد لخمس أو عشر سنوات، فإن تحليل المهارات والخبرة التقنية أمر بالغ الأهمية. تساعد هذه الأسئلة والأجوبة قادة الفرق والمديرين والمطورين على صقل مهاراتهم والنجاح في مقابلات العمل.
استنادًا إلى رؤى من أكثر من 85 متخصصًا، بما في ذلك مديري التوظيف والقادة الفنيين، يعكس هذا التجميع توقعات الصناعة المتنوعة وأنماط المقابلات الحقيقية التي تم جمعها من فرق العمل عبر مختلف المجالات.
أهم أسئلة وأجوبة مقابلة React JS
1) شرح Virtual DOM وكيفية عمل المصالحة في React.
الجواب:
نموذج DOM الافتراضي هو تمثيلٌ لواجهة المستخدم في الذاكرة، يُحافظ عليه React لحساب تغييرات واجهة المستخدم بكفاءة. عند تحور الحالة أو الخصائص، يُقدّم React شجرة DOM افتراضية جديدة، ثم يُشغّل الاختلاف خوارزمية ضد الشجرة السابقة لاكتشاف الحد الأدنى من عمليات DOM الحقيقية المطلوبة. هذه العملية، التي تُسمى المصالحةيقلل من فوضى التخطيط وعمليات إعادة التدفق المُكلفة في المتصفح. يُعيّن React مفاتيح لعناصر القوائم لمساعدتها على مطابقة العقد عبر عمليات العرض، وتستخدم أساليب استدلالية (مثل مقارنة الأنواع والمفاتيح) لتحديد ما إذا كان يجب تحديث العقد أو إعادة ترتيبها أو إزالتها. تشمل المزايا تحديثات متوقعة، ومساحة سطح أصغر للأخطاء، وأداءً أفضل في واجهات المستخدم المعقدة.
على سبيل المثال:
تقديم قائمة ديناميكية من رسائل الدردشة: باستخدام مستقر key القيم (معرفات الرسائل)، تتم إضافة الرسائل الجديدة فقط إلى DOM بينما تظل العقد الموجودة دون مساس، مما يتجنب عمليات إعادة العرض غير الضرورية.
👉 تحميل ملف PDF مجاني: أسئلة وأجوبة مقابلة React JS
2) ما هي أنواع دورات حياة المكونات المختلفة في React، وكيف يتم تعيين Hooks لها؟
الجواب:
تمر مكونات React بمراحل التركيب والتحديث وفك التركيب. في مكونات الفئة، تُستخدم أساليب دورة الحياة مثل componentDidMount, shouldComponentUpdate, componentDidUpdateو componentWillUnmount التحكم في الآثار الجانبية، وقرارات العرض، والتنظيف. في مكونات الوظيفة، السنانير توفير قدرات مكافئة: useEffect يتعامل مع التأثيرات بعد العرض؛ وظائف التنظيف بالداخل useEffect تشغيل عند إلغاء التثبيت أو قبل التأثير التالي؛ useMemo و useCallback التحكم في التذكير؛ و useRef يُحافظ على المراجع القابلة للتغيير عبر عمليات العرض. تشمل مزايا الخطافات إمكانية التركيب، وتقليل مشاكل ربط "هذا"، وسهولة إعادة استخدام المنطق من خلال الخطافات المخصصة، بينما يتمثل عيبها الرئيسي في الحاجة إلى تعلم قواعد الخطافات وإدارة التبعيات.
الإجابة مع الأمثلة:
- تأثير التركيب:
useEffect(() => fetchData(), []). - التنظيف عند إلغاء التثبيت:
useEffect(() => { start(); return stop; }, []).
3) كيف يمكنك الاختيار بين العرض من جانب العميل (CSR)، والعرض من جانب الخادم (SSR)، وتوليد الموقع الثابت (SSG)، والتوليد الثابت التدريجي (ISR) لتطبيق React؟
الجواب:
يجب أن تعتمد استراتيجية العرض على متطلبات تجربة المستخدم، وحداثة البيانات، واحتياجات تحسين محركات البحث، وقيود البنية التحتية، وسرعة التطوير. مهمتنا يناسب التطبيقات التفاعلية للغاية وراء المصادقة حيث يكون تحسين محرك البحث ثانويًا. SSR يوفر الطلاء الأول بيانات حقيقية للصفحات العامة، مما يحسن وقت الوصول إلى البايت الأول وتحسين محركات البحث ولكن بتكاليف خادم أعلى. SSG يقوم بحساب الصفحات مسبقًا في وقت البناء لتحقيق سرعة ممتازة والتخزين المؤقت عندما تتغير البيانات بشكل غير متكرر. ISR يُحدَّث الصفحات الثابتة تدريجيًا عند الطلب، مما يُوفِّر توازنًا بين الحداثة والأداء. تشمل العوامل إمكانية التخزين المؤقت، والتخصيص، وزمن الوصول إلى الجمهور العالمي، والتعقيد التشغيلي.
الجدول: المزايا مقابل العيوب
| النهج | المزايا | عيوب |
|---|---|---|
| مهمتنا | استضافة بسيطة، وتفاعلية غنية | طلاء أولي أبطأ، وتحسين محركات البحث أضعف |
| SSR | تحسين محركات البحث رائع، بيانات جديدة عند التحميل الأول | ارتفاع تحميل الخادم، والتعقيد |
| SSG | سريع، رخيص، وصديق لشبكة CDN | محتوى قديم حتى إعادة البناء |
| ISR | سريع مع نضارة متحكم بها | مزيد من الأجزاء المتحركة لإدارتها |
4) ما هي استراتيجية إدارة الحالة التي يجب استخدامها: الحالة المحلية، السياق، Redux، أو مكتبات الاستعلام؟
الجواب:
اختيار أبسط أداة الذي يتعامل مع خصائص المشكلة. حالة المكون المحلي عبر useState or useReducer يعد مثاليًا لمشكلات واجهة المستخدم المعزولة. السياق يعمل هذا البرنامج مع القيم التي تتم قراءتها في الغالب على مستوى التطبيق (الموضوع، والمكان، والمستخدم الحالي)، ولكنه غير مُحسَّن للتحديثات عالية التردد عبر الأشجار الكبيرة. مسترجع أو تتفوق المتاجر المماثلة التي تعتمد على الأحداث عندما تحتاج إلى القدرة على التنبؤ، وتصحيح أخطاء السفر عبر الزمن، والبرامج الوسيطة، وتدفقات البيانات أحادية الاتجاه الصارمة. مكتبات جلب البيانات (على سبيل المثال، أنماط React Query) تدير دورات حياة حالة الخادم - التخزين المؤقت، والحذفpingاستراتيجيات إعادة الجلب والمزامنة - مما يقلل من التعليمات البرمجية المتكررة. غالبًا ما تستخدم البنية العملية الحالة المحلية + سياق التكوين + مكتبة حالة الخادم، حجز Redux لعمليات سير العمل المعقدة.
على سبيل المثال:
تستخدم لوحة المعلومات React Query لتخزين API مؤقتًا، وContext للموضوع، و useReducer داخل أدوات معقدة للتعامل مع الأحداث المحلية.
5) ما هو الفرق بين useEffect وuseLayoutEffect، ومتى يتم تطبيق كل منهما؟
الجواب:
useEffect يتم تشغيله بعد أن يقوم المتصفح بالرسم، مما يجعله مناسبًا للمهام غير الحظرية مثل جلب البيانات والاشتراكات والتسجيل. useLayoutEffect ينفذ بشكل متزامن بعد طفرات DOM ولكن قبل الطلاء، مما يسمح بتعديلات القياس والتخطيط التي يجب أن تتم دون وميض (على سبيل المثال، قراءة أحجام العناصر وإعادة تطبيق الأنماط بشكل متزامن). عيب useLayoutEffect هو أنه قد يعيق الطلاء ويؤثر سلبًا على الاستجابة إذا أُفرط في استخدامه. القاعدة الجيدة هي البدء بـ useEffect للآثار الجانبية والوصول إلى useLayoutEffect فقط عندما يتعين عليك قياس أو تغيير التخطيط بشكل متزامن لضمان صحته البصرية.
الإجابة مع الأمثلة:
useEffect: جلب ملف تعريف المستخدم بعد العرض.useLayoutEffect:قم بقياس حجم تلميح الأداة لتحديد موضعه قبل الطلاء.
مقارنة سريعة
| مميز | استخدام التأثير | استخدام تأثير التخطيط |
|---|---|---|
| الوقت | بعد الطلاء | قبل الطلاء |
| حالة الاستخدام | البيانات والاشتراكات | القياسات وإصلاحات التخطيط المتزامن |
| المخاطرة المالية | صدمة طفيفة إذا كانت ثقيلة | كتل الطلاء إذا كانت ثقيلة |
6) اشرح كيفية عمل المفاتيح في القوائم والمخاطر المترتبة على استخدام مؤشرات المصفوفة.
الجواب:
تُمكّن المفاتيح عملية التوفيق في React من تحديد عناصر القائمة بدقة بين عمليات العرض. تتيح المفاتيح المستقرة والفريدة لـ React إعادة ترتيب العناصر أو إدراجها أو إزالتها بأقل قدر من تغيير DOM. باستخدام مؤشرات المصفوفة يُمثل استخدام المفاتيح مشكلةً عند إمكانية إعادة ترتيب العناصر أو إدراجها أو حذفها، لأن React قد يربط الحالة السابقة بالعنصر الخطأ، مما يُسبب أخطاءً خفية (مثل قيم إدخال أو رسوم متحركة غير صحيحة). أفضل ممارسة هي استخدام مُعرّف ثابت خاص بالنطاق، مثل مُعرّف قاعدة البيانات. إذا كانت القائمة ثابتة تمامًا ولا تُعاد ترتيبها، فالمؤشرات مقبولة، ولكن هذا استثناء وليس قاعدة.
على سبيل المثال:
يجب أن تستخدم لوحة كانبان القابلة للسحب معرفات البطاقة، وليس المؤشرات، للحفاظ على هوية المكونات أثناء السحب والإفلات.
7) أين يتم تطبيق تقنيات التذكير في React، وما هي مزاياها وعيوبها؟
الجواب:
يُقلل الحفظ المؤقت من العمليات الحسابية غير الضرورية ويُعيد العرض من خلال إعادة استخدام النتائج السابقة دون تغيير المُدخلات. في React، React.memo تخزين مخرجات المكونات مؤقتًا، useMemo يخزن الحسابات الباهظة الثمن، و useCallback يُخزّن هويات الدوال المُمرَّرة إلى الدوال الفرعية. تتمثل المزايا الرئيسية في استقرار الأداء وتقليل استخدام وحدة المعالجة المركزية في ظل التفاعل المكثف. أما العيوب فتشمل التعقيد، واحتمالية وجود أخطاء في ذاكرة التخزين المؤقت القديمة في حال وجود خطأ في التبعيات، وزيادة تكلفة الذاكرة.
الجدول: طرق مختلفة للحفظ
| النوع | الهدف | العوامل النموذجية التي ينبغي مراعاتها |
|---|---|---|
React.memo(Component) |
تخطي إعادة العرض إذا كانت الدعائم متساوية ضحلة | تقلبات الدعامة، تكلفة الطفل |
useMemo(fn, deps) |
تخزين القيم المحسوبة مؤقتًا | تكلفة الحوسبة مقابل الذاكرة |
useCallback(fn, deps) |
هوية الوظيفة المستقرة | صحة التبعية |
الإجابة مع الأمثلة:
حفظ مجموعة بيانات مفلترة ومرتبة لشبكة باستخدام useMemo، وقم بتغليف مكونات مُقدم الخلية بـ React.memo لتجنب عواصف إعادة العرض.
٨) هل تُفضّل استخدام مكونات مُتحكّم بها أم غير مُتحكّم بها للنماذج؟ ناقش مزايا وعيوب وأنواع حالات النماذج.
الجواب:
المكونات الخاضعة للرقابة ربط المدخلات بحالة React عبر value و onChangeمما يتيح التحقق والإخفاء وواجهة مستخدم مشروطة مستمدة من مصدر واحد للحقيقة. تتمثل مزاياها في إمكانية التنبؤ وسهولة التكامل مع الحالات الأخرى؛ وتشمل عيوبها تكلفة إعادة العرض مع كل ضغطة مفتاح دون تحسين. المكونات غير الخاضعة للرقابة الاعتماد على نموذج الكائن (DOM) كمصدر للحقيقة باستخدام المراجع، مما يوفر تكلفةً أقل وتوصيلًا أبسط للنماذج الأساسية، مع تدقيق أقل مركزية. بالنسبة لسير العمل المعقدة، يشيع استخدام نمط هجين، باستخدام مدخلات مُتحكم بها للحقول المهمة، ومدخلات غير مُتحكم بها للحقول الكبيرة الغنية بالنصوص.
على سبيل المثال:
يستخدم نموذج التسجيل حقولاً خاضعة للرقابة للتحقق من صحة البريد الإلكتروني وكلمة المرور، في حين أن منطقة نص الملاحظات غير خاضعة للرقابة لتقليل تكلفة إعادة العرض.
9) متى تستخدم السياق مقابل الخطاف المخصص، وما الفرق بينهما مفهوميًا؟
الجواب:
السياق هو آلية النقل للقيم التي تحتاجها العديد من المكونات، مع تجنب حفر الدعامات. لا يدير الحالة بنفسه؛ بل يعرضها ببساطة على الأحفاد. خطاف مخصص يُغلِّف منطقًا قابلًا لإعادة الاستخدام - يجمع بين الحالة والتأثيرات والخدمات الخارجية - ويعيد القيم والوظائف. استخدم السياق لتوفير تكوين مشترك للقراءة فقط أو لعرض متجر، واستخدم خطافات مخصصة لتنفيذ سلوك المتجر أو لتنظيم أمور مثل المصادقة، أو علامات الميزات، أو سياسات جلب البيانات. كلاهما متكاملان: النمط المشترك هو useAuth() كخطاف مخصص مدعوم بـ AuthContext.
الإجابة مع الأمثلة:
AuthProvider توفير المستخدم والرموز عبر السياق؛ useAuth يتعامل مع التأثيرات الجانبية لتسجيل الدخول والتحديث وتسجيل الخروج.
10) هل يمكنك تحديد استراتيجيات ضبط الأداء لتطبيقات React الكبيرة، بما في ذلك خصائص العروض البطيئة ونقاط دورة الحياة الساخنة؟
الجواب:
يبدأ ضبط الأداء بالقياس. حدد المسارات البطيئة باستخدام React DevTools Profiler ولوحات أداء المتصفح لتحديد نقاط التوافق النشطة وعمليات الالتزام المكلفة. تتضمن التكتيكات: محلية الولاية (الحفاظ على الدولة بالقرب من مستهلكيها)، التحفيظ (React.memo, useMemo, useCallback), قائمة المحاكاة الافتراضية للقوائم الطويلة، تقسيم الكود مع التحميل الكسول لتقليل الحزمة الأولية، و إزالة الارتداد أو الخنق الأحداث عالية التردد. بالنسبة للبيانات المدعومة من الخادم، استخدم التخزين المؤقت مع مكتبة استعلامات واستفد من مناسب للتشويق أنماط تحميل أكثر سلاسة. انتبه لنقاط ضعف دورة الحياة، مثل التأثيرات التي تُشغّل بكثرة بسبب مصفوفات التبعيات الواسعة، أو المكونات التي تُعاد صياغتها بسبب تغير قيم السياق بشكل متكرر.
الإجابة مع الأمثلة:
قم بإنشاء جدول مكون من 10,000 صف افتراضيًا باستخدام مكتبة النوافذ؛ قم بتحميل المخططات الثقيلة بشكل كسول خلف تقسيم الكود المستند إلى المسار لتحسين الرسم الأولي.
11) ما هو الفرق بين props و state في React؟
الجواب:
يبلغ قطر كلاً من props و state تؤثر جميع المكونات على كيفية عرضها، ولكن غرضها ودورة حياتها يختلفان بشكل أساسي. الدعائم (اختصارًا لـ Properties) هي مدخلات ثابتة تُمرر من مكون رئيسي إلى مكون فرعي، وتُحدد التكوين أو البيانات اللازمة للعرض. تتدفق نزولا في تدفق البيانات أحادي الاتجاه في React ولا ينبغي تعديله أبدًا بواسطة المكون المستقبل. الولايه او المحافظهمن ناحية أخرى، فهي قابلة للتغيير ويتم صيانتها داخليًا بواسطة المكوّن. وهي تحدد السلوك الديناميكي الذي يتغير بمرور الوقت، مثل قيم إدخال النموذج أو تغيير مستوى الرؤية.
جدول الاختلافات الرئيسية:
| عامل | الدعائم | الولايه او المحافظه |
|---|---|---|
| التحولية | غير قابل للتغيير | متقلب |
| امتلاك | تم تمريرها من قبل الوالد | مملوكة للمكون |
| طريقة التحديث | إعادة تقديم الوالدين | useState or setState |
| الحلول المقترحة | الاعداد | تغييرات واجهة المستخدم الديناميكية |
| دورة الحياة | موجود أثناء العرض | يستمر، ويؤدي إلى إعادة العرض |
على سبيل المثال:
A <Button color="blue" /> يستخدم الدعائم لتحديد اللون، بينما clicked يقوم boolean في حالته بتبديل الملاحظات المرئية.
12) اشرح نمط بنية المكونات في React والطرق المختلفة التي يتم بها تصنيف المكونات.
الجواب:
تتبع تطبيقات React الهندسة المعمارية القائمة على المكوناتتقسيم واجهة المستخدم إلى وحدات بناء صغيرة قابلة لإعادة الاستخدام. يمكن تصنيف المكونات حسب غرض و مسؤولية:
- المكونات العرضية (الغبية) - التركيز على واجهة المستخدم، واستقبال البيانات عبر الدعائم، ونادرًا ما يتم إدارة الحالة.
- مكونات الحاوية (الذكية) - التعامل مع المنطق، وجلب البيانات، وإدارة الحالة؛ فهي تقوم بتقديم المكونات التقديمية.
- المكونات ذات الترتيب الأعلى (HOCs) - الوظائف التي تأخذ مكونًا وتعيد إصدارًا محسّنًا بسلوك إضافي.
- المكونات النقية - تحسين الأداء عن طريق مقارنة الدعائم والحالة بشكل سطحي.
- المكونات الوظيفية مقابل المكونات الفئوية - أصبحت المكونات الوظيفية (التي تحتوي على خطافات) مفضلة الآن لسهولة القراءة والأداء.
على سبيل المثال:
A <UserProfile /> قد يكون المكون عرضيًا، ويستقبل معلومات المستخدم، بينما <UserProfileContainer /> يقوم بجلب البيانات وإدارة دورة حياتها.
13) كيف يتعامل React مع حدود الخطأ، ولماذا هي مهمة؟
الجواب:
حدود الخطأ هي مكونات React خاصة تلتقط Javaأخطاء النصوص البرمجية في أي مكان في شجرة مكوناتها الفرعية أثناء العرض، أو أساليب دورة الحياة، أو المنشئات. تمنع هذه الأخطاء تعطل التطبيق بالكامل عن طريق عزل الأعطال في أشجار فرعية محددة. يمكنك تنفيذ واحد باستخدام componentDidCatch(error, info) و static getDerivedStateFromError() في مكون الفئة.
المزايا:
- الحفاظ على استقرار واجهة المستخدم من خلال إظهار واجهات المستخدم البديلة.
- التقاط الأخطاء وتسجيلها للتحليلات.
- منع عمليات إلغاء التثبيت المتتالية.
على سبيل المثال:
class ErrorBoundary extends React.Component {
state = { hasError: false };
static getDerivedStateFromError() { return { hasError: true }; }
render() { return this.state.hasError ? <h2>Something went wrong.</h2> : this.props.children; }
}
14) ما هي شظايا React، وكيف تختلف عن الغلاف؟ عناصر؟
الجواب:
رد فعل فتات (<></>) يتيح لك تجميع عناصر متعددة دون إضافة عقد إضافية إلى DOM. هذا ضروري لهيكل أكثر تنظيمًا، خاصةً في القوائم والجداول وHTML الدلالية حيث قد تُسبب الإضافات الإضافية مشاكل في التخطيط أو إمكانية الوصول. على عكس الإضافات <div>لا يتم تقديم الشظايا إلى DOM وبالتالي تتمتع بمزايا الأداء والدلالة.
على سبيل المثال:
return (
<>
<h1>Title</h1>
<p>Description</p>
</>
);
جدول الفروقات:
| عامل | شظية | <div> إزار |
|---|---|---|
| مخرجات DOM | بدون سلوفان | يضيف عقدة إضافية |
| الحلول المقترحة | مجموعة هيكليةping | التصميم أو التخطيط |
| هاملت | أفضل | ارتفاع طفيف |
15) ما هو React Hook الذي ستستخدمه لتحسين الأداء ولماذا؟
الجواب:
غالبًا ما تعتمد مكونات React الحساسة للأداء على خطافات التذكير و تحميل كسول لتقليل العمل الزائد. من بين الأمور الشائعة:
useMemo→ يخزن النتائج ذات التكلفة الحسابية الباهظة.useCallback→ يمنع عمليات العرض الفرعية غير الضرورية بسبب تغييرات هوية الوظيفة.useTransition→ تأجيل التحديثات غير العاجلة للحصول على واجهة مستخدم أكثر سلاسة.useDeferredValue→ يؤخر العمليات الحسابية الثقيلة حتى بعد التفاعلات الفورية.
على سبيل المثال:
شبكة بيانات كبيرة باستخدام useMemo للحصول على نتائج مفلترة، يمكن تقليل استهلاك وحدة المعالجة المركزية بنسبة 50% أو أكثر.
المزايا:
- يقلل من هدر العروض التقديمية.
- يحافظ على استجابة واجهة المستخدم تحت الحمل.
العيب:
- يتطلب دقة التبعية؛ قد تحدث أخطاء ذاكرة التخزين المؤقت القديمة إذا تمت إدارتها بشكل غير صحيح.
16) ما هي بوابات React وما هي مميزاتها؟
الجواب:
بوابات السماح لمكونات React بتحويل العناصر الفرعية إلى عقدة DOM خارج تسلسلها الهرمي الأصلي، عادةً للعناصر المنبثقة أو التلميحات أو القوائم المنسدلة التي يجب أن "تتجنب" بصريًا سياقات التجاوز أو التكديس. تم التنفيذ باستخدام ReactDOM.createPortal(child, container)، فإنها تحافظ على اتساق فقاعات الأحداث، لذلك تعمل معالجات الأحداث كما لو كان العنصر قد بقي داخل التسلسل الهرمي الأصلي.
جدول المزايا:
| ميزة | الوصف |
|---|---|
| الاستقلال الهيكلي | عرض خارج شجرة الوالدين |
| CSS/التحكم في التكديس | تجنب overflow: hidden أو مشاكل مؤشر z |
| انتشار الحدث | لا تزال أحداث React الاصطناعية تظهر بشكل صحيح |
| إعادة استخدام | مثالية للتراكبات العالمية |
على سبيل المثال:
createPortal(<ModalContent />, document.getElementById('modal-root'));
17) اشرح كيف يقوم React Router بإدارة التنقل والحالة بين الصفحات.
الجواب:
React Router هي مكتبة توجيه تصريحية تعمل على مزامنة واجهة المستخدم مع المتصفح URL. يستخدم واجهة برمجة التطبيقات للتاريخ لمعالجة سجل الجلسة دون الحاجة لإعادة تحميل الصفحة بالكامل. تتضمن المفاهيم الأساسية طرق, الروابط و أوتليت للتوجيه المتداخل. تدعم المكتبة المسارات الديناميكية, URL المعلماتو خطافات الملاحة (useNavigate, useParams, useLocation). قدم React Router v6 بناء جملة مبسطًا وواجهات برمجة تطبيقات البيانات لـ محمل و عمل الوظائف، وتحسين تكامل SSR وإدارة الحالة.
على سبيل المثال:
<Route path="/user/:id" element={<UserProfile />} />
الفوائد:
- تمكين التنقل عبر صفحة واحدة.
- يحافظ على موضع التمرير والتاريخ.
- يتكامل بشكل نظيف مع التحميل الكسول لتحقيق أداء أفضل.
18) ما هي الطرق المختلفة للتعامل مع الآثار الجانبية في تطبيقات React؟
الجواب:
تشير الآثار الجانبية إلى إجراءات تؤثر على شيء خارج نطاق عمل المكوّن (استدعاءات واجهة برمجة التطبيقات، ومعالجة DOM، والاشتراكات). تشمل الأدوات الرئيسية ما يلي:
useEffectللحصول على تأثيرات على جانب العميل بعد العرض.- معالجات الأحداث للحصول على تأثيرات موجهة للمستخدم.
- خطافات مخصصة لإعادة استخدام منطق التأثير (على سبيل المثال،
useFetch). - الوسيطة (مثل Redux Saga أو Thunk) للتنسيق غير المتزامن المعقد.
- استعلام React أو SWR لإدارة حالة الخادم وتحديث دورات الحياة تلقائيًا.
على سبيل المثال:
A useEffect جلب البيانات مرة واحدة عند التحميل:
useEffect(() => { fetchData(); }, []);
المزايا:
إدارة متزامنة مبسطة، وتغليف أفضل، وتحكم أكثر وضوحًا في دورة الحياة.
١٩) هل React إطار عمل أم مكتبة؟ ناقش العوامل التي تُحدد الفرق.
الجواب:
React هو رسميًا مكتبةليس إطارًا متكاملًا، بل يركز فقط على طبقة العرض، وتوفير العرض والحالة والمكونات المطلقةtractions دون فرض التوجيه أو جلب البيانات أو بنية البناء.
جدول المقارنة:
| عامل | المكتبة (React) | الإطار (Angular، Vue) |
|---|---|---|
| مجال | عرض العرض | هندسة MVC الكاملة |
| متعنت | منخفض | مرتفع |
| السيطرة | مدفوع بالمطور | مدفوع بالإطار |
| المرونة | مرتفع | محدودة بالاتفاقيات |
| منحنى التعلم | معتدل | أعلى بسبب التعقيد |
يشكل نظام React البيئي (Redux، Router، Query، Next.js) "إطار عمل ميتا" بشكل فعال، حيث يوفر إمكانية التركيب المعياري التي تسمح للمطورين ببناء بنيتهم الخاصة.
20) متى يجب عليك استخدام React.lazy و Suspense، وما هي مزاياهما؟
الجواب:
React.lazy تمكن تقسيم الكود من خلال تحميل المكونات ديناميكيًا فقط عند الحاجة إليها، بينما Suspense يوفر واجهة مستخدم احتياطية حتى يصبح المكوّن جاهزًا. يُحسّن هذا المزيج أداء التحميل الأولي واستجابة المستخدم.
على سبيل المثال:
const Chart = React.lazy(() => import('./Chart'));
<Suspense fallback={<Loader />}>
<Chart />
</Suspense>
جدول المزايا:
| ميزة | تفسير |
|---|---|
| هاملت | تحميل الكود حسب الطلب |
| تجربة المستخدم | خيار التحميل السلس |
| حجم الحزمة | حزمة أولية أصغر |
| البساطة | واجهة برمجة تطبيقات React الأصلية، الحد الأدنى من الإعداد |
أفضل الممارسات:
- لف مكونات كسولة متعددة في حدود تعليق واحدة.
- استخدم مؤشرات احتياطية مفيدة لإمكانية الوصول.
21) اشرح ما هي مكونات React Server (RSCs) ومزاياها.
الجواب:
تُعد مكونات React Server (RSCs) ابتكارًا رئيسيًا تم تقديمه لتحسين الأداء وتجربة المطور من خلال السماح للمكونات تقديمها على الخادم دون إرسالها Javaنص للعميليتم تنفيذها بالكامل على الخادم، وجلب البيانات، والقراءة من قواعد البيانات، أو تنفيذ عمليات الإدخال/الإخراج بشكل آمن قبل بث الإخراج التسلسلي إلى العميل.
المزايا:
- حجم الحزمة أصغر — لا يوجد عميل JS لمنطق الخادم فقط.
- تحسن أداء — يؤدي جلب البيانات من جانب الخادم إلى تقليل الشلالات.
- الأمن والحماية — الكود الحساس لا يصل إلى المتصفح أبدًا.
- تخزين مؤقت أفضل — يمكن تخزين مكونات الخادم مؤقتًا على الحافة.
على سبيل المثال:
A <ProductList /> يمكن لمكون الخادم جلب البيانات من قاعدة البيانات مباشرة وتمرير النتائج إلى <ProductCard /> مكون العميل.
22) ما هو الفرق بين ترطيب React والمصالحة؟
الجواب:
على الرغم من أن كلا المصطلحين يتضمنان تحديث React لواجهة المستخدم، إلا أن غرضهما يختلف:
- تصالح هي عملية مقارنة شجرة DOM الافتراضية بإصدارها السابق لتحديد الحد الأدنى من تحديثات DOM.
- ترطيب التربةمن ناحية أخرى، فإن عملية ربط مستمعي الأحداث والهياكل الداخلية لـ React هي HTML المُقدم بواسطة الخادم على جانب العميل، تحويل العلامات الثابتة إلى تطبيق تفاعلي بالكامل.
جدول المقارنة:
| عامل | تصالح | ترطيب التربة |
|---|---|---|
| تحفيز عملية | إعادة عرض العميل | تحميل الصفحة الأولي (SSR) |
| الهدف | تحديث DOM بكفاءة | جعل SSR HTML تفاعليًا |
| مجال | اختلافات DOM الافتراضية | ربط الحدث + إعادة ربط الحالة |
| تردد | عدة مرات | مرة واحدة بعد تقديم SSR |
على سبيل المثال:
بعد أن يرسل تطبيق Next.js HTML المقدم مسبقًا، يقوم React هيدرات وهذا يجعل المكونات تستجيب للأحداث دون إعادة عرض كل شيء.
23) كيف يعمل العرض المتزامن على تحسين تجربة المستخدم في React 18+؟
الجواب:
يتيح العرض المتزامن لـ React مقاطعة أو إيقاف أو استئناف عملية العرض بناءً على أولوية المستخدم. هذا يمنع تجميد واجهة المستخدم أثناء العمليات الحسابية المكثفة أو إعادة العرض. ميزات مثل useTransition و useDeferredValue الاستفادة من هذه القدرة على الفصل تحديثات عاجلة (مثل تاي)ping) من عند غير عاجل (مثل التصفية).
الفوائد:
- تفاعلات سلسة وسريعة الاستجابة.
- تقسيم الوقت لمنع حظر الخيط الرئيسي.
- تحديد الأولويات بشكل يمكن التنبؤ به لتحسين تجربة المستخدم.
على سبيل المثال:
const [isPending, startTransition] = useTransition(); startTransition(() => setFilteredList(filter(items, term)));
تفضل، شكرًاping يظل النظام مرنًا حتى عند تصفية مجموعات البيانات الكبيرة لأن React يقوم بجدولة التحديثات غير العاجلة في وقت واحد.
24) ما هي الطرق المختلفة لإجراء الاختبار في تطبيقات React؟
الجواب:
يمكن تصنيف اختبار React إلى وحدة, التكاملو النهائي إلى نهاية .
جدول طرق الاختبار:
| النوع | أداة | الهدف |
|---|---|---|
| وحدة | دعابة | اختبار الوظائف/المكونات المعزولة |
| الاندماج | مكتبة اختبار رد الفعل | اختبار تفاعلات واجهة المستخدم وتغييرات الحالة |
| E2E | Cypress / كاتب مسرحي | اختبار تدفقات المستخدم في المتصفحات الحقيقية |
أفضل الممارسات:
- تفضل مكتبة اختبار رد الفعل على الإنزيم (الحديث، الموجه نحو DOM).
- استخدام واجهات برمجة التطبيقات الوهمية
msw(عامل خدمة وهمي). - تجنب اختبار تفاصيل التنفيذ - ركز على السلوك.
على سبيل المثال:
test('renders user name', () => {
render(<User name="Alice" />);
expect(screen.getByText(/Alice/)).toBeInTheDocument();
});
25) ما هي أدوات البناء والحزم الأكثر استخدامًا مع React، وما هي الاختلافات بينها؟
الجواب:
يمكن لـ React التكامل مع العديد من الحزم والمترجمات، كل منها مُحسَّن لحالات استخدام مختلفة.
جدول المقارنة:
| أداة | الخصائص | المزايا | عيوب |
|---|---|---|---|
| Webpack | شكلي للغاية | ناضجة، غنية بالمكونات الإضافية | الإعداد المعقد |
| برغي | خادم تطوير سريع للغاية يعتمد على ESM | HMR الفوري، بناء الجملة الحديث | دعم محدود للمكونات الإضافية القديمة |
| جزء | تكوين صفري | التحسين التلقائي | Less مرن |
| esbuild | مُجمِّع قائم على Go | سريع جدا | عدد أقل من مكونات النظام البيئي |
على سبيل المثال:
تعتمد المشاريع الحديثة في كثير من الأحيان على برغي لسرعة التطوير و esbuild في خطوط أنابيب CI/CD لبناء إنتاج فعال.
26) كيف يقوم Next.js بتوسيع قدرات React؟
الجواب:
Next.js هو إطار التفاعل يوفر بنيةً مُحكمةً للتوجيه، وSSR، والتوليد الثابت. يُقدم نماذج عرض هجينة، ومسارات API، وميزات نشر جاهزة للحافة.
المزايا:
- مدمج SSR/SSG/ISR دعم.
- تطبيق راوتر مع مكونات React Server.
- تحسين الصورة و الوسيطة للأداء والأمان.
- مسارات API سهلة للوظائف الخالية من الخادم.
على سبيل المثال:
app/page.js للصفحات التي تم عرضها بتقنية SSR؛ app/api/route.js لنقاط نهاية الخادم.
في ملخصيتيح Next.js تطبيقات React عالية الجودة مع الحد الأدنى من التكوين.
27) ما هي بعض مشاكل الأداء الشائعة في React، وكيف يمكنك تجنبها؟
الجواب:
تتضمن مشاكل أداء React الشائعة ما يلي:
- إعادة عرض غير ضرورية — إصلاح باستخدام
React.memoأو تقسيم المكونات. - إنشاء كائن/مصفوفة مضمنة - يستخدم
useMemoللحصول على مراجع مستقرة. - قوائم كبيرة — تنفيذ النوافذ (
react-window,react-virtualized). - الحسابات الثقيلة - قم بحفظها في ذاكرة أو قم بنقلها إلى العاملين على الويب.
- الإفراط في استخدام السياق — التحديثات المتكررة تنتشر بعمق؛ تفضل الحالة المشتقة.
على سبيل المثال:
إذا مررت { a: 1 } مُضمّن في مُكوّن مُخزّن، يُعاد عرضه عند كل عرض رئيسي. يُمكن إصلاحه عن طريق حفظ الكائن في الذاكرة.
جدول نصائح الأداء:
| القضية | تقنية التحسين |
|---|---|
| إعادة تقديم | React.memo, useCallback |
| حسابات باهظة الثمن | useMemoعمال الويب |
| مجموعات البيانات الكبيرة | الافتراضية |
| تحديثات السياق المتكررة | تحديد الحالة |
28) اشرح الفرق بين useReducer و useState.
الجواب:
يتولى كلا الخطافين إدارة الحالة، لكنهما يختلفان في التعقيد والتحكم.
useStateمثالية للتحولات البسيطة والمعزولة للحالة.useReducerمركزية منطق الحالة المعقدة في دالة التخفيض، وذلك باستخدامdispatchإجراءات للتحديثات المتوقعة.
جدول المقارنة:
| عامل | استخدام | استخدامالحد |
|---|---|---|
| بناء الجملة | [value, setValue] |
[state, dispatch] |
| تعقيد | الاشارات | متوسطة إلى معقدة |
| الحلول المقترحة | الدول المستقلة | الحالات المرتبطة أو المتداخلة |
| التصحيح | Less مطنب | أسهل من خلال الإجراءات المسجلة |
| مثال | تبديلات النموذج | التحقق من صحة النموذج أو النماذج متعددة الخطوات |
على سبيل المثال:
const [state, dispatch] = useReducer(reducer, { count: 0 });
dispatch({ type: 'increment' });
29) كيف يمكنك تحسين إمكانية الوصول (a11y) في تطبيقات React؟
الجواب:
تضمن إمكانية الوصول لجميع المستخدمين، بمن فيهم ذوو الإعاقة، استخدام تطبيقك بفعالية. يُسهّل React إمكانية الوصول من خلال الترميز الدلالي وسمات ARIA.
أفضل الممارسات:
- استعمل HTML الدلالي (
<button>vs<div onClick>). - إدارة التركيز باستخدام
refوtabIndex. - استخدم أدوار ARIA للمكونات الديناميكية.
- تأكد من تباين الألوان والبدائل النصية للصور.
- أدوات النفوذ مثل eslint-plugin-jsx-a11y و محور الفأس للتدقيق.
على سبيل المثال:
<button aria-label="Close dialog" onClick={closeModal}>×</button>
المزايا:
- الوصول إلى جمهور أوسع.
- تحسين محركات البحث.
- الامتثال لمعايير WCAG.
30) هل يمكنك وصف الفرق بين تقسيم الكود والتحميل الكسول، ومتى يتم استخدام كل منهما؟
الجواب:
تعمل كلتا التقنيتين على تحسين حجم الحزمة وأداء التحميل ولكنهما تختلفان في توقيت التنفيذ.
- Code شق يقوم بتقسيم الحزم الكبيرة إلى أجزاء أصغر يمكن تحميلها بشكل مستقل.
- Lazy Loading يؤخر تحميل تلك الأجزاء حتى تصبح مطلوبة.
جدول المقارنة:
| عامل | Code شق | تحميل كسول |
|---|---|---|
| تعريف | يقسم الكود إلى أجزاء | تحميل قطع حسب الطلب |
| أداة | Webpack، Vite | React.lazy، متحرك import() |
| الهدف | تحسين حجم الحزمة | تحسين أداء وقت التشغيل |
| التنفيذ | وقت البناء | وقت التشغيل |
على سبيل المثال:
const Settings = React.lazy(() => import('./Settings'));
عند استخدامها معًا، تعمل هذه التقنيات على تقليل الوقت المستغرق للتفاعل وتعزيز السرعة الملموسة للتطبيقات الكبيرة.
31) اشرح مفهوم Render Props وكيف يختلف عن مكونات الدرجة الأعلى (HOCs).
الجواب:
عرض الدعائم هو نمط في React حيث يقبل المكون تعمل كدعامة يُحدد ما يجب تقديمه. يسمح هذا بمشاركة منطق المكونات بين مكونات متعددة دون تكرار.
من ناحية أخرى، فإن مراكز الرعاية الصحية الأولية التفاف مكون وإرجاع نسخة محسنة باستخدام الدعائم أو السلوكيات المحقونة.
جدول المقارنة:
| عامل | عرض الدعائم | المخصص |
|---|---|---|
| تطبيق | وظيفة كطفل | تغليف الدالةping عنصر |
| التركيب | التحكم المضمن | غلاف إعلانيping |
| قراءة | غالبا ما تكون أكثر وضوحا | يمكن أن يسبب جحيم الغلاف |
| الحلول المقترحة | منطق العرض الديناميكي | المخاوف المتقاطعة |
على سبيل المثال:
<DataProvider render={data => <UserList users={data} />} />
توفر Render Props مرونة أفضل وتجنب تضارب الأسماء الشائع في HOCs.
32) ما هي أنواع الخطافات المخصصة المختلفة ومزاياها؟
الجواب:
تُغلِّف الخطافات المُخصَّصة منطقًا قابلًا لإعادة الاستخدام يجمع بين الحالة والآثار الجانبية والأدوات المساعدة. تُحسِّن هذه الخطافات إمكانية إعادة استخدام الكود، وفصل الاهتمامات، وقابلية الاختبار.
الأنواع والأمثلة:
- خطافات إدارة الدولة -
useToggle,useForm. - خطافات جلب البيانات -
useFetch,useQuery. - خطافات واجهة المستخدم/تجربة المستخدم -
useWindowSize,useDarkMode. - خطافات التكامل -
useLocalStorage,useMediaQuery. - خطافات الأداء -
useDebounce,useThrottle.
المزايا:
- إعادة استخدام المنطق المركزي.
- مكونات أنظف.
- اختبار مستقل.
على سبيل المثال:
function useLocalStorage(key, initial) {
const [value, setValue] = useState(() => JSON.parse(localStorage.getItem(key)) || initial);
useEffect(() => localStorage.setItem(key, JSON.stringify(value)), [value]);
return [value, setValue];
}
33) كيف تتعامل مع تسربات الذاكرة في تطبيقات React؟
الجواب:
تحدث تسريبات الذاكرة عندما لا تزال المكونات غير المُركّبة تحتفظ بمراجع للموارد أو الاشتراكات. تُؤدي هذه التسريبات إلى انخفاض الأداء وتسبب سلوكًا غير متوقع.
تقنيات الوقاية:
- تأثيرات التنظيف in
useEffect: useEffect(() => { const id = setInterval(logData, 1000); return () => clearInterval(id); }, []); - إلغاء المكالمات غير المتزامنة استخدام
AbortController. - تجنب الاحتفاظ بالإغلاقات القديمة الإشارة إلى الدعائم/الحالة القديمة.
- إلغاء الاشتراك في الأحداث أو المقابس عند إلغاء التحميل.
- استخدام React Profiler للكشف عن النمو البطيء للذاكرة.
على سبيل المثال:
في تطبيق الدردشة، قم دائمًا بفصل مستمعي المقبس عندما ينتقل المستخدم بعيدًا عن غرفة الدردشة.
34) ما هي أفضل الممارسات لإدارة النماذج في تطبيقات React الكبيرة؟
الجواب:
تتطلب إدارة النماذج في تطبيقات React على مستوى المؤسسة تحقيق التوازن بين التحكم والأداء وإمكانية الصيانة.
أفضل الممارسات:
- استخدم المكتبات مثل فورميك, رد الفعل شكل هوك أو النموذج النهائي للتحقق والتسجيل الميداني.
- قم بتجميع الحقول ذات الصلة باستخدام المكونات أو السياقات المتداخلة.
- تطبيق التحقق من صحة المخطط (نعم، زود) من أجل الاتساق.
- إلغاء عمليات التحقق الثقيلة أو فحوصات واجهة برمجة التطبيقات.
- الحفاظ على حالة النموذج محلية ما لم تكن هناك حاجة لذلك عالميًا.
على سبيل المثال:
يقلل نموذج React Hook من عمليات إعادة العرض عن طريق عزل حالة الإدخال.
const { register, handleSubmit } = useForm();
<input {...register('email', { required: true })} />
35) ما هي أنماط التصميم الأكثر فائدة في تطوير React، وما هي خصائصها؟
الجواب:
يتناسب React بشكل طبيعي مع العديد من أنماط تصميم البرامج من أجل هندسة واجهة المستخدم القابلة للصيانة والقابلة للتطوير.
| نمط | الوصف | مثال |
|---|---|---|
| مقدم الحاوية | فصل المنطق (الحاوية) عن واجهة المستخدم (المقدم) | حاوية البيانات → مكون واجهة المستخدم |
| مُتحكم به - غير مُتحكم به | إدارة بيانات النموذج عبر الحالة مقابل DOM | فورميك مقابل المدخلات الخام |
| المكونات المركبة | عناصر التحكم الأبوية في تكوين الطفل | <Tabs><Tab /></Tabs> |
| نمط المزود | مشاركة الحالة عبر السياق | موفر الثيم |
| نمط الخطافات | إعادة استخدام المنطق المتعلق بالحالة | useAuth, useFetch |
على سبيل المثال:
A Tabs يعرض المكون السياق لذلك <Tab> يقوم الأطفال بتسجيل أنفسهم تلقائيًا - تطبيق نظيف لـ مكون مركب .
36) ما هي الاختلافات الرئيسية بين React 18 و React 19؟
الجواب:
يعتمد React 19 على أساس React 18 المتزامن مع إمكانيات جديدة مهمة.
| الميزات | رد فعل 18 | رد فعل 19 |
|---|---|---|
| العرض المتزامن | أدخلت | تم تحسينه مع تشويق أفضل |
| مكونات الخادم | تجريبي | مستقر ومتكامل |
| واجهة برمجة التطبيقات للإجراءات | غير متوفرة | معيار جديد للتعامل مع إجراءات النماذج |
| تحميل الأصول | يدوي | تحميل الموارد تلقائيًا |
| تحسين معالجة الأخطاء | خفيف | حبيبي مع خطافات حدودية |
الفوائد الرئيسية:
يركز React 19 على طفرات البيانات الأبسط, إجراءات النموذج المضمنةو تحسين التحكم غير المتزامن، مما يجعل SSR والترطيب التدريجي أكثر سلاسة.
37) كيف تعمل الواجهة الأمامية الصغيرة Archiهل يمكن دمج البنية مع React وما هي مميزاتها؟
الجواب:
تُقسّم الواجهات الأمامية الصغيرة تطبيق الويب الكبير إلى وحدات أمامية مستقلة قابلة للنشر. في نظام React البيئي، تُعدّ كل واجهة أمامية صغيرة تطبيقًا مستقلاً يمكن دمجه عبر اتحاد الوحدات, نوافذ الأطر المدمجة أو محملات وقت التشغيل المخصصة.
المزايا:
- النشر والتوسع المستقل.
- استقلالية الفريق عبر مجموعات التكنولوجيا.
- بناء خطوط الأنابيب بشكل أسرع.
على سبيل المثال:
باستخدام اتحاد وحدة Webpackيمكن للفرق عرض مكونات React عبر التطبيقات بشكل ديناميكي:
exposes: { './NavBar': './src/NavBar' }
العيوب:
- تعقيد إدارة الحالة المشتركة.
- تكلفة الأداء من الحزم المعزولة.
38) ما هي العوامل التي تأخذها في الاعتبار لتوسيع نطاق تطبيق React في الإنتاج؟
الجواب:
يتضمن توسيع نطاق تطبيقات React اعتبارات تقنية ومعمارية وتشغيلية.
العوامل الرئيسية:
- Code بناء - اعتماد مستودعات أحادية (Nx/Turborepo) لمشاركة الكود المعياري.
- إدارة الدولة — تقسيم الحالات المحلية مقابل العالمية مقابل حالات الخادم.
- هاملت - التحميل الكسول، والحفظ المؤقت، والتخزين المؤقت لشبكة توصيل المحتوى.
- مراقبة — استخدم Sentry أو Datadog أو LogRocket للأخطاء والمقاييس.
- الاختبار و CI/CD - خطوط الأنابيب الآلية واختبارات الانحدار المرئي.
على سبيل المثال:
منصة تجارة إلكترونية كبيرة تستخدم تطبيقات React باستخدام Next.js لـ SSR، وRedux Toolkit للحالة المتوقعة، والواجهات الأمامية الصغيرة للقطاعات العمودية المعزولة.
39) كيف تختبر مكونات React التي تستخدم السلوك غير المتزامن؟
الجواب:
يتطلب اختبار مكونات React غير المتزامنة المزامنة بين مشغل الاختبار وتحديثات حالة المكون.
أفضل الممارسات:
- استعمل
waitFororfindBy*الاستعلامات في مكتبة اختبار React. - استدعاءات جلب وهمية أو واجهات برمجة التطبيقات باستخدام
msw. - تفضل مؤقتات وهمية (
jest.useFakeTimers()) للتأثيرات المستندة إلى مهلة زمنية.
على سبيل المثال:
test('loads and displays data', async () => {
render(<UserList />);
expect(await screen.findByText('Alice')).toBeInTheDocument();
});
يضمن هذا أن ينتظر الاختبار تحديثات React غير المتزامنة قبل تقديم التأكيدات.
40) اشرح كيف يمكنك تصميم بنية مشروع React قابلة للصيانة وواسعة النطاق.
الجواب:
يجب أن يحقق مشروع React القابل للتطوير التوازن بين الوحدات النمطية والوضوح والتعاون الجماعي.
هيكل المجلد الموصى به:
src/ ├── components/ # Reusable UI elements ├── features/ # Feature-specific modules ├── hooks/ # Custom reusable hooks ├── context/ # Global providers ├── pages/ # Route-level views ├── services/ # API and utilities ├── assets/ # Static resources ├── tests/ # Unit & integration tests └── index.js
أفضل الممارسات:
- استخدم الاستيراد المطلق مع أسماء المسارات البديلة.
- الحفاظ على النظافة الصارمة (ESLint + Prettier).
- استعمل TypeScript لضمان سلامة النوع.
- فرض حدود المكونات باستخدام التصميم الذري أو التقطيع القائم على الميزات.
على سبيل المثال:
في الإعداد الواقعي، قد تتضمن ميزة "المستخدم" UserSlice.js, UserAPI.js, UserCard.jsxو User.test.js، كل ذلك في الداخل src/features/user/.
🔍 أفضل أسئلة مقابلة React.js مع سيناريوهات واقعية واستجابات استراتيجية
1) ما هي الاختلافات الرئيسية بين المكونات الوظيفية والمكونات الطبقية في React.js؟
المتوقع من المرشح: يريد المحاور اختبار مدى فهمك لهندسة مكونات React وأفضل الممارسات الحديثة.
مثال للإجابة:
"المكونات الوظيفية أبسط وتعتمد على الخطافات لإدارة طرق الحالة ودورة الحياة، بينما تستخدم مكونات الفئة this وطرق دورة الحياة مثل componentDidMount. تُفضل المكونات الوظيفية بشكل عام اليوم لأنها تعمل على تحسين الكود، ويسهل اختبارها، وتعمل بشكل أفضل بسبب التحسينات في عملية عرض React.
2) هل يمكنك شرح كيفية عمل Virtual DOM في React؟
المتوقع من المرشح: يريد القائم بالمقابلة تقييم مدى فهمك لآلية الأداء الأساسية في React.
مثال للإجابة:
DOM الافتراضي هو تمثيلٌ مُخزَّنٌ في الذاكرة لـ DOM الحقيقي. عند تغيّر حالة أحد المكوّنات، يُحدِّث React أولاً DOM الافتراضي، ويُقارنه بالإصدار السابق باستخدام عملية تُسمى "diffing"، ثم يُحدِّث فقط أجزاء DOM الحقيقي التي تغيّرت. يُحسِّن هذا النهج الأداء بتقليل التلاعب المباشر بـ DOM.
3) كيف تدير الحالة في تطبيق React واسع النطاق؟
المتوقع من المرشح: يريد القائم بالمقابلة أن يعرف عن تجربتك في مجال تقنيات وأدوات إدارة الدولة.
مثال للإجابة:
في التطبيقات الكبيرة، عادةً ما أستخدم مكتبات إدارة الحالة المركزية مثل Redux أو Zustand. يوفر Redux تدفقًا متوقعًا للبيانات، ويُسهّل تصحيح الأخطاء باستخدام أدوات تصحيح أخطاء السفر عبر الزمن. أما بالنسبة للتطبيقات البسيطة، فأُفضّل استخدام واجهة برمجة التطبيقات السياقية (Context API) والخطافات لتجنب التعقيد غير الضروري.
4) وصف الوقت الذي قمت فيه بتحسين أداء React.
المتوقع من المرشح: يريد القائم بالمقابلة أن يفهم خبرتك العملية في مجال تحسين الأداء.
مثال للإجابة:
في وظيفتي السابقة، كان تطبيقنا يُعاد عرضه بشكل مفرط بسبب تغييرات غير ضرورية في الحالة. كنت أستخدم React.memo و مبادئ السلوك useCallback استخدمتُ خطافًا لمنع إعادة العرض غير الضرورية. كما حللتُ الأداء باستخدام React Profiler وحددتُ المكونات التي تحتاج إلى حفظ مؤقت، مما قلل وقت العرض بنحو 30%.
5) كيف تتعامل مع الآثار الجانبية في React؟
المتوقع من المرشح: يريد القائم بالمقابلة تقييم مدى فهمك للخطافات وإدارة دورة الحياة.
مثال للإجابة:
"أتعامل مع الآثار الجانبية مثل مكالمات API أو معالجات DOM باستخدام useEffect الخطاف. يسمح لي الخطاف بتحديد التبعيات، مما يضمن تشغيل التأثير فقط عند تغيرها. هذا يساعد في الحفاظ على سلوك متوقع وتجنب الحلقات اللانهائية.
6) أخبرني عن خطأ صعب واجهته في مشروع React وكيف قمت بحلها.
المتوقع من المرشح: يريد القائم بالمقابلة تقييم مهاراتك في حل المشكلات وتصحيح الأخطاء.
مثال للإجابة:
في وظيفة سابقة، واجهتُ خطأً أدى إلى عدم ظهور تحديثات الحالة في واجهة المستخدم. بعد التحقيق، أدركتُ أن المشكلة ناجمة عن تعديل كائن الحالة مباشرةً بدلاً من إنشاء نسخة جديدة. أعدتُ تصميم الكود لاستخدام تحديثات ثابتة، مما حلّ المشكلة وحسّن اتساق البيانات.
7) كيف تتعامل مع التحقق من صحة النموذج في تطبيقات React؟
المتوقع من المرشح: يريد القائم بالمقابلة معرفة ما إذا كنت تفهم كيفية تنفيذ التحقق من صحة إدخال المستخدم.
مثال للإجابة:
عادةً ما أستخدم مكونات مُتحكَّم بها لإدارة مُدخلات النماذج، مُدمجةً مع مكتبات مثل Formik أو React Hook Form للتحقق من الصحة. تُبسِّط هذه الأدوات معالجة الأخطاء، وإدارة حالة النماذج، والتكامل مع مكتبات التحقق من الصحة من جهات خارجية مثل Yup.
8) صف موقفًا اضطررت فيه إلى التعاون مع مطوري الواجهة الخلفية أثناء العمل على مشروع React.
المتوقع من المرشح: يريد القائم بالمقابلة تقييم مهاراتك في العمل الجماعي والتواصل.
مثال للإجابة:
في وظيفتي السابقة، تعاونتُ بشكل وثيق مع مطوري الواجهة الخلفية لتصميم واجهات برمجة تطبيقات REST لتطبيق لوحة معلومات. اتفقنا على تنسيقات البيانات ونقاط النهاية خلال مراحل التطوير المبكرة. كما أنشأتُ استجابات تجريبية لمواصلة تطوير الواجهة الأمامية أثناء بناء الواجهة الخلفية، مما يضمن تكاملًا سلسًا لاحقًا.
9) كيف تتأكد من أن مكونات React الخاصة بك قابلة لإعادة الاستخدام وقابلة للصيانة؟
المتوقع من المرشح: يريد المحاور أن يعرف المزيد عن نهجك في تصميم المكونات وقابلية التوسع.
مثال للإجابة:
أتبع مبدأ بناء مكونات صغيرة ومركّزة تُعنى بمهمة واحدة. كما أستخدم الدعائم لتحقيق المرونة، وأحافظ على التصميم المعياري باستخدام CSS-in-JS أو styled-components. هذا يضمن سهولة إعادة استخدام المكونات وصيانتها في جميع أنحاء المشروع.
10) كيف يمكنك البقاء مطلعًا على أحدث اتجاهات React.js وأفضل الممارسات؟
المتوقع من المرشح: يريد القائم بالمقابلة تقييم مدى التزامك بالتعلم المستمر.
مثال للإجابة:
أتابع باستمرار وثائق React الرسمية ومدونات مجتمعها. كما أشاهد محاضرات مؤتمرات React، مثل React Conf، وأستمع إلى بودكاستات مثل "React Podcast". تساعدني هذه الموارد على البقاء على اطلاع دائم بالميزات الجديدة، مثل العرض المتزامن ومكونات الخادم.
