مسئولیت‌های کامپوننت و طراحی Props

مسئولیت‌های کامپوننت و طراحی درست Props

در درس‌های قبلی یاد گرفتیم چگونه یک رابط کاربری را به کامپوننت تقسیم کنیم و چگونه این کامپوننت‌ها را با هم ترکیب کنیم. اما یک سؤال دیگر باقی می‌ماند: وقتی کامپوننتی را می‌سازیم، دقیقاً چه چیزی باید مسئولیت آن باشد و چه Propهایی باید دریافت کند؟ پاسخ درست به این سؤال، تأثیر زیادی بر خوانایی و قابلیت نگهداری کد دارد.

هر کامپوننت باید یک دلیل مشخص برای تغییر داشته باشد

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

طراحی Props بر اساس نیاز واقعی کامپوننت

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

// طراحی نامناسب
function UserBadge({ user }) {
  return <span>{user.profile.displayName}</span>;
}

در این حالت، UserBadge به کل ساختار داخلی آبجکت user وابسته شده، در حالی که فقط به یک مقدار نیاز دارد. طراحی بهتر این است:

// طراحی مناسب‌تر
function UserBadge({ displayName }) {
  return <span>{displayName}</span>;
}

با این تغییر، UserBadge مستقل‌تر می‌شود و می‌توان آن را بدون نیاز به یک آبجکت کامل user، در جاهای دیگر هم استفاده کرد.

تعداد زیاد Props می‌تواند نشانه یک مشکل باشد

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

نام‌گذاری Props باید گویا و صادقانه باشد

نام یک Prop باید دقیقاً همان چیزی را توصیف کند که واقعاً است. نام‌هایی مانند data یا info معمولاً چندان گویا نیستند، چون مشخص نمی‌کنند دقیقاً چه نوع داده‌ای منتقل می‌شود:

// نام‌گذاری مبهم
<Card data={product} />

// نام‌گذاری گویا
<Card product={product} />

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

جمع‌بندی

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