التعامل مع الأنماط المتقدمة في React (Higher-Order Components)

الدرس الثاني والعشرون: التعامل مع الأنماط المتقدمة في React (Higher-Order Components)

في هذا الدرس، سنتعرف على مفهوم Higher-Order Components (HOC) في React، وهو نمط متقدم يتيح لك إضافة وظائف جديدة إلى المكونات بطريقة مرنة وقابلة لإعادة الاستخدام. سنغطي كيفية استخدام HOC لتوسيع قدرات المكونات دون تعديل الكود الأساسي للمكون.

1. ما هو Higher-Order Component (HOC)؟

Higher-Order Component (HOC) هو دالة تقبل مكونًا كوسيط وتعيد مكونًا جديدًا يقوم بتعديل أو إضافة سلوكيات إضافية إلى المكون الأصلي. يمكن استخدام HOCs لإضافة وظائف مثل التوثيق (Authentication)، التوجيه (Routing)، أو حتى إضافة التحكم في الحالة إلى المكونات.

HOC هو نمط تصميم (Design Pattern) في React يتم استخدامه بشكل أساسي لإعادة استخدام المنطق المشترك بين المكونات.

كيف يعمل HOC؟

• يأخذ HOC مكونًا كوسيط.
• يُعيد HOC مكونًا جديدًا (معدلًا).
• هذا المكون المعدل يمكنه أن يحتوي على وظائف إضافية أو تعديل سلوك المكون الأصلي.

2. كيفية استخدام HOC لإضافة وظائف إلى المكونات

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

التطبيق الأساسي للـ HOC:

import React from 'react';

// مكون بسيط لعرض النص
function MyComponent({ name }) {
  return <div>Hello, {name}!</div>;
}

// Higher-Order Component لإضافة سلوك جديد
function withGreeting(WrappedComponent) {
  return function (props) {
    return (
      <div>
        <h1>Welcome to my app!</h1>
        <WrappedComponent {...props} />
      </div>
    );
  };
}

// استخدام HOC مع المكون الأساسي
const MyComponentWithGreeting = withGreeting(MyComponent);

// استخدام المكون المعدل
function App() {
  return <MyComponentWithGreeting name="John" />;
}

export default App;

الشرح:

• MyComponent هو مكون بسيط يعرض اسمًا.
• withGreeting هو Higher-Order Component يأخذ MyComponent ويضيف له سلوكًا إضافيًا (عرض عنوان ترحيب).
• في النهاية، MyComponentWithGreeting هو مكون جديد يحتوي على السلوك الإضافي الذي أضافه withGreeting.

3. أمثلة عملية على HOCs مثل withRouter و withAuth

مثال 1: withRouter HOC

في React، يتيح لك withRouter إضافة معلومات التوجيه (مثل المسار الحالي، الدالة history، والـ match والـ location) إلى المكونات التي تحتاجها. يستخدم هذا النمط في تطبيقات التوجيه مثل React Router.

مثال:

import React from 'react';
import { withRouter } from 'react-router-dom';

// مكون يعرض عنوان URL الحالي
function CurrentPage({ location }) {
  return <div>Current URL: {location.pathname}</div>;
}

// استخدام withRouter لتضمين التوجيه
export default withRouter(CurrentPage);

الشرح:

• withRouter هو HOC الذي يضيف خصائص التوجيه (مثل location) إلى المكون CurrentPage، مما يسمح له بعرض الـ URL الحالي.

مثال 2: withAuth HOC

نستخدم HOC مثل withAuth لإضافة وظيفة التوثيق إلى المكونات، مثل التحقق مما إذا كان المستخدم مسجلاً الدخول قبل عرض المكون.

مثال:

import React from 'react';

// مكون محمي يجب التحقق من التوثيق قبل عرضه
function ProtectedPage({ isAuthenticated }) {
  return isAuthenticated ? (
    <div>Welcome to the protected page!</div>
  ) : (
    <div>You need to log in to view this page.</div>
  );
}

// HOC لإضافة التوثيق
function withAuth(WrappedComponent) {
  return function (props) {
    const isAuthenticated = false; // افترض أن المستخدم غير مسجل دخول
    return <WrappedComponent {...props} isAuthenticated={isAuthenticated} />;
  };
}

// استخدام HOC مع المكون
export default withAuth(ProtectedPage);

الشرح:

• ProtectedPage هو مكون يعرض محتوى محمي بناءً على حالة التوثيق.
• withAuth هو HOC يضيف منطق التوثيق إلى ProtectedPage. في هذا المثال، إذا لم يكن المستخدم مسجلاً الدخول، يتم عرض رسالة توضح أنه يحتاج إلى تسجيل الدخول.

4. مزايا استخدام HOC

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

5. متى يجب استخدام HOC؟

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

6. الملخص

Higher-Order Components (HOCs) هي طريقة قوية ومرنة لإضافة وظائف مشتركة إلى مكونات React. من خلال استخدام HOC، يمكنك إعادة استخدام المنطق عبر مكونات متعددة وتوسيع وظائفها دون تعديل الكود الأساسي. سواء كنت تستخدم withRouter للتعامل مع التوجيه أو withAuth للتحقق من التوثيق، فإن HOCs تعد طريقة ممتازة لتطبيق منطق مشترك في التطبيقات الكبيرة.