معماری مبتنی بر کامپوننت چیست و چرا React این‌طور طراحی شده؟
در درس قبلی دیدیم که React رابط کاربری را به‌عنوان تابعی از داده در نظر می‌گیرد. اما این توصیف چگونه در عمل سازمان‌دهی می‌شود؟ پاسخ React به این سؤال، تقسیم رابط کاربری به واحدهای کوچک و مستقل به نام کامپوننت (Component) است.
کامپوننت چیست
کامپوننت را می‌توان یک قطعه مستقل از رابط کاربری در نظر گرفت که ظاهر خود را بر اساس ورودی‌هایی که دریافت می‌کند مشخص می‌کند. یک کامپوننت می‌تواند چیزی به‌سادگی یک دکمه باشد، یا چیزی به‌بزرگی یک صفحه کامل که خودش از کامپوننت‌های کوچک‌تر تشکیل شده است. نکته مهم این است که هر کامپوننت مسئولیت مشخص و محدودی دارد.
برای مثال، یک صفحه پروفایل کاربر را می‌توان به این شکل تجزیه کرد:
- کامپوننت هدر صفحه
- کامپوننت نمایش اطلاعات کاربر
- کامپوننت لیست پست‌ها
- کامپوننت فوتر
هر کدام از این بخش‌ها را می‌توان جداگانه توسعه داد، تست کرد و در جاهای دیگر برنامه نیز دوباره استفاده کرد.
چرا این معماری مهم است
پیش از رواج این سبک معماری، بسیاری از پروژه‌های وب، رابط کاربری را به‌صورت یک‌پارچه و بدون مرز مشخص بین بخش‌های مختلف صفحه می‌نوشتند. با بزرگ‌تر شدن پروژه، این رویکرد باعث می‌شد تغییر یک بخش، به‌راحتی روی بخش‌های دیگر اثر بگذارد.
تقسیم رابط کاربری به کامپوننت‌های مستقل چند مزیت اصلی دارد:
- قابلیت استفاده مجدد (Reusability): یک کامپوننت را می‌توان در جاهای مختلف برنامه دوباره استفاده کرد.
- جداسازی مسئولیت‌ها (Separation of Concerns): هر کامپوننت فقط باید یک بخش مشخص از رابط کاربری را مدیریت کند.
- قابلیت نگهداری (Maintainability): تغییر یا رفع اشکال در یک کامپوننت، تأثیر کمتری روی بقیه برنامه دارد.
- قابلیت تست (Testability): کامپوننت‌های کوچک و مستقل را می‌توان جداگانه بررسی کرد.
ترکیب کامپوننت‌ها به‌جای وراثت
در بسیاری از سیستم‌های نرم‌افزاری قدیمی‌تر، برای استفاده مجدد از کد از وراثت (Inheritance) استفاده می‌شد. React اما بر پایه ترکیب (Composition) بنا شده است؛ یعنی کامپوننت‌های کوچک در کنار هم قرار می‌گیرند تا کامپوننت‌های بزرگ‌تر را بسازند، نه اینکه یک کامپوننت از کامپوننت دیگر ارث‌بری کند. این موضوع را با جزئیات بیشتر در فصل مربوط به طراحی کامپوننت بررسی خواهیم کرد.
درخت کامپوننت‌ها
وقتی چند کامپوننت داخل یکدیگر استفاده می‌شوند، یک ساختار درختی شکل می‌گیرد که به آن درخت کامپوننت‌ها (Component Tree) گفته می‌شود. برای مثال:
App
├─ Header
├─ UserProfile
│ ├─ Avatar
│ └─ UserInfo
└─ Footerاین ساختار درختی نقش مهمی در نحوه رندر شدن و به‌روزرسانی رابط کاربری دارد که در فصل‌های مربوط به مدل رندرینگ React با جزئیات بیشتری به آن می‌پردازیم.
جمع‌بندی
معماری مبتنی بر کامپوننت یعنی تقسیم رابط کاربری به واحدهای کوچک، مستقل و قابل‌ترکیب که هرکدام مسئولیت مشخصی دارند. این تقسیم‌بندی، پایه اصلی طراحی هر برنامه React است و در درس‌های بعدی خواهیم دید این کامپوننت‌ها در عمل با چه نحوی نوشته می‌شوند.