سلام، امیدوارم حالتون خوب باشه و اوضاع بر وفق مراد!
تو قسمت اول به Context API اشاره کردیم و مختصر توضیحی دادم. توی قسمت دوم میریم سراغ یک دیزاین پترن دیگه، امیدوارم براتون کاربردی باشه.
با یک مثال شروع میکنم. فرض کنید یک کامپوننت داریم که وظیفه‌ش گرفتن و نمایش دادن یک‌سری داده هست. راه‌حلی که همه ما در نگاه اول انجام میدیم این هستش که میگیم خب! یه فایل باز میکنم، بالاش یه useEffect یا componentDidMount میزنم و دیتا رو میگیرم و پایینش redner میکنم. اما وقتی که بخوایم این کامپوننت رو گسترش بدیم اوضاع دیگه اونقدر قشنگ نیست!
حتما شما هم با این مشکل برخورد کردید که توی پروژه یک‌سری کامپوننت دارین که اصلا میترسین بازش کنین! انقدر شلوغ و بزرگ شده (ناخوانا) که اگر یه تغییر کوچک بدین صفحه نه‌چندان زیبای قرمز ارور رو میبینین.
راه حلی که امروز میخوام بگم راه‌حل پیشنهادی Dan Abramov برای این موقعیت ها هست.
میگه که یک کامپوننت رو به دو کامپوننت تبدیل کنیم. یکی برای لاجیک (Container) و... یکی هم برای صرفا نمایش داده ها (Presentation). اینطوری کد ما چندین لول خواناتر میشه و کار کردن باهاش بسیار ساده‌تر.
مثال رو ببینیم:
اینجا یک کامپوننت داریم که از روی کد واضحه توش چه خبره. حالا پیشنهاد جناب Dan اینه که این رو به صورت زیر تبدیل کنیم:
توجه داشته باشید که اسم پیشنهادی برای کامپوننت هایی که توشون لاجیک داریم به این صورته:
ComponentName + Container
که اینجا ما WeatherWidgetContainer رو داریم. و اسم کامپوننتی که فقط مسئول نمایش داده ها هست همون WeatherWidget خالی باقی میمونه و داخل به این صورت میشه:
به همین سادگی کدهای میتونیم کد هایی بنویسیم که:
- خواناتر هستن
- راحت‌تر دیباگ میشن
- قابلیت استفاده شدن مجدد رو دارن
- قابلیت تست شدن دارن (اتومیشن تست منظور هست)
ممنون که وقت ارزشمندتتون رو گذاشتید و این مقاله رو مطالعه کردید. خیلی خوشحال میشم اگر نظرتون رو برام بنویسید.
منتظر قسمت سوم که بنظر خودم از همشون هیجان‌انگیزتره باشید.
