List Rendering عرض القوائم
آخر تحديث: 2026-11-03
List Rendering عرض القوائم
يعرض React القوائم عبر تحويل مصفوفة بـ map() إلى مجموعة من عناصر JSX: جهّز مصفوفة بيانات، وأعِد JSX يحمل key فريداً لكل عنصر، فتستطيع عرض أي مجموعة كقائمة تتحدّث تلقائياً عند تغيّر البيانات. والـ key هو ما يتيح لـ React مطابقة العناصر الجديدة بالقديمة، لذا لا يكون اختيارياً أبداً.
| المجموعة | العرض والحالة |
|---|---|
| النوع | نمط |
| منذ الإصدار | أقدم إصدارات React |
ℹ️ ملاحظة يحوّل المحرّر JSX إلى JavaScript ويعرض الواجهة الحقيقية داخل بيئة معزولة؛ تُركَّب المكوّنات تلقائياً دون استدعاء render يدوي.
📝 الصيغة
<ul>
{todos.map((todo) => (
<li key={todo.id}>{todo.text}</li> // map: مصفوفة ← مصفوفة من JSX
))}
</ul>القيمة المرجعة：لا قيمة معادة — مجرد اصطلاح برمجي ونموذج ذهني.
▶ مثال
المثال يعمل مباشرة: يُعرض تلقائياً عند التوسيع وتظهر التعديلات فوراً.
الناتج：
يُظهر العنوان عدد المهام، وتعرض القائمة أدناه ثلاث مهام؛ والضغط على «Add task» يضيف «Task 4» و«Task 5» وهكذا لحظياً، ويبقى العدد متزامناً.💡 النقاط الأساسية
⚠️ تحذير كل عنصر تعيده map يحتاج إلى key ثابت وفريد، وإلا حذّر React في الطرفية وقد تنحرف التحديثات عن مواضعها.
💡 نصيحة حين يصبح JSX لعنصر القائمة معقّداً، استخرجه إلى مكوّن ابن مستقل واقصر جسم map على <TodoItem key={t.id} todo={t} />.
ℹ️ ملاحظة إلى جانب map، تُدمج الدوال التي تعيد مصفوفات جديدة مثل filter وslice كثيراً مع عرض القوائم.
🏷️ المزيد من العرض والحالة
💡 حالات ذات صلة
المزيد من الحالات قريباً.
📚 دروس ذات صلة
❓ الأسئلة الشائعة
س كيف أعرض قائمة في React؟
ج استخدم دالة map على المصفوفة لتحويل كل عنصر إلى عنصر JSX يحمل key؛ وتُعرض مصفوفة JSX المعادة كقائمة بالترتيب.
س لماذا تحتاج القائمة المعروضة بـ map إلى مفاتيح؟
ج يخبر الـ key لـ React بهوية كل عنصر، فتستطيع المقارنة تحديد ما يُضاف أو يُنقل أو يُحذف؛ وبدونه تنحرف التحديثات ويتراجع الأداء.
س أين أضع الـ key حين يكون عنصر القائمة مكوّناً؟
ج على عنصر القائمة الخارجي من استدعاء المكوّن: <TodoItem key={t.id} />، لا على أول عنصر داخل المكوّن.
