الاختلاف بين Function Components و Class Components في React وأفضل الأساليب المستخدمة

بتاريخ 3 دقائق مضت قال Issam Bourouail:

١- هل يجب عمل مشاريع ب class components و إستعمال functions components؟

 

1- ليس من الضروري عمل مشاريع باستخدام class components. في React، وتستطيع استخدام كلا النوعين من المكونات (function components و class components) لبناء تطبيقاتك.

ولكن function components أصبحت الأسلوب الأكثر شيوعًا في الوقت الحالي بسبب مزاياها مثل بساطتها وقراءتها واختبارها، بالإضافة إلى استخدام الـ hooks التي تقدمها React.

بتاريخ 3 دقائق مضت قال Issam Bourouail:

2- ماهي وضيفة class components بمعني أين تتجلى قوة إستعمال class components في مشاريع؟

 

2- قوة استخدام class components تكمن في إمكانية استخدام مفهوم الحياة الداخلية (lifecycle) للمكونات.

حيثث تتوفر للـ class components مجموعة من الطرق (methods) المدمجة مثل componentDidMount و componentDidUpdate و componentWillUnmount وغيرها، تسمح لك بالتحكم في سلوك المكون بناءً على حالات معينة في دورة حياته. هذا يمكن أن يكون مفيدًا في حالات استخدام الحالة المحلية للمكونات (local state) أو التفاعل مع APIs الخارجية بطرق تقليدية.

ومع ذلك، في React 16.8 تم إدخال الـ hooks الذي يتيح لك استخدام حالة المكون (state) والحياة الداخلية (lifecycle) في function components أيضًا.

وبفضل الـ hooks مثل useState و useEffect و useContext، أصبح بإمكان function components القيام بمعظم الوظائف التي يمكن القيام بها باستخدام class components بشكل أسهل وأنظف

وبالتالي يعتبر استخدام function components والـ hooks هو الأسلوب الموصى به في الوقت الحالي.

• لا يوجد إجابة صحيحة أو خاطئة بشأن استخدام function components أو class components في مشاريع React. يعتمد الأمر على المتطلبات الخاصة بالمشروع وتفضيلات المطور. ومع ذلك ، يمكن القول بأن function components هي الأسلوب الأكثر استخدامًا حاليًا في React ، نظرًا لبساطتها وقابليتها لإعادة الاستخدام.
• تتميز class components بأنها توفر ميزات متقدمة مثل الحالة المحلية (local state) ودورة حياة العميلة (lifecycle methods) ، كما أنها تستخدم في بعض الحالات عند العمل مع مكتبات الطرف الثالث القائمة على class components. على سبيل المثال ، يمكن استخدامها مع مكتبة Redux لإدارة الحالة المركزية (state management) في التطبيق. ومع ذلك ، في الإصدار الأخير من React ، تم إدخال hooks ، وهي وظائف تمكن المطورين من استخدام الحالة المحلية ودورة حياة العميلة في function components بدون الحاجة لاستخدام class components. لذلك ، يمكن استخدام function components بنجاح في معظم حالات استخدام React.

الحالة المحلية:

تسمح الحالة المحلية بتخزين البيانات داخل العنصر المرئي وتحديثها عند الضرورة. يمكن تحديث الحالة المحلية داخل class components باستخدام الدالة `this.setState()`. وهذا يتيح لنا تحديث الحالة المحلية وإعادة تقديم المكون عند تغيير الحالة.

مثال:

import React, { Component } from "react";

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={this.increment}>Click me</button>
      </div>
    );
  }
}

export default Counter;

دورة حياة العميلة:

تسمح دورة حياة العميلة بتنفيذ التعليمات البرمجية في نقاط مختلفة من دورة حياة المكون ، مثل بعد التحميل (componentDidMount) أو بعد التحديث (componentDidUpdate) أو قبل الإزالة (componentWillUnmount) .

مثال:

import React, { Component } from "react";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { data: null };
  }

  componentDidMount() {
    fetch("https://api.example.com/data")
      .then((response) => response.json())
      .then((data) => this.setState({ data }));
  }

  componentWillUnmount() {
    console.log("Component unmounted");
  }

  render() {
    return <div>{this.state.data ? this.state.data : "Loading..."}</div>;
  }
}

export default App;

 العمل مع مكتبات الطرف الثالث:

يستخدم العديد من المطورين class components عند العمل مع مكتبات الطرف الثالث القائمة على class components مثل Redux و React Router وغيرها. على سبيل المثال ، يمكن استخدام class components مع مكتبة Redux لإدارة الحالة المركزية (state management) في التطبيق.

مثال:

import React, { Component } from "react";
import { connect } from "react-redux";
import { incrementCounter } from "../actions/counterActions";

class Counter extends Component {
  increment = () => {
    this.props.incrementCounter();
  };

  render() {
    return (
      <div>
        <p>You clicked {this.props.count} times</p>
        <button onClick={this.increment}>Click me</button>
      </div>
    );
  }
}

const mapStateToProps = (state) => ({
  count: state.count,
});

export default connect(mapStateToProps, { incrementCounter })(Counter);

في هذا المثال ، يتم استخدام class component مع مكتبة Redux لإدارة الحالة المركزية. يتم تحديث الحالة المركزية باستخدام `this.props.incrementCounter()` عند النقر على الزر. كما يتم استخدام `connect` لتوصيل المكون بحالة Redux.

ولكن كما أخبرك مصطفى فإنه الأسلوب الأفضل وبه تحديث دائماً للأفضل هو ال function components

اضافة لما أشار اليه المدربان فإن ادارة حياة المكون في كل منهما تختلف عن الأخرى ايضا،

ففي function components، يتم استخدام الدالة function لتعريف الـ component واستخدام الـخطافات hooks مثل useState و useEffect لإدارة الحالة state وحياة الـ component.

بينما في class components، يتم استخدام الكلاس class لتعريف الـمكون component وتعريف الـجالو state في داخل الـتابع الباني constructor . بجانب استخدام توابع دورة حياة المكون lifecycle methods مثل componentDidMount و componentWillUnmount لإدارة حياة الـ component.

بشكل عام، يمكن استخدام أيٍ منهما وفقًا للاحتياجات الخاصة بالمشروع. ولكن يتميز الـ function components بكونها أكثر بساطة وسهولة في الكتابة والصيانة وأقل في استهلاك الذاكرة، بينما يمكن استخدام الـ class components للمزيد من القدرة على التحكم بالحياة الداخلية للـ component ولبعض الميزات المتقدمة مثل تعريف الـ refs والـ Error boundaries.