إذا كنت في عالم React لفترة من الوقت، فمن المحتمل أنك سمعت عبارة "إنها مجرد JavaScript" يتم طرحها. على الرغم من أن هذا صحيح، إلا أنه لا يعني أننا لا نستطيع الاستفادة من بعض الأنماط المجربة والحقيقية لجعل تطبيقات React الخاصة بنا أكثر قابلية للصيانة وإعادة الاستخدام وممتعة تمامًا للعمل معها. دعنا نتعمق في بعض أنماط التصميم الأساسية التي يمكن أن تنقل مكونات React الخاصة بك من "meh" إلى "marvel"!

لماذا أنماط التصميم مهمة في رد الفعل

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

1. اجعل التعليمات البرمجية الخاصة بك أكثر قابلية للقراءة والصيانة
2. تعزيز إمكانية إعادة الاستخدام عبر التطبيق الخاص بك
3. حل المشكلات المعقدة بحلول أنيقة
4. تساعدك على توصيل الأفكار مع المطورين الآخرين بشكل أكثر فعالية

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

1. نمط تكوين المكون

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

// Instead of this:
const Button = ({ label, icon, onClick }) => (
  
    {icon && }
    {label}
  
);

// Consider this:
const Button = ({ children, onClick }) => (
  {children}
);

const IconButton = ({ icon, label }) => (
  
    
    {label}
  
);

لماذا هو رائع:

• مكونات أكثر مرونة وقابلة لإعادة الاستخدام
• أسهل في التخصيص والتوسيع
• يتبع مبدأ المسؤولية الفردية

نصيحة احترافية: فكر في مكوناتك على أنها مكعبات LEGO. كلما كانت أكثر تركيبًا وقابلية للتركيب، زادت روعة الهياكل التي يمكنك بنائها!

2. نمط الحاوية/العرض التقديمي

يفصل هذا النمط منطق المكون الخاص بك عن العرض التقديمي، مما يسهل التفكير والاختبار.

// Container Component
const UserListContainer = () => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetchUsers().then(setUsers);
  }, []);

  return ;
};

// Presentational Component
const UserList = ({ users }) => (
  

{users.map(user => (
• {user.name}
))}

لماذا يهتز:

• الفصل الواضح بين الاهتمامات
• أسهل في الاختبار والصيانة
• يعزز إمكانية إعادة استخدام مكون العرض التقديمي

تذكر: الحاويات تشبه طاقم المسرح الموجود خلف الكواليس، حيث يتعاملون مع جميع الأعمال التي تتم خلف الكواليس، في حين أن مكونات العرض التقديمي هم الممثلون، الذين يركزون فقط على المظهر الجيد للجمهور.

3. نمط المكونات ذات الترتيب الأعلى (HOC).

الوظائف ذات الترتيب الأعلى هي وظائف تأخذ مكونًا وتعيد مكونًا جديدًا مع بعض الوظائف المضافة. إنها بمثابة عمليات تعزيز لمكوناتك!

const withLoader = (WrappedComponent) => {
  return ({ isLoading, ...props }) => {
    if (isLoading) {
      return ;
    }
    return ;
  };
};

const EnhancedUserList = withLoader(UserList);

لماذا هو رائع:

• يسمح بإعادة استخدام التعليمات البرمجية عبر مكونات مختلفة
• يحافظ على نظافة مكوناتك وتركيزها
• يمكن تأليفه لتحسينات متعددة

كلمة تحذير: على الرغم من أن المكونات ذات الترتيب الأعلى قوية، إلا أنها يمكن أن تؤدي إلى "جحيم الغلاف" إذا تم الإفراط في استخدامها. استخدمها بحكمة!

4. نمط الدعائم التقديمية

يتضمن هذا النمط تمرير دالة كدعم إلى مكون، مما يمنحك المزيد من التحكم في ما يتم تقديمه.

const MouseTracker = ({ render }) => {
  const [position, setPosition] = useState({ x: 0, y: 0 });

  const handleMouseMove = (event) => {
    setPosition({ x: event.clientX, y: event.clientY });
  };

  return (
    

      {render(position)}
    
  );
};

// Usage
 (
    
The mouse is at ({x}, {y})
  )}
/>

لماذا هو أنيق:

• مرونة للغاية وقابلة لإعادة الاستخدام
• يتجنب المشكلات المتعلقة بالمحتويات ذات الترتيب الأعلى مثل تضارب أسماء العناصر
• يسمح بالعرض الديناميكي بناءً على الوظيفة المتوفرة

حقيقة طريفة: يتميز نمط عناصر العرض بالمرونة الشديدة، ويمكنه أيضًا تنفيذ معظم الأنماط الأخرى التي ناقشناها!

5. نمط الخطاف المخصص

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

const useWindowSize = () => {
  const [size, setSize] = useState({ width: 0, height: 0 });

  useEffect(() => {
    const handleResize = () => {
      setSize({ width: window.innerWidth, height: window.innerHeight });
    };

    window.addEventListener('resize', handleResize);
    handleResize(); // Set initial size

    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return size;
};

// Usage
const MyComponent = () => {
  const { width, height } = useWindowSize();
  return 
Window size: {width} x {height}
;
};

لماذا هو مذهل:

• يسمح بالمشاركة السهلة لمنطق الحالة بين المكونات
• يحافظ على نظافة مكوناتك وتركيزها
• يمكن أن يحل محل العديد من استخدامات HOCs وتقديم الدعائم

نصيحة احترافية: إذا وجدت نفسك تكرر منطقًا مشابهًا في مكونات متعددة، فقد يكون الوقت قد حان لاستخراجه في رابط مخصص!

الخلاصة: قم بتنشيط تطبيقات React الخاصة بك

تشبه أنماط التصميم في React وجود حزام أدوات مليء بالأدوات الذكية - فهي تمنحك الأداة المناسبة للمهمة، بغض النظر عن التحديات التي يواجهها تطبيقك. يتذكر:

1. استخدام تكوين المكونات لواجهات مستخدم معيارية ومرنة
2. الاستفادة من الحاوية/العرض التقديمي للفصل الواضح بين الاهتمامات
3. توظيف العناصر ذات الترتيب الأعلى للتعامل مع الاهتمامات الشاملة
4. استخدم دعائم العرض لتحقيق المرونة القصوى
5. إنشاء خطافات مخصصة لمشاركة منطق الحالة

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

تعليمات سعيدة!