تصيير القوائم ودور الـ keys

حوّل مصفوفة بيانات إلى قائمة عناصر على الشاشة بواسطة map، وميّز كل عنصر بواسطة keys.

8 دقيقة · 3 أسئلة

الواجهات مليئة بالقوائم: الرسائل في محادثة، المنتجات في متجر، المقطوعات في قائمة تشغيل... بدلاً من نسخ ولصق الوسوم يدوياً، تنطلق من مصفوفة بيانات وتحوّلها بواسطة الدالة map. تذكير سريع: map تطبّق دالة على كل عنصر في مصفوفة وتُرجع مصفوفة جديدة بالنتائج.

const fruits = ["apple", "banana", "kiwi"];

const upperFruits = fruits.map(function (fruit) {
  return fruit.toUpperCase();
});

console.log(upperFruits);

في React، تفعل الشيء نفسه بالضبط، إلا أن الدالة الممرّرة إلى map تُرجع JSX بدلاً من سلسلة نصية. يعرف React كيف يعرض مصفوفة من عناصر JSX: يصيّرها واحداً تلو الآخر. الشرط الوحيد هو أن تعطي كل عنصر prop خاصاً باسم key.

function FruitList() {
  const fruits = ["apple", "banana", "kiwi"];

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

ما فائدة key؟ إنه بطاقة فريدة تتيح لـ React التعرّف على كل عنصر عندما تتغيّر القائمة (إضافة، حذف، إعادة ترتيب)، مثل التذاكر المرقّمة في مستودع المعاطف: بدون رقم، لا سبيل لإرجاع المعطف الصحيح. بفضل الـ keys، يحدّث React فقط ما تغيّر فعلاً. عملياً، أفضل key هو معرّف فريد وثابت آتٍ من بياناتك، مثل حقل id.

const tasks = [
  { id: 1, label: "Buy groceries" },
  { id: 2, label: "Water the plants" },
];

function TaskList() {
  return (
    <ul>
      {tasks.map((task) => (
        <li key={task.id}>{task.label}</li>
      ))}
    </ul>
  );
}

اختبار المعرفة

تأكّد من أنك تذكّرت النقاط الأساسية في هذا الدرس.

1. أي دالة مصفوفة تستعمل لتصيير قائمة في React؟
   • push
   • map
   • forEach
2. ما فائدة الـ prop المسمّى key؟
   • فرز القائمة أبجدياً تلقائياً
   • حماية القائمة بكلمة مرور
   • تمكين React من تمييز كل عنصر في القائمة
3. ما أفضل قيمة لـ key؟
   • معرّف فريد وثابت آتٍ من البيانات
   • فهرس العنصر في المصفوفة، في كل الحالات
   • رقم عشوائي يُولَّد عند كل تصيير