سلام مردم،
هنگام کار با React، ایجاد اجزای قابل استفاده مجدد برای حفظ کدهای تمیز، قابل مدیریت و مقیاس پذیر ضروری است. یکی از اجزای مشترک که اغلب باید سازگار و انعطاف پذیر باشد. در این پست وبلاگ، نحوه ساخت یک مؤلفه قابل استفاده مجدد را بررسی خواهیم کرد که بتواند پیکربندی های مختلف را مدیریت کند و با تغییرات آینده سازگار شود بدون اینکه بیش از حد پیچیده شود.
انواع هدرها
بیایید یک جزء هدر را در نظر بگیریم که ممکن است نیاز به پشتیبانی از انواع مختلف داشته باشد. در زیر نمونه ای از سبک های مختلف هدر آورده شده است:
جزء اصلی سربرگ
یک کامپوننت هدر React معمولی ممکن است چیزی شبیه به این باشد، جایی که از props برای رندر مشروط عناصری مانند لوگو، موارد ناوبری، نوار جستجو و سبد خرید استفاده می‌شود.
با استفاده از props، یک توسعه دهنده ممکن است هدر را به صورت زیر تنظیم کند:
استفاده:
مدیریت تغییرات آینده
حال، بیایید سناریویی را در نظر بگیریم که در آن الزامات تغییر می کنند. هدر باید شامل عناصر اضافی مانند بخش علاقه مندی ها، جزئیات حساب کاربری و یک بنر بالا با تصویر و متن باشد که می تواند نشان داده یا پنهان شود. اگر به استفاده از رویکرد مبتنی بر prop ادامه دهیم، کامپوننت ممکن است به شکل زیر باشد:
همانطور که می بینید، این رویکرد به سرعت با 10-15 پایه غیرقابل تحمل می شود. مدیریت چنین مؤلفه سنگینی می تواند منجر به کدهای دست و پا گیر و مستعد خطا شود.
استفاده از اجزای مرکب
برای رفع این مشکل می توانیم از جزء مرکب الگو. این رویکرد اجازه می‌دهد تا کد انعطاف‌پذیرتر و قابل خواندن‌تر را با فعال کردن مؤلفه والد برای تعریف ساختار و فرزندان برای مشخص کردن محتوا، ایجاد کند.
در اینجا نمونه‌ای از این است که چگونه می‌توانیم مؤلفه هدر خود را با استفاده از مؤلفه‌های ترکیبی بازسازی کنیم:
Header.js
استفاده
مزایای اجزای مرکب
انعطاف پذیری: اجزای مرکب انعطاف پذیری بیشتری را ارائه می دهند زیرا به شما امکان می دهند اجزاء را در تودرتو قرار دهید و پایه ها را مستقیماً به قسمت های خاص هدر منتقل کنید.
خوانایی: ساختار خواناتر است و سلسله مراتب واضحی را حفظ می کند.
مقیاس پذیری: افزودن مؤلفه‌های جدید یا اصلاح مؤلفه‌های موجود بدون پیچیده‌تر کردن مؤلفه اصلی آسان‌تر می‌شود.
قابلیت استفاده مجدد: هر قسمت از هدر را می توان به طور مستقل در زمینه ها یا طرح بندی های مختلف مورد استفاده مجدد قرار داد.
با استفاده از الگوی کامپوننت مرکب، اطمینان حاصل می کنیم که مولفه هدر ما قابل مدیریت و سازگار با تغییرات آینده است و راه حلی قوی برای نیازهای پیچیده UI ارائه می دهد.
