کامپوننت‌های قابل استفاده مجدد (Reusable Components)

ساخت کامپوننت‌های قابل استفاده مجدد

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

مشکل: کامپوننت‌های بیش‌ازحد اختصاصی

فرض کنید کامپوننتی برای نمایش یک دکمه ثبت‌نام نوشته‌ایم:

function SignupButton() {
  return <button className="btn-primary">ثبت‌نام کنید</button>;
}

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

راه‌حل: پارامتری کردن با Props

برای قابل استفاده مجدد کردن این کامپوننت، بخش‌های متغیر آن را با Props جایگزین می‌کنیم:

function Button({ label, variant = "primary" }) {
  return <button className={`btn-${variant}`}>{label}</button>;
}

حالا می‌توان همین یک کامپوننت را برای موقعیت‌های مختلف استفاده کرد:

<Button label="ثبت‌نام کنید" />
<Button label="حذف" variant="danger" />
<Button label="ادامه" variant="secondary" />

در این مثال از یک مقدار پیش‌فرض (variant = "primary") هم استفاده شده است؛ یعنی اگر کسی این Prop را ارسال نکند، مقدار "primary" به‌طور خودکار استفاده می‌شود.

تعادل بین انعطاف و پیچیدگی

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

جداسازی منطق نمایشی از داده خاص

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

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

یک کامپوننت دکمه قابل استفاده مجدد

function Button({ label, variant = "primary" }) {
  return <button className={`btn-${variant}`}>{label}</button>;
}

function App() {
  return (
    <div>
      <Button label="ثبت‌نام" />
      <Button label="حذف" variant="danger" />
    </div>
  );
}

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

جمع‌بندی

یک کامپوننت قابل استفاده مجدد، بخش‌های متغیر خود را به‌جای مقداردهی ثابت در کد، از طریق Props دریافت می‌کند. مقادیر پیش‌فرض نیز کمک می‌کنند استفاده از کامپوننت ساده‌تر شود. هدف نهایی، رسیدن به تعادلی مناسب بین انعطاف و سادگی است. در درس بعدی به مقایسه Controlled و Uncontrolled Components می‌پردازیم.