کامپوننت در React چیست؟ آموزش انواع Functional و Class Components

کامپوننت‌های React یا همان اجزای سازنده (Building Blocks)، قلب و روح کتابخانه ری‌اکت هستند. در واقع هر برنامه React از مجموعه‌ای از کامپوننت‌ها ساخته می‌شود که هر کدام مسئولیت نمایش یک بخش خاص از رابط کاربری (UI) را بر عهده دارند. کامپوننت‌ها به شما امکان می‌دهند تا کد خود را به قطعات کوچک، مستقل و قابل مدیریت تقسیم کنید.

کامپوننت چیست و چه مزایایی دارد؟

یک کامپوننت در React، در واقع یک تابع (Function) یا کلاس (Class) جاوااسکریپت است که یک بخش از خروجی HTML (رابط کاربری) را بازمی‌گرداند. کامپوننت‌ها می‌توانند داده‌هایی به نام Props (مخفف Properties) را از والد خود دریافت کنند و وضعیت داخلی خود را با State مدیریت کنند.

مزایای استفاده از کامپوننت‌ها:

• قابلیت استفاده مجدد (Reusability): یک کامپوننت را یک بار بنویسید و در هر جای برنامه خود بارها استفاده کنید. این کار باعث کاهش چشمگیر کدنویسی تکراری می‌شود.
• تفکیک مسئولیت (Separation of Concerns): هر کامپوننت فقط یک کار مشخص را انجام می‌دهد. این ساختار باعث می‌شود که کد شما تمیزتر، خواناتر و قابل نگهداری‌تر باشد.
• اشکال‌زدایی آسان (Easy Debugging): زمانی که خطایی رخ می‌دهد، به راحتی می‌توانید کامپوننت مشکل‌دار را شناسایی و آن را تعمیر کنید، بدون اینکه بقیه برنامه تحت تأثیر قرار گیرد.
• تست‌پذیری بالا (Testability): کامپوننت‌های کوچک و مستقل به راحتی قابل تست (Unit Testing) هستند.

انواع کامپوننت‌ها در React

در ری‌اکت دو رویکرد اصلی برای تعریف کامپوننت وجود دارد:

۱. کامپوننت تابعی (Functional Component)

کامپوننت‌های تابعی، ساده‌ترین و رایج‌ترین روش نوشتن کامپوننت در React مدرن هستند. این نوع کامپوننت‌ها در واقع یک تابع جاوااسکریپت هستند که یک المان React (UI) را بازمی‌گردانند.

function Greeting(props) {
  return <h1>سلام {props.name}!</h1>;
}

مزایای کامپوننت تابعی:

• سادگی و خوانایی بالا
• کدنویسی کمتر (Boilerplate کمتر نسبت به Class)
• استفاده آسان از Hooks (مانند useState، useEffect)
• کارایی و سرعت بهتر در اجرا
• تست‌پذیری آسان‌تر

تبدیل به کامپوننت پیکانی (Arrow Function):

const Greeting = (props) => <h1>سلام {props.name}!</h1>;

۲. کامپوننت کلاسی (Class Component)

کامپوننت‌های کلاسی، روش قدیمی‌تر نوشتن کامپوننت در React هستند که از کلاس‌های ES6 و ارث‌بری از React.Component استفاده می‌کنند.

class Greeting extends React.Component {
  render() {
    return <h1>سلام {this.props.name}!</h1>;
  }
}

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

• نیاز به متد render() برای بازگرداندن UI
• دسترسی به this.state و this.props
• استفاده از متدهای چرخه حیات (Lifecycle Methods) مانند componentDidMount
• کدنویسی بیشتر نسبت به Functional Components

مقایسه کامپوننت Functional و Class

مثال عملی از یک کامپوننت کامل

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>شمارش: {count}</p>
      <button onClick={() => setCount(count + 1)}>افزایش</button>
    </div>
  );
};

export default Counter;

نکات طلایی برای نوشتن کامپوننت‌های بهتر

• نام‌گذاری با حرف بزرگ (PascalCase): مانند Header، UserProfile.
• هر کامپوننت فقط یک کار را انجام دهد (Single Responsibility).
• از PropTypes یا TypeScript برای نوع‌دهی Props استفاده کنید.
• کامپوننت‌ها را در فایل‌های جداگانه نگهداری کنید.
• از Hooks برای مدیریت State و Side Effects استفاده کنید.

جمع‌بندی

کامپوننت‌های React پایه و اساس هر برنامه ری‌اکتی هستند. با درک صحیح از این مفهوم، می‌توانید برنامه‌های ماژولار، مقیاس‌پذیر و قابل نگهداری بسازید. امروزه کامپوننت‌های تابعی (Functional Components) به همراه Hooks به عنوان استاندارد اصلی توسعه ری‌اکت شناخته می‌شوند و برای شروع یادگیری ری‌اکت، تسلط بر این نوع کامپوننت‌ها ضروری است.