مفاتيح React، نعم! أنت بحاجة إليها، ولكن لماذا بالضبط؟

هناك أيضًا شيء آخر يجب أن تتذكره وهو مفتاح React يجب أن يحتوي كل عنصر من عناصر القائمة المعروضة على هذه السمة. هذا المفهوم هو أحد الأشياء الأولى التي يتعلمها كل مطور واجهة أمامية React في بداية رحلتهم. والآن دعنا نتعمق قليلاً لاستكشاف سبب حدوث ذلك، ومتى يمكننا اتخاذ بعض الطرق المختصرة.

لماذا نحتاج إلى هذه السمة الرئيسية؟

قد تكون أبسط إجابة هنا هي "لتحسين عمليات إعادة الإرجاع"، ولكن الإجابة الأكثر اكتمالاً يجب أن تذكر على الأقل مفهوم React تسوية React. هذه هي عملية معرفة كيفية تحديث واجهة المستخدم بأكثر الطرق فعالية. للقيام بذلك بسرعة React أن يقرّر أي أجزاء من شجرة العناصر يجب تحديثها وأيها لا يجب تحديثها. المشكلة هي أنه قد يكون هناك الكثير من العناصر في DOM ومقارنة كل عنصر منها في تحديد أي منها يجب تحديثه مكلف جدًا. لتحسين ذلك, React تطبق خوارزمية الفرق التي تعتمد على افتراضين:

1. نوعان مختلفان من العناصر لن يكونا متشابهين أبدًا - لذا أعد عرضهما.
2. يمكن للمطورين المساعدة في تحسين هذه العملية يدويًا من خلال السمات الرئيسية، بحيث يمكن توطين العناصر ومقارنتها بشكل أسرع، حتى لو تغير ترتيبها.

وبناءً على ذلك، يمكننا استنتاج أن كلًّا من مفتاح React يجب أيضًا أن تكون فريدة (ضمن قائمة العناصر، وليس على مستوى العالم)، ومستقرة (يجب ألا تتغير). لكن ما الذي يمكن أن يحدث عندما لا تكون كذلك؟

التفرد والثبات ومؤشر الصفيف

كما ذكرنا من قبل, مفاتيح React يجب أن يكون ثابتًا وفريدًا. أسهل طريقة لتحقيق ذلك هو استخدام مُعرِّف فريد (من قاعدة بيانات على سبيل المثال) وتمريره إلى كل عنصر عند تعيين مصفوفة، أمر سهل. ولكن ماذا عن الحالات التي لا نملك فيها معرّفًا أو اسمًا أو معرّفات فريدة أخرى لتمريرها إلى كل عنصر؟ حسنًا، إن لم نمرر أي شيء كمفتاح React سيأخذ فهرس المصفوفة الحالي افتراضيًا (بما أنه فريد داخل تلك القائمة) للتعامل معه نيابةً عنا، ولكنه سيعطينا أيضًا رسالة خطأ لطيفة في وحدة التحكم:

لماذا هذا هو الحال؟ الجواب هو أن فهرس المصفوفة غير مستقر. إذا تغيّر ترتيب العناصر، سيتغيّر كل مفتاح من المفاتيح وسيكون لدينا مشكلة. إذا كان React يصادف حالة تم فيها تغيير الترتيب في قائمة العناصر، سيستمر في محاولة مقارنتها حسب المفاتيح، وهذا يعني أن كل مقارنة ستنتهي بإعادة بناء مكون، ونتيجةً لذلك ستتم إعادة بناء القائمة بأكملها من الصفر. بالإضافة إلى ذلك، قد نواجه بعض المشاكل غير المتوقّعة، مثل تحديثات حالة المكوّن لعناصر مثل المدخلات غير المنضبطة وغيرها من المشاكل السحرية التي يصعب تصحيحها.

الاستثناءات

لنعد إلى فهرس المصفوفة. إذا كان استخدامه كـ مفتاح React يمكن أن تكون إشكالية للغاية، لماذا React سيستخدمها افتراضيًا؟ هل هناك أي حالة استخدام حيث لا بأس من القيام بذلك؟ الإجابة نعم، حالة الاستخدام هي القوائم الثابتة. إن كنت متأكدًا من أن القائمة التي تصيِّرها لن يتغير ترتيبها أبدًا، فمن الآمن استخدام فهرس الصفيف، ولكن تذكّر إن كان لديك أي معرّفات فريدة فمن الأفضل استخدامها بدلًا من ذلك. يمكنك أيضًا أن تلاحظ أن تمرير الفهارس كمفاتيح سيجعل React تختفي رسالة الخطأ، بينما تؤدي في الوقت نفسه إلى قيام بعض المُصنفات الخارجية بعرض خطأ أو تحذير. ويرجع ذلك إلى حقيقة أن الاستخدام الصريح للفهارس كمفاتيح يعتبر ممارسة سيئة وقد تتعامل بعض المُعالجات الخارجية مع ذلك على أنه خطأ، بينما React نفسها تعتبرها حالة "المطورين الذين يعرفون ما يفعلونه" - لذا لا تفعل ذلك إلا إذا كنت تعرف حقًا ما تفعله. بعض الأمثلة على الحالات التي يمكن أن يكون فيها استخدام هذا الاستثناء مقبولًا هي القائمة المنسدلة بقائمة ثابتة من الأزرار أو عرض قائمة من العناصر مع معلومات عنوان شركتك.

بديل للمفتاح القائم على مجموعة البيانات

لنفترض أن أياً مما سبق ليس خياراً متاحاً لنا. على سبيل المثال، علينا أن نعرض قائمة من العناصر بناءً على مصفوفة من السلاسل التي يمكن أن تكون مكررة ولكن يمكن أيضًا إعادة ترتيبها. في هذه الحالة، لا يمكننا استخدام أي من السلاسل لأنها ليست فريدة (يمكن أن يسبب هذا بعض الأخطاء السحرية أيضًا)، وفهرس المصفوفة ليس جيدًا بما فيه الكفاية لأننا سنغير ترتيب العناصر. آخر شيء يمكننا الاعتماد عليه في مثل هذه الحالات هو استخدام بعض المعرّفات الخارجية. تذكر، يجب أن تكون مستقرة لذا لا يمكننا استخدام Math.random(). هناك بعض حزم NPM التي يمكننا استخدامها في مثل هذه الحالات، على سبيل المثال "uuid" الحزمة. يمكن لأدوات كهذه أن تساعدنا في الحفاظ على مفاتيح قائمتنا مستقرة وفريدة، حتى عندما لا يمكننا العثور على معرّفات مناسبة ضمن مجموعة بياناتنا. يجب أن نأخذ بعين الاعتبار استخدام معرّف قاعدة البيانات وفهرس الصفيف (إن أمكن) أولًا، لتقليل عدد الحزم المستخدمة من قبل المشروع.

لتختتم

• كل عنصر في قائمة React أن يكون للعناصر سمة مفتاح فريدة وثابتة,
• مفاتيح React تُستخدم لتسريع عملية المصالحة وتجنب إعادة بناء العناصر غير الضرورية في القوائم,
• أفضل مصدر للمفاتيح هو المعرف الفريد لإدخال البيانات (على سبيل المثال، من قاعدة البيانات),
• يمكنك استخدام فهرس الصفيف كمفتاح ولكن فقط لقائمة ثابتة لن يتغير ترتيبها,
• إذا لم تكن هناك طريقة أخرى للحصول على مفاتيح ثابتة وفريدة من نوعها، ففكر في استخدام بعض مزودي المعرفات الخارجيين، على سبيل المثال، حزمة "uuid".

اقرأ المزيد:

لماذا يجب عليك (على الأرجح) استخدام Typescript

كيف لا تقتل مشروعاً بممارسات الترميز السيئة؟

استراتيجيات جلب البيانات في NextJS