اذهب إلى المحتوى
  • 0

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

Adam Ebrahim

السؤال

أريد أن أعرف ما الفرق بين مكون الدالة function component ومكون الصنف Class Component لأني لا أرى أي فرق بينهم حتى الآن بالرغم من أني سمعت في بعض الفيديوهات أن بينهما فرق ولكن لا يقومون بتوضيح هذا الفرق، مع العلم أن إستخدام أي منهما لا يسبب أي مشكلة معي. فهل يمكن توضيح الفرق بينهما ومتى أستخدم كل منهما؟

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 1

يوجد بعذ الإختلافات فعلًا بين الـ 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.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

ال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.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

الفرق اﻷول وهذا قائم في جميع نسخ الـ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 ولكني أعتبرها ملغاة بحكم المجتمع.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...