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

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

ما أهمية إعادة الاستخدام لتوسيع نطاق تطبيقات React

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

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

المفاهيم الأساسية لمكونات القائمة القابلة لإعادة الاستخدام

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

الدعائم والحالة: تسمح لك بتمرير البيانات إلى مكوناتك والتحكم في السلوك الداخلي لمكوناتك، على التوالي.

طرق المصفوفات: تعتبر الطرق مثل .map() و.filter() و.reduce() ضرورية لتحويل المصفوفات في مكونات React.

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

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

مثال 1: مكون قائمة بسيط قابل لإعادة الاستخدام

لنبدأ بإنشاء مكون قائمة بسيط وقابل لإعادة الاستخدام يمكنه قبول مجموعة من العناصر كخاصية وعرضها ديناميكيًا:

import React from 'react';

const SimpleList = ({ items }) => {
  return (
    

{items.map((item, index) => (
• {item}
))}

في هذا المثال، يقبل SimpleList خاصية العناصر، وهي عبارة عن مصفوفة. نستخدم الدالة .map() للتكرار عبر المصفوفة وعرض كل عنصر داخل قائمة غير مرتبة (

). يتم تغليف كل عنصر بعنصر
• . تضمن الدعامة الرئيسية قدرة React على تحديث DOM بكفاءة عندما تتغير القائمة.

  مثال الاستخدام:
  

  import React from 'react';
  import SimpleList from './SimpleList';
  
  const App = () => {
    const fruits = ['Apple', 'Banana', 'Orange', 'Mango'];
  
    return (
      
  
        
  Fruit List
        
    );
  };
  
  export default App;
  

  يعرض هذا المثال قائمة أساسية من الفواكه. المكون مرن بدرجة كافية بحيث يمكنك تمرير أي مجموعة من البيانات إليه.

  تعزيز إمكانية إعادة استخدام مكون القائمة

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

  دعونا نجعل SimpleList الخاصة بنا أكثر قابلية لإعادة الاستخدام من خلال السماح بمنطق العرض المخصص عبر خاصية العرض.

  مثال 2: استخدام دعائم العرض لعرض القائمة المخصصة

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

  const ReusableList = ({ items, renderItem }) => {
    return (
      

  {items.map((item, index) => (
  • {renderItem(item)}
  ))}
  ); };

  في هذه الحالة، يقبل مكون ReusableList خاصية renderItem، وهي دالة تأخذ عنصرًا وتعيد JSX. وهذا يوفر طريقة مرنة للتحكم في كيفية عرض كل عنصر في القائمة.

  مثال الاستخدام:
  

  const App = () => {
    const users = [
      { id: 1, name: 'John Doe', age: 30 },
      { id: 2, name: 'Jane Smith', age: 25 },
    ];
  
    return (
      
  
        
  User List
         (
            
  
              
  {user.name}
              
  Age: {user.age}
            
          )}
        />
      
    );
  };
  

  في هذا المثال، تسمح لنا الخاصية renderItem بتخصيص كيفية عرض كل مستخدم. يمكننا الآن إعادة استخدام نفس مكون القائمة لأي بنية بيانات، وعرضها وفقًا لحالة الاستخدام المحددة.

  مثال 3: جعل مكونات القائمة قابلة للتوسيع باستخدام مكونات ذات ترتيب أعلى

  هناك نمط قوي آخر في React وهو المكون ذو الترتيب الأعلى (HOC). إن HOC هي دالة تأخذ مكونًا وترجع مكونًا جديدًا بوظائف إضافية.

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

  const withLoading = (Component) => {
    return function WithLoadingComponent({ isLoading, ...props }) {
      if (isLoading) return 
  Loading...
  ;
      return ;
    };
  };
  

  هنا، يضيف withLoading HOC سلوك التحميل إلى أي مكون. دعونا نطبقها على قائمتنا القابلة لإعادة الاستخدام:
  

  const EnhancedList = withLoading(ReusableList);
  
  const App = () => {
    const [isLoading, setIsLoading] = React.useState(true);
    const [users, setUsers] = React.useState([]);
  
    React.useEffect(() => {
      setTimeout(() => {
        setUsers([
          { id: 1, name: 'John Doe', age: 30 },
          { id: 2, name: 'Jane Smith', age: 25 },
        ]);
        setIsLoading(false);
      }, 2000);
    }, []);
  
    return (
      
  
        
  User List
         (
            
  
              
  {user.name}
              
  Age: {user.age}
            
          )}
        />
      
    );
  };
  

  في هذا المثال، يلتف withLoading HOC حول ReusableList، مما يضيف إدارة حالة التحميل إليها. يعزز هذا النمط إعادة استخدام التعليمات البرمجية من خلال تحسين المكونات بمنطق إضافي دون تعديل المكون الأصلي.

  مثال 4: قائمة المكونات المتقدمة ذات الخطافات

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

  const usePagination = (items, itemsPerPage) => {
    const [currentPage, setCurrentPage] = React.useState(1);
    const maxPage = Math.ceil(items.length / itemsPerPage);
  
    const currentItems = items.slice(
      (currentPage - 1) * itemsPerPage,
      currentPage * itemsPerPage
    );
  
    const nextPage = () => {
      setCurrentPage((prevPage) => Math.min(prevPage   1, maxPage));
    };
  
    const prevPage = () => {
      setCurrentPage((prevPage) => Math.max(prevPage - 1, 1));
    };
  
    return { currentItems, nextPage, prevPage, currentPage, maxPage };
  };
  

  يقوم خطاف usePagination بتغليف منطق ترقيم الصفحات. يمكننا الآن استخدام هذا الخطاف ضمن مكون قائمتنا.
  

  const PaginatedList = ({ items, renderItem, itemsPerPage }) => {
    const { currentItems, nextPage, prevPage, currentPage, maxPage } = usePagination(
      items,
      itemsPerPage
    );
  
    return (
      
  
        
  
          {currentItems.map((item, index) => (
            
  {renderItem(item)}
          ))}
        
  
          
            Previous
          
          
            Next
          
        
      
    );
  };
  

  مثال الاستخدام:
  

  const App = () => {
    const items = Array.from({ length: 100 }, (_, i) => `Item ${i   1}`);
  
    return (
      
  
        
  Paginated List
        
  {item}
  }
        />
      
    );
  };
  

  يوضح هذا المثال قائمة مرقّمة حيث يمكن للمستخدمين التنقل عبر صفحات العناصر. يعالج الخطاف كل منطق ترقيم الصفحات،

  مما يجعلها قابلة لإعادة الاستخدام عبر مكونات مختلفة.

  خاتمة

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

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

  مراجع

  التفاعل مع الوثائق الرسمية
  
  رد فعل تقديم الدعائم
  
  رد فعل المكونات ذات الترتيب العالي
  
  خطافات التفاعل