أنماط React: HOC مقابل Render Props مقابل Hooks (منظور حديث)

تطوّر React كثيرًا عبر السنين، واستُبدلت أنماط كثيرة كانت شائعة ببدائل أبسط وأقوى. في هذا المقال نقارن ثلاثة أنماط مهمة — Higher-Order Components (HOC) وRender Props وHooks — مع التركيز على متى نستخدم كلًّا منها، وأمثلة الكود، والمزايا والعيوب، وأفضل الممارسات الحديثة.

1. Higher-Order Components (HOC)

المكون عالي الرتبة دالة تأخذ مكونًا وتعيد مكونًا جديدًا مُحسّنًا.

function withLogger(Component) {
  return function WrappedComponent(props) {
    console.log("Props:", props);
    return <Component {...props} />;
  };
}

const EnhancedButton = withLogger(Button);

المزايا: مناسب للاهتمامات المشتركة مثل المصادقة والتسجيل؛ ومنطق قابل لإعادة الاستخدام عبر مكونات كثيرة.

العيوب: جحيم الأغلفة (تداخل عميق)، وصعوبة التصحيح، وتعارض الخصائص، وأقل وضوحًا للمبتدئين.

2. Render Props

Render Props نمط يشارك فيه المكوّن حالته أو منطقه عبر دالة تُمرَّر كخاصية. بدل تغليف المكونات كما في HOC، تمرّر دالة تتحكم بما يُعرض.

يستقبل المكوّن دالة ويستخدمها ليقرر ما يعرضه.

لنبنِ متتبعًا للفأرة:

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

  function handleMouseMove(e) {
    setPosition({ x: e.clientX, y: e.clientY });
  }

  return (
    <div style={{ height: "100vh" }} onMouseMove={handleMouseMove}>
      {render(position)}
    </div>
  );
}

function App() {
  return (
    <MouseTracker
      render={({ x, y }) => (
        <div>
          <h2>Mouse Position</h2>
          <p>X: {x}</p>
          <p>Y: {y}</p>
        </div>
      )}
    />
  );
}

كيف يعمل

يحتفظ MouseTracker بالحالة (المنطق).
يتتبع حركة الفأرة.
لا يقرر شكل الواجهة.
بل يستدعي render(position).
يقرر المكوّن الأب كيف تبدو الواجهة.

قبل Hooks، حلّ هذا النمط مشكلة كبيرة: كيف نعيد استخدام المنطق دون تكرار الكود؟ فقد أتاح إعادة استخدام المنطق ومرونة الواجهة وفصل الاهتمامات.

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

العيوب: الدوال داخل JSX تجعل التداخل فوضويًا، وصعب القراءة في التراكيب العميقة، وقد يؤدي إلى تعقيد واجهات معتمدة على الاستدعاءات، وقد حلت Hooks محله في معظم الحالات.

اليوم يظهر Render Props غالبًا في المكتبات (إصدارات React Router القديمة ومكتبات الحركة)، ومكونات جلب البيانات، والأكواد القديمة، وبعض حالات التركيب المتقدمة.

3. Hooks (نهج React الحديث)

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

function useMousePosition() {
  const [position, setPosition] = React.useState({ x: 0, y: 0 });

  React.useEffect(() => {
    const handler = (e) => setPosition({ x: e.clientX, y: e.clientY });
    window.addEventListener("mousemove", handler);
    return () => window.removeEventListener("mousemove", handler);
  }, []);

  return position;
}

function App() {
  const position = useMousePosition();
  return <h1>{position.x}, {position.y}</h1>;
}

لماذا غيّرت Hooks مكتبة React

لا مكونات أغلفة (على عكس HOC)
لا دوال عرض متداخلة (على عكس Render Props)
يصبح المنطق قابلًا للتركيب وإعادة الاستخدام
فصل أفضل بين الواجهة والسلوك

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

القيود: يجب اتباع قواعد Hooks، والإفراط في الخطافات المخصصة قد يجزّئ المنطق، وتصميم التجريد يحتاج انضباطًا، وقد تتعقد الآثار الجانبية إن لم تكن منظمة.

ليست Hooks مجرد تحسين في الصياغة؛ إنها تحول في النموذج الذهني، من الوراثة والأغلفة إلى التركيب الوظيفي للسلوك. لهذا حلت محل معظم استخدامات HOC وRender Props.

متى نستخدم ماذا؟

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

استخدم HOC عند العمل مع أنظمة قديمة أو مكتبات قديمة تتطلبه.

استخدم Render Props عند الحاجة إلى حقن واجهة ديناميكي من المكتبات أو التعامل مع أنماط تركيب أقدم.

الخلاصة

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

الأنماط الأقدم مثل HOC وRender Props ليست بالية — فما زالت موجودة في مكتبات ومعماريات قديمة كثيرة، وفهمها مهم لصيانة الأكواد الحقيقية. المطوّر القوي في React ليس من يعرف Hooks فقط، بل من يفهم لماذا حلت Hooks محل الأنماط السابقة ومتى ما زالت تلك الأنماط منطقية.

في الواجهات المعقدة — لوحات المعلومات وأدوات التصميم وتجارب الويب ثلاثية الأبعاد — توفر Hooks أساسًا قابلًا للتوسع لتنظيم منطق التفاعل والحالة والآثار الجانبية. وإتقانها يتعلق بتعلّم هيكلة السلوك في أنظمة الواجهات الحديثة أكثر من الصياغة.