انتقل إلى محتوى الدرس

Choosing Stable Unique IDs مصادر المفاتيح الفريدة المستقرة

افهم أهمية خاصية المفتاح الفريد key في مطابقة قوائم React، ولماذا يسبب فهرس المصفوفة أو التوليد العشوائي أخطاء الهوية، وكيف نكتب Fragment المزود بمفتاح.
3 صفوف تعليمية
ReactJS
0 مشاهدة

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

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

من أين نستمد المفاتيح الصحيحة هندسياً؟ اعتمد دائماً على المعرّفات الفريدة النابعة من أصل البيانات:

  • مفاتيح قواعد البيانات: المعرّفات القادمة من الخادم مثل course.id أو الاسم اللطيف الفريد lesson.slug.
  • البيانات المنشأة محلياً: ولّد معرّفاً فريداً مرة واحدة فقط لحظة إنشاء الكائن عبر دالة crypto.randomUUID() خارج جسم التصيير.
الصف 2 كود برمجي
HTML
const nodes = [
  { id: 'eu-1', host: 'Frankfurt', ms: 18 },
  { id: 'me-2', host: 'Riyadh', ms: 11 },
];
function ClusterList() {
  return <div>{nodes.map((n) => (
    <p key={n.id}>{n.host}: {n.ms}ms</p>
  ))}</div>;
}
الصف 3 معاينة حية