شرح React Functional vs Class Component مع مثال Counter خطوة بخطوة
في عالم تطوير React، تُعد المكونات (Components) من أهم المفاهيم الأساسية التي يجب على كل مطور فهمها جيدًا. ومن بين أكثر المواضيع التي تثير تساؤلات المبتدئين هو الفرق بين React Functional vs Class Component.
في هذا المقال سنقوم بشرح الفرق بين الطريقتين من خلال مثال عملي بسيط وهو تطبيق عداد (Counter)، حيث سنقوم بتنفيذه باستخدام Functional Component ثم باستخدام Class Component، مع توضيح كيفية إدارة البيانات والتفاعل مع المستخدم في كل منهما.
الهدف من هذا الشرح هو فهم طريقة عمل React بشكل أعمق، ومعرفة متى تستخدم كل نوع من المكونات.
ما هو Functional Component في React؟
يتميز هذا الأسلوب بأنه:
– بسيط وسهل القراءة – يعتمد على Hooks مثل useState – أقل تعقيدًا من Class Component – هو الأسلوب الموصى به حاليًا في React
ما هو Class Component في React؟
يتميز بأنه:
– يعتمد على this.state لإدارة البيانات – يستخدم setState لتحديث الحالة – يحتوي على lifecycle methods – أكثر تعقيدًا في الكتابة
الفرق بين React Functional vs Class Component
Functional Component
– يعتمد على Hooks – كود أبسط – أسهل في الفهم – لا يحتاج this
Class Component
– يعتمد على this.state – يحتاج bind للدوال – أطول في الكتابة – أسلوب قديم
في المشاريع الحديثة، يتم استخدام Functional Components بشكل شبه كامل.
شرح Counter باستخدام Functional Component
import { useState } from "react";
ثم إنشاء المكون:
function CounterFc() {
const [count, setCount] = useState(0);
const increment = () => {
setCount(count + 1);
};
const decrement = () => {
setCount(count === 0 ? 0 : count - 1);
};
return (
<div>
<h3>Counter: {count}</h3>
<button onClick={increment}>
Increment
</button>
<button style={{ marginLeft: '10px' }} onClick={decrement}>
Decrement
</button>
</div>
);
}
export default CounterFc;
شرح الكود
useState
تُستخدم لإنشاء حالة داخل المكون.
count → القيمة الحالية setCount → دالة التحديث
increment
تزيد العداد بمقدار 1.
decrement
تنقص العداد ولكن لا تسمح بالقيم السالبة.
JSX
يتم عرض العداد مع أزرار التحكم.
شرح Counter باستخدام Class Component
import React from "react";
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
this.increment = this.increment.bind(this);
this.decrement = this.decrement.bind(this);
}
increment = () => {
this.setState({ count: this.state.count + 1 });
};
decrement = () => {
this.setState({
count: this.state.count === 0 ? 0 : this.state.count - 1
});
};
render() {
return (
<div>
<h3>Counter: {this.state.count}</h3>
<button onClick={this.increment}>
Increment
</button>
<button onClick={this.decrement}>
Decrement
</button>
</div>
);
}
}
export default Counter;
شرح الكود في Class Component
constructor
يتم فيه تعريف الحالة الابتدائية.
this.state
تحتوي على البيانات داخل المكون.
setState
تُستخدم لتحديث البيانات.
bind
يُستخدم لربط this داخل الدوال.
render
تعيد JSX الذي سيتم عرضه.
متى تستخدم Functional Component؟
– المشاريع الحديثة – تطبيقات React الجديدة – عند استخدام Hooks – عندما تريد كود بسيط وسريع
متى تحتاج Class Component؟
– المشاريع القديمة – عند قراءة كود قديم – فهم lifecycle القديم
نصائح مهمة للمطورين
– استخدم Functional Components دائمًا في المشاريع الجديدة – تعلم Class Components لفهم React بشكل أعمق – لا تستخدم bind إذا كنت تستخدم arrow functions – استخدم Hooks لتنظيم الكود
الخلاصة
من خلال مثال Counter، رأينا كيف يمكن تنفيذ نفس الفكرة بطريقتين مختلفتين، وفهمنا كيف يتم إدارة الحالة والتفاعل مع المستخدم في كل منهما.
إذا كنت في بداية تعلم React، ركّز على Functional Components، لأنها الأساس في التطوير الحديث.
لمزيد من المقالات : تحسين تجربة الصوت في تطبيقك: دمج Just Audio و Just Audio Background
