Functional مقابل Class-Components في React

في هذه المقالة أريد أن أريكم الاختلافات بين functional و  class -component في React ومتى يجب أن تختار أيا منها.

ولكن اسمحوا لي أولاً أن أقدم لكم مقدمة موجزة عن عناصر React من الوثائق:

أبسط طريقة لتعريف مركب في React هي عن طريق كتابة دالة في  JavaScript:

هي مجرد دالة تقبل الخصائص props وتُرجع عنصر React، لكن أيضاً يمكنك استخدام تركيب ES6 class لكتابة المركبات.

كلا النوعين متساوين وسوف يعطونك نفس النتيجة. والآن ربما تسأل نفسك ” متى نستخدم الدالة (function)، ومتى نستخدم الـcalss؟”

الاختلاف بين functional و class-Components

التركيب

الفرق الأكثر وضوحاً هو التركيب. Functional component هو مجرد دالة JavaScript عادية التي تقبل الخصائص props كمدخل وترجع عنصر React.

يتطلب مركب الـclass أن تمتد من React.Component وأن تقوم بإنشاء دالة تجسيد (render) تُرجع عنصر React. وهذا يتطلب المزيد من البرامج، ولكنه سيمنحك أيضا بعض الفوائد التي ستشاهدها لاحقاً.

إذا ألقيت نظرة على كود Babel المترجم سترى أيضاً بعض الاختلافات الرئيسية:

الحالة

تم تعديله في: (29.03.2019): هذا تغيّر في تحديث  React 16.8 Hooks.

يمكنك الآن استخدام مشبك useState لاستخدام الحالة (state) في الـ functional components  الخاصة بك.

لأن الـ functional component هو مجرد دالة JavaScript عادية، لا يمكنك إستخدام SetState() في مكوناتك. هذا هو السبب الذي يجعل تسميتهم أيضاً بالمركبات الوظيفية (functional) عديمة الحالة (stateless). لذا في كل مرة ترى فيها عنصراً وظيفياً (functional) يمكنك أن تتأكد من أن هذا المركب المحدد ليس له حالة خاصة به.

إذا كنت بحاجة إلى الحالة (state) في المركب فإما أن تقوم بإنشاء class component  أو أن ترفع الحالة إلى المركب الأب (parent component) وتمريره أسفل الـ functional class من خلال الخصائص (prpos).

دورة حياة المشبك (Hook)

تم تعديله في: (29.03.2019): هذا تغيّر في تحديث  React 16.8 Hooks.

يمكنك الآن استخدام مشبك useEffect لاستخدام دورة حياة الأحداث (events) في الـ functional components الخاصة بك.

وهناك ميزة أخرى لا يمكنك استخدامها في الـ functional components وهي دورة حياة المشابك (hooks). والسبب هو نفسه بالنسبة للحالة (state)، فجميع أدوات دورة حياة المشبك (hook) تأتي من React.Component والتي تستدعي منها في الـ class component.

لذا إذا كنت بحاجة إلى أدوات دورة حياة المشابك (hooks)، فربما عليك استخدام class component.

إذاً لماذا يجب أن أستخدم functional components؟

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

1. Functional components أسهل بكثير في القراءة والاختبار لأنها دوال JavaScript عادية بدون حالات (states) أو مشابك دورة الحياة (lifecycle-hooks).
2. سوف تكتب كود أقل.
3. إنها تساعدك على استخدام فعال. سيكون من السهل فصل الحاوية (container) و المركيات الأولية لأنك حين تستخدم setState() تحتاج للتفكير أكثر في حالة (state)  المركب وإمكانية الوصول إليه.
4. ذكر فريق React أنه قد يكون هناك تحسين في الأداء للـ functional component  في إصدارات Reactالمستقبلية.

الخاتمة 

إذاً للإجابة على سؤالنا السابق، يجب أن تستخدم functional components إذا كنت تكتب مركب عرض (presentational component) والذي ليس لديه حالة (state) أو يحتاج للوصول إلى مشبك دورة الحياة ( lifecycle hook). غير ذلك  يمكنك الالتزام بـclass components أو إلقاء نظرة على إعادة تكوين المكتبة مما يسمح لك بكتابة الـ functional component وتحسينها باستخدام الحالة (state) أو باستخدام  مشابك دورة الحياة ( lifecycle hooks) عن طريق HOCs! 

قراءات أخرى إذا كنت تريد معرفة المزيد عن فوائد وقيمة  functional components سو أنصحك بقراءة المقالات التي كتبها Cory House!