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

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

المشكلة الرئيسية: منطق .map() المتكرر

تخيل أنك تقوم بإنشاء لوحة تحكم لتطبيق تجارة إلكترونية. تتضمن لوحة المعلومات عدة قوائم: الطلبات الأخيرة، والمنتجات الأكثر مبيعًا، وتعليقات المستخدمين، وما إلى ذلك. تحتاج إلى عرض كل قائمة باستخدام وظيفة .map(). إليك مثال نموذجي:

const orders = [...]; // Array of order data

return (
  
    {orders.map((order, index) => (
      
    ))}
  >
);

الآن، يمكنك رؤية تكرار منطق .map() لكل قائمة، مما يؤدي إلى ازدحام المكون الخاص بك برمز مماثل. هذا هو المكان الذي يمكن أن يكون فيه النمط القابل لإعادة الاستخدام مفيدًا.

الحل: مكون قائمة قابل لإعادة الاستخدام

لتجنب تكرار منطق .map()، يمكننا إنشاء ListComponent قابل لإعادة الاستخدام والذي يلخص منطق التعيين ويسمح لنا بعرض مكونات مختلفة بناءً على البيانات.

function ListComponent({ data, renderItem }) {
  return (
    
      {data.map((item, index) => renderItem(item, index))}
    >
  );
}

الاستخدام:

 (
    
  )} 
/>

في هذا النمط:
renderItem: دالة تحدد كيفية عرض كل عنصر

بتمرير دالة renderItem مختلفة، يمكننا إعادة استخدام ListComponent لأي قائمة. يؤدي هذا إلى مكون نظيف وقابل لإعادة الاستخدام، مما يقلل من منطق .map() المتكرر.

مزيد من المرونة: مكون ذو ترتيب أعلى (HOC)

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

function withListRendering(WrappedComponent) {
  return function ListWrapper({ data, ...props }) {
    return (
      
        {data.map((item, index) => (
          
        ))}
      >
    );
  };
}

الاستخدام:

const EnhancedOrderComponent = withListRendering(OrderComponent);

// Now render the component with any data array

من خلال تغليف OrderComponent مع withListRendering HOC، أضفنا تلقائيًا سلوك عرض القائمة دون تعديل المكون الأصلي. يحافظ هذا النمط على وحدات الكود.

لعشاق الخطاف: خطاف مخصص لعرض القائمة

توفر خطافات التفاعل طريقة وظيفية لتغليف المنطق. إذا كنت تفضل استخدام الخطافات، فإليك مثال لعرض القائمة باستخدام خطاف مخصص.

function useListRenderer(data, renderItem) {
  return data.map((item, index) => renderItem(item, index));
}

الاستخدام:

function OrdersDashboard({ orders }) {
  const orderList = useListRenderer(orders, (order, index) => (
    
  ));

  return {orderList}>;
}

يقوم هذا الأسلوب بنقل منطق .map() إلى الخطاف، مع إبقاء منطق العرض منفصلاً عن بنية المكون. إنها طريقة أخرى للحفاظ على تركيز المكونات والتركيز على العرض التقديمي.

سيناريو العالم الحقيقي: لوحة تحكم التجارة الإلكترونية

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

باستخدام نهج ListComponent، يمكنك تقديم قائمة من الطلبات مثل هذا:

 (
    
  )} 
/>

عندما نحتاج إلى عرض قائمة مختلفة، مثل المنتجات، يمكن إعادة استخدام نفس ListComponent مع وظيفة renderItem مختلفة:

 (
    
  )} 
/>

لا حاجة لإعادة كتابة منطق .map() — ما عليك سوى إعادة استخدام ListComponent مع بيانات ومكونات مختلفة. وهذا يجعل قاعدة التعليمات البرمجية أكثر قابلية للصيانة مع نموها.

الخلاصة: كود نظيف وقابل لإعادة الاستخدام وقابل للتطوير

يعمل نمط ListComponent القابل لإعادة الاستخدام على تبسيط عرض قائمة React عن طريق تجريد منطق .map() المتكرر. سواء كنت تفضل استخدام أسلوب المكون الأساسي، أو HOC، أو الارتباط المخصص، فإن هذا النمط يضمن أن التعليمات البرمجية نظيفة وقابلة لإعادة الاستخدام.

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

ما هي الأنماط الأخرى القابلة لإعادة الاستخدام التي وجدتها مفيدة في React؟ اسمحوا لي أن أعرف في التعليقات! وأخيرا شكرا على القراءة