React • المستوى الثاني • الدرس 4

القوائم والتكرار في React (Rendering Lists)

أهداف الدرس العلمية

دالة map() تمرّ على كل عنصر في المصفوفة وتُعيد مصفوفة جديدة من عناصر JSX. هذا هو الأسلوب المعياري في React لعرض القوائم:

javascript

const fruits = ['تفاح', 'موز', 'برتقال'];

return (
  <ul>
    {fruits.map((fruit, index) => (
      <li key={index}>{fruit}</li>
    ))}
  </ul>
);

خاصية key هي معرف فريد لكل عنصر في القائمة. تساعد React على:

⚡ الأداء

React يعرف بالضبط أي عنصر تغيّر بدلاً من إعادة رسم القائمة كاملة.

🎯 الدقة

يمنع أخطاء عرض البيانات القديمة أو تكرار العناصر.

🔄 الحفاظ على الحالة

يحافظ على حالة العناصر الفرعية عند إعادة الترتيب.

⚠️ بدونه

React يعرض تحذيراً في Console ويصبح الأداء أبطأ.

التطبيق العملي المباشر

قم بالتعديل على الكود في المحرر أدناه:

⏳ جارٍ تحميل المحرر التفاعلي...