react-applications-ریکت-کاربردهادوره رایگان-الگوریتم اول-free-آموزش کامل

لطفا صبر کنید...

در 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 هستند، زیرا کدنویسی را ساده‌تر، خواناتر و بهینه‌تر می‌کنند.