لوگو کتاب اول بازگشت به فهرست کتاب‌ها

معرفی کامپوننت‌ها و انواع آن‌ها (کلاسی و فانکشنی)

در React، کامپوننت‌ها بلوک‌های سازنده‌ی رابط کاربری هستند که به ما کمک می‌کنند تا کدهای قابل استفاده‌ی مجدد بنویسیم. کامپوننت‌ها به دو نوع اصلی تقسیم می‌شوند:

1. کامپوننت‌های کلاسی (Class Components)

این نوع کامپوننت‌ها قبل از معرفی React Hooks رایج بودند. آن‌ها از کلاس‌های جاوااسکریپت (ES6) استفاده می‌کنند و برای مدیریت state و lifecycle methods مناسب‌اند.

ویژگی‌های کامپوننت‌های کلاسی:

✔ دارای متد render() برای نمایش خروجی هستند.
✔ از State و متدهای چرخه‌ی حیات (Lifecycle Methods) مثل componentDidMount و componentDidUpdate پشتیبانی می‌کنند.
✔ با this کار می‌کنند که ممکن است مدیریت آن دشوار باشد.

✅ مثال کامپوننت کلاسی:

import React, { Component } from "react";
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.

✅ مثال کامپوننت فانکشنی:

import React, { useState } from "react";
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 هستند، زیرا کدنویسی را ساده‌تر، خواناتر و بهینه‌تر می‌کنند.

 

کلید واژه ها : معرفی کامپوننت‌ها-کلاسی-فانکشنی-Introducing components-react

صفحه قبلی مروری بر JSX در React صفحه بعدی پروپرتی‌ها (Props) در React