احتراف القوائم والمفاتيح في React
عرض القوائم في React أمر بسيط، ولكن القيام بذلك بشكل صحيح هو التحدي الحقيقي.
يستخدم العديد من المطورين فهرس المصفوفة (array index) كمفتاح. هذا خطأ، حيث يؤدي إلى حدوث أخطاء برمجية وبطء في الأداء.
إليك الطريقة الصحيحة للتعامل مع البيانات الديناميكية في React.
كيف تستخدم React القوائم
تستخدم React دالة map() لتحويل المصفوفات إلى عناصر واجهة مستخدم (UI). عند استخدام map()، تقوم React بتحويل كل قطعة من البيانات إلى مكون (component).
دور المفاتيح (Keys)
تستخدم React نظام Virtual DOM. عندما تتغير البيانات، تقوم React بمقارنة البيانات الجديدة بالبيانات القديمة، وتسمى هذه العملية "التوفيق" (reconciliation).
تعمل المفاتيح كمعرفات فريدة؛ فهي تخبر React بالضبط أي عنصر قد تغير، أو تحرك، أو تم حذفه.
لماذا يعد استخدام الفهرس (Index) كمفتاح أمراً خطيراً؟
يؤدي استخدام الفهرس (0, 1, 2...) كمفتاح إلى ثلاث مشكلات رئيسية:
- أخطاء في حالة المكون (Component State): إذا قمت بترتيب قائمة، فقد تعرض حقول الإدخال أو مربعات الاختيار بيانات من عنصر خاطئ.
- انخفاض الأداء: لا تستطيع React تتبع أي عنصر هو أي واحد، لذا غالباً ما تقوم بإعادة عرض (re-render) القائمة بأكملها بدلاً من عنصر واحد فقط.
- أخطاء بصرية: قد تبدو واجهة المستخدم صحيحة، ولكن المنطق الداخلي سيفشل عندما تتغير مواقع العناصر.
الطريقة الصحيحة لاستخدام المفاتيح
للحفاظ على سرعة واستقرار تطبيقك، اتبع هذه القواعد:
- استخدم معرفات فريدة (Unique IDs): استخدم دائماً المعرفات من قاعدة البيانات الخاصة بك (مثل UUID أو المفتاح الأساسي primary key).
- لا تستخدم
Math.random()أبداً: توليد المفاتيح أثناء عملية العرض (render) يتسبب في قيام React بإعادة إنشاء كل عنصر عند كل تحديث، مما يدمر الأداء. - حافظ على استقرار المفاتيح: يجب أن يظل المفتاح ثابتاً لنفس قطعة البيانات طوال دورة حياتها.
مقارنة سريعة
| الميزة | استخدام الفهرس (Index) | استخدام معرف فريد (Unique ID) |
|---|---|---|
| الاستقرار | غير مستقر | مستقر للغاية |
| الأداء | ضعيف | مثالي |
| سلامة الحالة | غير آمن | آمن بنسبة 100% |
ملخص للمطورين
استخدم دالة map(). مرر معرفاً فريداً ومستقراً إلى خاصية key. تجنب استخدام فهرس المصفوفة لأي قائمة يمكن تغييرها، أو ترتيبها، أو تصفيتها.