در React، کامپوننتها بلوکهای سازندهی رابط کاربری هستند که به ما کمک میکنند تا کدهای قابل استفادهی مجدد بنویسیم. کامپوننتها به دو نوع اصلی تقسیم میشوند:
1. کامپوننتهای کلاسی (Class Components)
این نوع کامپوننتها قبل از معرفی React Hooks رایج بودند. آنها از کلاسهای جاوااسکریپت (ES6) استفاده میکنند و برای مدیریت state و lifecycle methods مناسباند.
ویژگیهای کامپوننتهای کلاسی:
✔ دارای متد render()
برای نمایش خروجی هستند.
✔ از State و متدهای چرخهی حیات (Lifecycle Methods) مثل componentDidMount
و componentDidUpdate
پشتیبانی میکنند.
✔ با this کار میکنند که ممکن است مدیریت آن دشوار باشد.
✅ مثال کامپوننت کلاسی:
class Welcome extends Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
increment = () => {
this.setState({ count: this.state.count + 1 });
};
render() {
return (
<div>
<h1>سلام، {this.props.name}!</h1>
<p>تعداد: {this.state.count}</p>
<button onClick={this.increment}>افزایش</button>
</div>
);
}
}
export default Welcome;
2. کامپوننتهای فانکشنی (Function Components)
این کامپوننتها از یک تابع ساده تشکیل شدهاند و برای نمایش UI استفاده میشوند. تا قبل از معرفی Hooks، فقط برای کامپوننتهای بدون State کاربرد داشتند، اما اکنون با استفاده از Hooks میتوان از State و Lifecycle Methods در آنها بهره برد.
✨ ویژگیهای کامپوننتهای فانکشنی:
✔ خوانایی و سادگی بیشتر نسبت به کامپوننتهای کلاسی.
✔ نیازی به this
ندارند.
✔ عملکرد بهتر و بهینهتر، زیرا سربار (Overhead) کمتری دارند.
✔ امکان استفاده از Hooks مثل useState
و useEffect
.
✅ مثال کامپوننت فانکشنی:
const Welcome = ({ name }) => {
const [count, setCount] = useState(0);
return (
<div>
<h1>سلام، {name}!</h1>
<p>تعداد: {count}</p>
<button onClick={() => setCount(count + 1)}>افزایش</button>
</div>
);
};
export default Welcome;
مقایسهی کلی کامپوننتهای کلاسی و فانکشنی
ویژگی | کامپوننت کلاسی | کامپوننت فانکشنی |
---|---|---|
استفاده از State | ✅ دارد | ✅ دارد (با Hooks) |
استفاده از Lifecycle Methods | ✅ دارد | ✅ دارد (با Hooks مثل useEffect ) |
کدنویسی | پیچیدهتر، نیاز به this |
سادهتر و خواناتر |
عملکرد | کمی کندتر | بهینهتر |
قابلیت استفادهی مجدد | دارد | دارد |
کدام نوع کامپوننت را انتخاب کنیم؟
🔹 اگر از React 16.8 به بعد استفاده میکنید، پیشنهاد میشود کامپوننتهای فانکشنی با Hooks را به کار ببرید.
🔹 اگر در پروژهای قدیمی کار میکنید که از کلاسها استفاده میکند، ممکن است همچنان با کامپوننتهای کلاسی روبهرو شوید.
✅ امروزه کامپوننتهای فانکشنی با Hooks استاندارد اصلی React هستند، زیرا کدنویسی را سادهتر، خواناتر و بهینهتر میکنند.
