لماذا تحتاج عناصر القائمة إلى مفتاح (key)، ولماذا لا نستخدم الفهرس (index)؟

Question

IT Interview Practice · Accepted Answer

عندما تقوم بعرض قائمة، يحتاج React إلى طريقة لمعرفة **أي عنصر هو أي عنصر** بين عمليات الرسم المختلفة حتى يتمكن من إعادة استخدام أو إعادة ترتيب أو إدراج أو حذف عقد DOM بشكل صحيح. **`key`** هو هذا الهوية. ```jsx {users.map(user => ( // stable, unique id ))} ``` ## لماذا فهرس المصفوفة محفوف بالمخاطر استخدام الفهرس كمفتاح يخبر React "العنصر في الموضع 0 هو نفس العنصر كما كان من قبل" — وهذا ينكسر في اللحظة التي تعاد فيها القائمة أو تدرج/تحذف من البداية: ```jsx // items: [A, B, C] with keys 0,1,2 // you DELETE A → [B, C], keys become 0,1 // React thinks key 0 (was A) is now B, key 1 (was B) is now C... // so it keeps the wrong DOM state with the wrong item. ``` عرض حقيقي للمشكلة: قائمة من الحقول حيث الكتابة في صف واحد "تقفز" إلى صف آخر بعد الحذف/الترتيب، لأن React أعاد استخدام `` الخاطئ (وقيمته الداخلية/التركيز الخاصة به). ## القواعد - استخدم **معرف مستقر وفريد** من بيانات بيانات (`user.id`, slug). - الفهرس مقبول **فقط** لقائمة ثابتة لا تتغير أو تُدرج أو تُحذف. - يجب أن تكون المفاتيح فريدة بين **الأخوات** (وليس عالمياً). المفاتيح هي تلميح لخوارزمية التوفيق؛ الحصول عليها بشكل صحيح يحافظ على الأداء وحالة المكون.

لماذا فهرس المصفوفة محفوف بالمخاطر

القواعد

أسئلة ذات صلة