العمل مع القوائم (Lists) في React

الدرس التاسع: العمل مع القوائم (Lists) في React

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

1. كيفية عرض القوائم باستخدام map()

في React، من الأكثر شيوعًا استخدام دالة map() لتحويل المصفوفات إلى عناصر واجهة مستخدم يمكن عرضها في واجهتك. دالة map() هي دالة في JavaScript تُستخدم للتكرار عبر المصفوفات وتحويلها إلى شكل جديد. في حالة React، يتم استخدامها لتكرار المصفوفات وتحويل كل عنصر إلى عنصر JSX يمكن عرضه على الشاشة.

مثال بسيط لعرض قائمة باستخدام map()

لنأخذ مثالاً عمليًا على كيفية عرض قائمة من العناصر باستخدام دالة map() في React:

import React from 'react';

function ItemList() {
  const items = ['Apple', 'Banana', 'Orange', 'Mango'];

  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li> // إنشاء عنصر <li> لكل عنصر في المصفوفة
      ))}
    </ul>
  );
}

export default ItemList;

في هذا المثال:

• لدينا مصفوفة من العناصر ['Apple', 'Banana', 'Orange', 'Mango'].
• نستخدم دالة map() للتكرار عبر المصفوفة وتحويل كل عنصر إلى عنصر <li>.
• map() تأخذ دالة مستدعاة (callback function) تقوم بتكرار كل عنصر من المصفوفة وتحويله إلى JSX.

ماذا يحدث في map()؟

• map() تقوم بإرجاع مصفوفة جديدة تحتوي على عناصر JSX، مما يجعلها مثالية للتعامل مع القوائم في React.
• في كل مرة يتم تكرار فيها العنصر، يتم إنشاء عنصر جديد في الـ DOM.

2. استخدام key في العناصر القابلة للتكرار لتحسين الأداء

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

لماذا يعتبر key مهمًا؟

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

كيفية استخدام key بشكل صحيح

عند استخدام map() لإنشاء عناصر JSX مكررة، يجب عليك تحديد key فريد لكل عنصر داخل التكرار. عادةً ما يتم استخدام id أو القيم الفريدة من المصفوفة كمفتاح.

import React from 'react';

function ItemList() {
  const items = ['Apple', 'Banana', 'Orange', 'Mango'];

  return (
    <ul>
      {items.map((item, index) => (
        <li key={item}>{item}</li> // استخدام item كمفتاح بدلاً من index
      ))}
    </ul>
  );
}

export default ItemList;

في المثال السابق:

• استخدمنا item كمفتاح بدلاً من index لأن قيمة item هي فريدة من نوعها في القائمة.
• هذه الطريقة توفر أفضل أداء وتقلل من المشكلات المحتملة عند إضافة أو حذف العناصر.

الفرق بين استخدام index و item كـ key

• index: يمكن استخدامه كمفتاح إذا كانت القائمة ثابتة ولا تتغير. لكن في الحالات التي يتم فيها إضافة أو حذف عناصر، قد يؤدي استخدام index إلى أداء أقل كفاءة.
• item: إذا كان لديك قيم فريدة، مثل id لكل عنصر في القائمة، استخدمها كمفتاح. سيساعد هذا React في تحديد أي العناصر التي تغيرت أو أضيفت أو تم حذفها.

3. كيفية تحديث القوائم عند إضافة أو حذف عناصر

في React، عندما تحتاج إلى إضافة أو حذف عناصر من قائمة، يجب استخدام state لتخزين القوائم المتغيرة. بعد ذلك، يمكنك تحديث الـ state باستخدام setState أو useState لتحديث الواجهة (UI) وإعادة عرض العناصر.

إضافة عنصر إلى القائمة

import React, { useState } from 'react';

function ItemList() {
  const [items, setItems] = useState(['Apple', 'Banana', 'Orange']);

  const addItem = () => {
    setItems([...items, 'Mango']); // إضافة عنصر جديد إلى المصفوفة
  };

  return (
    <div>
      <ul>
        {items.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
      <button onClick={addItem}>Add Mango</button> {/* زر لإضافة عنصر */}
    </div>
  );
}

export default ItemList;

في هذا المثال:

• نستخدم useState لإنشاء متغير items الذي يحتوي على العناصر.
• نقوم بتحديث items بإضافة عنصر جديد عند النقر على الزر باستخدام دالة setItems وتوسيع المصفوفة باستخدام ...items.

حذف عنصر من القائمة

import React, { useState } from 'react';

function ItemList() {
  const [items, setItems] = useState(['Apple', 'Banana', 'Orange']);

  const removeItem = (itemToRemove) => {
    setItems(items.filter(item => item !== itemToRemove)); // حذف العنصر من المصفوفة
  };

  return (
    <div>
      <ul>
        {items.map((item, index) => (
          <li key={index}>
            {item}
            <button onClick={() => removeItem(item)}>Remove</button> {/* زر لحذف العنصر */}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default ItemList;

في هذا المثال:

• نستخدم filter() لإزالة العنصر من القائمة.
• عند النقر على زر “Remove”، نقوم بتصفية العناصر الموجودة في items لإزالة العنصر المحدد.
• بعد تحديث state، يتم إعادة التقديم (render) تلقائيًا مع التغييرات الجديدة.

4. الختام

في هذا الدرس، تعلمنا كيفية العمل مع القوائم في React باستخدام:

• map() لتحويل المصفوفات إلى عناصر JSX قابلة للعرض.
• أهمية استخدام key لتحسين الأداء وضمان أن React يمكنه التعامل مع التغييرات في القوائم بكفاءة.
• كيفية إضافة وحذف العناصر من القوائم باستخدام state.

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