Coupling و Separation of Concerns

Coupling و اهمیت جداسازی مسئولیت‌ها در کامپوننت‌ها

تا اینجا چند بار درباره اینکه یک کامپوننت باید مسئولیت مشخصی داشته باشد صحبت کردیم. در این درس این موضوع را از زاویه‌ای دیگر بررسی می‌کنیم: وابستگی بین کامپوننت‌ها، یا همان Coupling، و اینکه چگونه جداسازی مسئولیت‌ها (Separation of Concerns) می‌تواند این وابستگی را کنترل‌پذیرتر کند.

Coupling چیست

Coupling به میزان وابستگی یک کامپوننت به جزئیات داخلی یا ساختار کامپوننت دیگر گفته می‌شود. هرچه یک کامپوننت بیشتر از جزئیات درونی کامپوننت دیگر باخبر باشد و به آن‌ها متکی شود، Coupling بین آن‌ها بیشتر است. Coupling بالا باعث می‌شود تغییر در یک کامپوننت، به‌راحتی کامپوننت‌های دیگر را هم تحت‌تأثیر قرار دهد.

یک مثال از Coupling زیاد

function ProductCard({ product }) {
  return (
    <div>
      <h4>{product.details.info.title}</h4>
      <p>{product.pricing.finalPrice.amount} تومان</p>
    </div>
  );
}

در این کد، ProductCard دقیقاً می‌داند ساختار داخلی آبجکت product چگونه است؛ اگر ساختار این آبجکت در جای دیگری از برنامه تغییر کند (مثلاً details.info.title به name تبدیل شود)، این کامپوننت هم باید تغییر کند، حتی اگر خودِ ProductCard هیچ نقشی در آن تغییر نداشته باشد.

کاهش Coupling با ساده کردن Props

همان‌طور که در درس مربوط به طراحی Props دیدیم، دریافت مقادیر ساده و مشخص به‌جای یک آبجکت کامل، یکی از راه‌های کاهش Coupling است:

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

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

Separation of Concerns در کامپوننت‌ها

Separation of Concerns به معنای این است که هر بخش از برنامه، فقط مسئول یک نوع کار مشخص باشد. برای مثال، در بسیاری از برنامه‌ها، منطقی است که مسئولیت‌ها به این شکل تقسیم شوند:

کامپوننت‌های نمایشی (Presentational): فقط مسئول نمایش ظاهر بر اساس Props دریافتی هستند.
کامپوننت‌های مدیریت‌کننده داده: مسئول نگهداری State یا دریافت داده از سرور هستند و آن را به کامپوننت‌های نمایشی می‌دهند.

این تفکیک باعث می‌شود کامپوننت‌های نمایشی را بتوان به‌سادگی در موقعیت‌های مختلف، با منابع داده متفاوت، دوباره استفاده کرد.

Coupling همیشه بد نیست

نکته مهم این است که هدف، حذف کامل Coupling نیست؛ چون کامپوننت‌ها طبیعتاً باید با هم ارتباط داشته باشند تا برنامه کار کند. هدف، کاهش وابستگی‌های غیرضروری و مبهم است؛ به‌طوری‌که وقتی کامپوننتی تغییر می‌کند، تأثیر آن روی بقیه برنامه قابل‌پیش‌بینی و محدود باشد.

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

کاهش Coupling با Props ساده

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

function App() {
  const product = {
    details: { info: { title: "کیبورد مکانیکی" } },
    pricing: { finalPrice: { amount: 850000 } },
  };

  return (
    <ProductCard
      title={product.details.info.title}
      price={product.pricing.finalPrice.amount}
    />
  );
}

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

جمع‌بندی

Coupling میزان وابستگی یک کامپوننت به جزئیات داخلی کامپوننت یا داده دیگر است. Coupling بیش‌ازحد باعث می‌شود تغییرات کوچک در یک بخش، به بخش‌های دیگر هم سرایت کند. با طراحی Props ساده و تفکیک مسئولیت‌ها بین کامپوننت‌های نمایشی و کامپوننت‌های مدیریت داده، می‌توان این وابستگی را کنترل‌پذیرتر کرد. در درس بعدی به الگوهای رایج طراحی کامپوننت می‌پردازیم.