keys في react

دعني أعطيك مثالاً حقيقياً لفهم الـ keys.
لنفترض أن لديك قائمة من الألوان.

<ul>
  <li>Green</li>
  <li>Blue</li>
</ul>

إذا أردت إضافة لون جديد إلى نهاية القائمة، فسيكون ذلك سهلاً على React.
بكل بساطة، سينظر React للألوان، وسيجد أن العنصر الأول ما زال Green، والعنصر الثاني ما زال Blue، لذا سيكتفي React بدفع اللون الجديد في نهاية القائمة، وليكن اللون هذا Yellow.
ولكن، لنفترض دفع لون جديد "Red" إلى بداية القائمة.

<ul>
  <li>Red</li>
  <li>Green</li>
  <li>Blue</li>
</ul>

الآن لدينا مشكلة. لماذا؟
سينظر React للألوان ويجد أن أول عنصر أصبح "Red" وليس "Green" كما كان متوقع.
لن يقوم React بالنظر على القائمة كلها، وسوف يفترض أنه عليه تغيير كل العناصر في القائمة ليصل إلى شكل القائمة الجديد.
المشكلة هنا أن React قام بعمليات ليست لها فائدة، ولو كانت هذه القائمة كبيرة، وتحتوي على عناصر كثيرة، سيكون التطبيق بطيئًا جدًا.
الحل هو إستخدام الـ property key على أي عناصر داخل قائمة.
في المثال الأول، سيكون:

<ul>
  <li key="1">Green</li>
  <li key="2">Blue</li>
</ul>

وعند إضافة عنصر جديد إلى بداية القائمة، مع الوضع في الإعتبار أننا نريد السرعة، وعدم عمل أي تغييرات ليست مهمة:

<ul>
  <li key="0">Red</li>
  <li key="1">Green</li>
  <li key="2">Blue</li>
</ul>

الآن، سينظر React للألوان وسيجد أنه هناك key على كل عنصر. لذا، سيبدأ بحساب التغييرات اللازمة عن طريق القيم المعطاه في الـ key.

سيجد React أن العنصر Green ما زال يحصل القيمة 1 في الـ key، والعنصر Blue ما زال يحصل على 2 في الـ key وسيكتفي بدفع العنصر الجديد إلى بداية القائمة.

react يستخدم تقنية المكونات وفي كل مرة تتغير حالة المكون يعاد تشغيله لعرض اخر التحديثات و تساعد المفاتيح React في تحديد العناصر التي تم تغييرها (تمت إضافتها / إزالتها / إعادة ترتيبها). لإعطاء هوية فريدة لكل عنصر داخل المصفوفة ، يلزم وجود key.