الفرق بين مكون function و class في React

يوجد بعذ الإختلافات فعلًا بين الـ Functional Component و الـ Class Component وهنا شرح بسيط للفرق بينهما:

• Functional Component:
  • هي عبارة عن دوالة جافاسكريبت عادية، في الغالب نستعمل الدوال السهمية (لأنها أبسط) لكن يمكن إستخدام دوال جافاسكريبت العادية (بإستخدام الكلمة الفتاحية function).
  • تسمى أحيانًا بـ "stateless components" أو "dumb components"، ويمكنها إستقبال بيانات بشكل بسيط (مثل Arguments في دوال جافاسكريبت)، وفي الغالب تكون مسئولة عن عرض أجزاء الـ UI في الموقع.
  • لا يمكن إستخدام دوال Lifecycle Hooks داخلها (مثل componentDidMount). ملاحظة: لم يعد هذا ضروري حيث بدًأ من React 16.8 حيث أصبح بإمكانك إستخدام  useEffect hook للوصول إلى دوال Lifecycle Hooks
  • لا نستخدم دالة render داخل الـ Functional Component بل نقوم بإرجاع المكون مباسرة بإستخدام return.
  • يمكن إستخدام props داخل الـ Functional Component دون مشكلة.
  • يُفضل إستخدامها إن لم تكن تستخدم React state.

    import React from "react";
    
    const Title = props => (
      <div>
        <h1>Hello, {props.name}</h1>
      </div>
    );
    
    export default Title;

     

• Class Components:

  • تستخدم خواص ES6 لعمل صنف من خلال الكلمات المفتاحية Class و extends.

  • تسمى أحيانًا بـ "Smart Components" أو "Stateful Components" 

  • يمكن إستخدام دوال Lifecycle Hooks داخلها (مثل componentDidMount).

  • يمكن إستخدام props داخل الـ Class Component دون مشكلة من خلال this.props

    import React, { Component } from "react";
    
    class Title extends Component {  
      render() {
        return (
          <div>
            <h1>Hello, {this.props.name}</h1>
          </div>
        );
      }
    }
    
    export default Title;

الخلاصة: حاول أن تستخدم الـ Functional Component لعرض أجزاء واجهة المستخدم UI حيث أنها أبسط، وقم بإستخدام الـ Class Component في المكونات الأكثر تعقيدًا والتي تحتاج إلى إستخدام دوال Lifecycle Hooks.

الfunctional component:

1. تعتبر بسيطة و اقل تعقيداً من الclass components.
2. تركز بواجهات المستخدم و لا تركز على سلوك الواجهات.
3. ليس لديها state ولا تستخدم الlifecycle methods.

الclass components:

1. تستخدم الصياغة الخاصة بES6 وكذلك يمكنها استخدام ال lifecycle methods.
2. الclass component ترث من الreact component كما في المثال الاتي:

   import React, { Component } from 'react';
   import './App.css';
   import UserOutput from './UserOutput/UserOutput';
   import UserInput from './UserInput/UserInput';
   
   class App extends Component {
   
     render() {
       return (
         <div className="App">
           <h3>Assignment Output :</h3>
           <ul>
             <li>
               <UserOutput 
               username={this.state.Usernames[0].username}>
               Welcome to React!
               </UserOutput>
               <UserInput 
               nameChanged={this.nameChangedHandler}>
               </UserInput>
             </li>
                         </ul>
         </div>
       );
     }
   }
   
   export default App;

      

3. يتعين عليك استخدام this للوصول الى الدوال والprops التي قمت بتعريفها بداخل الclass component.

الفرق اﻷول وهذا قائم في جميع نسخ الـReact هو شكل الكود: Class Components تعرف ES6 Class وتستخدم inheritance بينما Function Components تستخدم توابع عادية.

قبل نسخة React 16.8 كان هناك فرقان آخران جوهريان:

1. الـFunction component لا تستطيع استخدام state، وقتها لم يكن هناك شيء اسمه useState ﻷنه لم يكن هناك شيء اسمه hooks من اﻷساس.
2. الـClass component تستطيع تعريف توابع Lifecycles مثل componentDidMount وغيرها بينما Function component لم تكن تستطيع ذلك ﻷنه لم يكن هناك useEffect.

ولكن مع نسخة React 16.8 وظهور hooks لم يعد هناك أي فرق بين Class components وfunction components سوى في الشكل والطريقة، أنا شخصياً صرت أستعمل function components دائماً ليس ﻷنها أسرع، ليس ﻷنني أستطيع فعل أشياء لا أستطيع فعلها بالـClass components وإنما فقط ﻷنها أبسط وأجمل أو باﻷحرى ﻷنني أحببتها أكثر ويبدو أن الكثيرين من مبرمجي الـReact يشاطرونني الرأي إذ لم يعد هناك مكتبة React تقريباً لا تستعمل hooks.

صحيح أن فريق الفيسبوك لم يصرح أنه سيلغي Class component ولكني أعتبرها ملغاة بحكم المجتمع.