تفکر کامپوننتی (Component Thinking)

تفکر کامپوننتی: چگونه یک رابط کاربری را به کامپوننت تجزیه کنیم

در فصل اول یاد گرفتیم کامپوننت چیست و چگونه با JSX و Props نوشته می‌شود. اما یک سؤال مهم‌تر باقی می‌ماند: وقتی با یک طرح رابط کاربری روبه‌رو می‌شویم، از کجا باید بفهمیم دقیقاً کجا باید آن را به کامپوننت‌های جداگانه تقسیم کنیم؟ به این مهارت، تفکر کامپوننتی (Component Thinking) گفته می‌شود.

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

تقسیم نادرست یک رابط کاربری به کامپوننت‌ها می‌تواند مشکلاتی ایجاد کند: اگر کامپوننت‌ها بیش از حد بزرگ باشند، نگهداری و درک آن‌ها سخت می‌شود؛ اگر بیش از حد کوچک و پراکنده باشند، هماهنگ کردن آن‌ها با یکدیگر پیچیده می‌شود. هدف تفکر کامپوننتی، پیدا کردن مرزهای منطقی است، نه صرفاً کوچک یا بزرگ کردن کامپوننت‌ها.

روش عملی: شروع از طرح رابط کاربری

یک روش رایج برای شناسایی مرز کامپوننت‌ها، نگاه کردن به طرح بصری صفحه و پیدا کردن بخش‌هایی است که هرکدام یک هدف مشخص دارند. برای مثال، یک صفحه لیست محصولات را در نظر بگیرید:

<!-- ساختار بصری صفحه -->
<!-- ۱. نوار جست‌وجو -->
<!-- ۲. لیست محصولات -->
<!--    ۲.۱ هر آیتم: تصویر، نام، قیمت، دکمه افزودن به سبد -->
<!-- ۳. صفحه‌بندی (Pagination) -->

از روی همین ساختار می‌توان کامپوننت‌های زیر را شناسایی کرد:

ProductPage
 ├─ SearchBar
 ├─ ProductList
 │   └─ ProductCard
 └─ Pagination

معیار اصلی: مسئولیت واحد

معیار اصلی برای تشخیص مرز یک کامپوننت، این است که آن کامپوننت باید یک مسئولیت مشخص و قابل‌توضیح داشته باشد. اگر بتوان کاری که یک کامپوننت انجام می‌دهد را در یک جمله ساده توضیح داد (مثلاً «این کامپوننت یک کارت محصول را نمایش می‌دهد»)، معمولاً مرز مناسبی انتخاب شده است. اگر توضیح کار یک کامپوننت نیاز به چند جمله و «و» پشت سر هم داشته باشد (مثلاً «این کامپوننت هم فرم را نمایش می‌دهد، هم لیست را، و هم وضعیت پرداخت را مدیریت می‌کند»)، احتمالاً باید آن را به چند کامپوننت کوچک‌تر تقسیم کرد.

داده هم می‌تواند راهنما باشد

یک راه دیگر برای شناسایی کامپوننت‌ها، نگاه کردن به ساختار داده‌ای است که قرار است نمایش داده شود. اگر داده یک آرایه از آیتم‌های مشابه است (مثل لیست محصولات)، معمولاً به یک کامپوننت برای کل لیست و یک کامپوننت جداگانه برای هر آیتم نیاز داریم. این هماهنگی بین ساختار داده و ساختار کامپوننت‌ها، درک و نگهداری کد را ساده‌تر می‌کند.

از تقسیم‌بندی بیش‌ازحد زودهنگام پرهیز کنید

تفکر کامپوننتی به این معنا نیست که هر عنصر کوچک، مانند یک آیکون یا یک برچسب متنی، حتماً باید کامپوننت جداگانه‌ای باشد. تقسیم بیش‌ازحد زودهنگام می‌تواند باعث شود مجبور باشیم Props زیادی بین لایه‌های مختلف کامپوننت رد و بدل کنیم، بدون این‌که مزیت واضحی به دست بیاوریم. معمولاً بهتر است ابتدا کامپوننت‌ها را کمی بزرگ‌تر نگه دارید و تنها زمانی آن‌ها را تقسیم کنید که یک بخش مشخص، دلیل واقعی برای استقلال پیدا کند؛ مثلاً وقتی قرار است در جای دیگری از برنامه هم استفاده شود.

مثال قابل اجرا

تجزیه یک صفحه به چند کامپوننت

function ProductCard({ name, price }) {
  return (
    <div>
      <h4>{name}</h4>
      <p>{price} تومان</p>
    </div>
  );
}

function ProductList({ products }) {
  return (
    <div>
      {products.map((product) => (
        <ProductCard key={product.id} name={product.name} price={product.price} />
      ))}
    </div>
  );
}

function App() {
  const products = [
    { id: "p1", name: "کیبورد", price: 850000 },
    { id: "p2", name: "ماوس", price: 320000 },
  ];

  return <ProductList products={products} />;
}

برای دیدن پیش‌نمایش کامپوننت، روی Run بزنید.

جمع‌بندی

تفکر کامپوننتی یعنی توانایی نگاه کردن به یک طرح رابط کاربری یا یک ساختار داده و تشخیص این‌که کجا باید مرز کامپوننت‌ها کشیده شود. معیار اصلی این تصمیم، مسئولیت واحد هر کامپوننت است، نه صرفاً اندازه ظاهری آن. در درس بعدی به سراغ ترکیب کامپوننت‌ها با یکدیگر می‌رویم.