نطاق المفتاح وعدم مروره كخاصية | أهمية خاصية المفتاح الفريد key في قوائم React

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

تكتمل مهارتك في إدارة المفاتيح بقاعدتين حاسمتين؛ الأولى أن تفرد المفتاح مطلوب بين العناصر الشقيقة داخل القائمة الواحدة فقط ولا يضر تشابه المعرفات بين قائمتين منفصلتين في الصفحة. والثانية أن React تستهلك خاصية key داخلياً ولا تمررها أبداً داخل كائن props؛ فإذا احتاج المكون الابن لقراءة المعرّف، مرره كخاصية صريحة مستقلة مثل ticketId={t.id}. قارن بين مصادر المفاتيح في الجدول التالي:

مصدر المفتاح key	الثبات عبر التصييرات	الحكم الهندسي في React
معرّف قاعدة البيانات `item.id`	ثابت بنسبة 100% مع الفرز والتصفية	المعيار القياسي المعتمد لكافة القوائم
معرّف UUID عند إنشاء الكائن	ثابت طوال عمر السجل في الذاكرة	ممتاز للبيانات المنشأة محلياً في المتصفح
فهرس المصفوفة `index`	ينزاح فور الإضافة أو الحذف أو الفرز	تجنبه في القوائم المتغيرة أو التفاعلية
دالة `Math.random()` بالعرض	يتغير في كل تصيير ويهدم العناصر	محظور تماماً — يدمر الأداء وحالة الحقول

الصف 2 كود برمجي

HTML

function TicketRow({ code, summary }) {
  return <div>#{code}: {summary}</div>;
}
function TicketBoard({ tickets }) {
  return (
    <div className="rx-stack">
      {tickets.map((t) => (
        <TicketRow key={t.id} code={t.id} {...t} />
      ))}
    </div>
  );
}

جرّب بنفسك

الصف 3 ملاحظة هامة

الصف 4 ملاحظة هامة

خلاصة المعرفة ومحطة الانتقال

ملخص الدرس

حصاد الدرس

مراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي

ماذا تعلّمت في هذا الدرس؟

استوعبت في هذا الدرس كيف تحافظ خاصية key على هوية العناصر أثناء المطابقة، واخترت المعرّفات الثابتة بدلاً من الفهرس المتغير والدوال العشوائية، وكتبت Fragment الصريح المزود بمفتاح، ومررت المعرّف كخاصية مستقلة عند الحاجة لعرضه. الخطوة التالية: انتقل الآن إلى الدرس رقم 15 «نقاء المكونات وتدفق البيانات أحادي الاتجاه» لمواصلة البناء التراكمي المتدرج في مسار React الحديث.

Keys Scope and Props Rule نطاق المفتاح وعدم مروره كخاصية

شرح صفوف ومحتوى الفقرة

ملخص الدرس

ماذا تعلّمت في هذا الدرس؟

جميع فقرات هذا الدرس (أهمية خاصية المفتاح الفريد key في قوائم React)