Container/Presentational پترن در react

مقدمه

سلام امروز میخوام شمارو با یک دیزاین پترن دیگه به اسم Container/Presentational آشنا کنم که این دیزاین پترن به ما کمک میکنه تا به بتونیم view برنامه خودمون رو از logic اون جدا کنیم

چطوری؟

فرض کنید ما داخل برناممون میخواییم یه سری عکس نشون بدیم که این عکس ها به صورت داینامیک از سمت سرور باید دریافت بشن برای ساخت چنین چیزی میاییم و دوتا کامپوننت ایجاد میکنیم

Presentational Components ( کامپوننت ارائه دهنده) :

وظیفه این کامپوننت اینه که کنترل کنه دیتاهامون چجوری نمایش بشن که توی مثالی که داریم داره عکس هارو نمایش میده

Container Components ( کامپوننت نگه دارنده) :

وظیفه این کامپوننت اینه که دیتا رو از سمت سرور دریافت کنه ، اگه تغییری نیاز داره اون رو تغییر بده و به طور کلی data manipulation انجام بده.

Presentational Components ( کامپوننت ارائه دهنده)

این کامپوننت اطلاعاتی که نیاز داره رو از طریق props هاش دریافت میکنه. عملکرد این کامپوننت فقط و فقط نشون دادن view ای از data مون هست. عملکرد این کامپوننت توی مثالی که داشتیم به شکل زیر هست :

نکته : این کامپوننت ها نباید state ای که مربوط به دیتا هست رو کنترل کنند و فقط باید state ای رو داشته باشن که مربوط به ui و یا همون view هست

نکته : دیتا های این کامپوننت توسط کامپوننت Container دریافت میشه

Container Components ( کامپوننت نگه دارنده) :

وظیفه اصلی این کامپوننت ها دادن گرفتن دیتا از سرور و پاس دادنش به کامپوننت ارائه دهندمون هست.

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

عملکرد این کامپوننت توی مثالی که داشتیم به شکل زیر هست

هوک ها

در خیلی از مواقع میتونیم به جای استفاده از این پترن از هوک ها استفاده کنیم تا دیگه مجبور نباشیم یک کامپوننت دیگه ایجاد کنیم که فقط وظیفه کنترل دیتا رو داشته باشه

توی عکس زیر هوکی ایجاد کردیم که میتونه برای ما اطلاعات مورد نیازمون رو از سرور بگیره

مزایا

همینطور که گفته شد این پترن به ما کمک میکنه تا بتونیم منطق برنامه رو از قسمت view برنامه جدا کنیم تا کد تمیز تری داشته باشیم . همچنین استفاده از این پترن کمک میکنه تا برناممون خیلی بیشتر قابل تست باشه چون به راحتی میتونیم دیتا های مختلف رو به بخش view برناممون بدیم تا ببینیم برناممون چه واکنشی نسبت به اون دیتا ها داره و آیا تست هارو pass میکنه یا نه و دیباگ راحت تری هم داریم چون راحت میتونیم بفهمیم توی بخش view باگ وجود داره یا بخش منطق برنامه

سخن پایانی

مرسی که وقت گذاشتید و این مطلب رو تا اینجا خوندید :) . امیدوارم براتون مفید بوده باشه

اگه متنی که نوشتم ایرادی داشت یا فکر میکنید با عوض کردن قسمتیش قابل فهم تر میشه ممنون میشم تو کامنت ها به من اعلام کنید.

من برای نوشتن این متن ها اول این سایت میرم و منطق یک دیزاین پترن رو میخونم و بعد چیز هایی که فهمیدم رو برای شما مینویسم مثلا تو پست قبلی‫ راجب Prototype پترن توضیح دادم که میتونید رو لینک زیر کلیک کنید و بخونیدش