سه دیزاین پترن در ری‌اکت [قسمت سوم]

سلام! مثل همیشه امیدوارم حالتون خوب باشه.

این پست آخر از مجموعه سه‌تایی از دیزاین پترن های ری‌اکت هست. قسمت اول و دوم رو اینجا پیدا کنید.

Render Props

خب خیلی سریع بریم ببینیم چی هست. با مثال شروع میکنم. فرض کنید میخوایم یه لیست از پست ها رو نشون بدیم خب مراحلش خیلی سادست! اول یک GET ریکویست میزنیم، بعد یک اسپینر برای لود دیتا نشون میدیم و در آخر اگر اروری نداشته باشیم محتوا رو نمایش میدیم. پس اگر بخوام به صورت مرحله به مرحله بنویسم اینجوری میشه:

1- GET from API

2- Show Loading

3- !error && render data

خب حالا لیست پست ها رو گرفتیم! الان فرض کنید یه لیست نظرات رو میخوایم. خب تو این شرایط میگیم که ما کد رو تکرار نمیکنم!? پس میایم کامنت یا محتوا رو به صورت props پاس میدیم تو کامپوننت، اینجوری:

<Articles get=&quotcomments />
<Articles get=&quotposts&quot />

هاها! ایول خب پس تا اینجا رو خوب پیش رفتیم.

حالا فرض کنید میخوایم پروفایل یوزر رو نمایش بدیم! اینجاس که یکم ناراحت میشیم... چون شیوه نمایش یوزرپروفایل با کامنت ها یا پست ها کاملا متفاوته، اما روندش همونه اول GET بعد Loading و بعد اگر ارور نبود یوزرپرفایل!

خب اینجا اگر باز بریم سمت props کامپوننت ما خیلی خیلی بزرگ میشه و پر از if که اصلا قابل خوندن نیست و نمیشه جاهای مختلف دوباره ازش استفاده کرد. اسپاگتی کد خالص!

اینجاس که راه حل ما میاد، رندر پراپس! رندر پراپس چیه؟ به صورت تئوری میگیم «یک تکنیک برای اشتراک‌گذاری کد بین کامپوننت های ری‌اکت»

در واقع اینطوری کار میکنه:

ما یه پراپ با نام render پاس میدیم تو Component (با render پیش‌فرض ری‌اکت اشتباه نگیرید)

خب طبق نام‌گذاری رسمی اسم کامپوننتی که اون سه تا کاری که تاحالا گفتیم رو انجام میده رو میذاریم Resource و داخل کامپوننت Resource برای مثال اینطور میشه:

Resource.js

اینجا توی Resource میایم لاجیکمون رو انجام میدیم و اطلاعاتش رو میدیم به render prop

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

و بله! اینطوری میتونیم از تکرار اضافی پرهیز کنیم. data رو میگیریم و هرطور که بخوایم نمایش میدیم.

دلایلی که بهتره از render props استفاده کنیم:

۱) بسیار خوانا و واضح هستن

۲) لاجیک از نمایش جدا کردیم (لاجیک فقط توی Resource میمونه و دیگه کاری بهش نداریم!)

۳) قابلیت توسعه بالا

۴) قابل استفاده مجدد

در آخر پیشنهاد میکنم با اینکه این روش بسیار خوبی هست اما اول کدتون به همون روال عادی بزنید، بعد مثلا اگر دیدید که چهار یا پنج بار دارید پترن GET, Loading, Present رو تکرار میکنید کدتون رو ریفکتور کنید و این متد رو پیاده کنید.

این روش برای من بسیار جذاب و کاربردی بوده، امیدوارم که برای شما هم همینطور بوده باشه.

اگر از این روش استفاده کردید تجربه‌تون رو توی کامنت ها با من به اشتراک بگذارید و یا اگر پیشنهادی دارید من مشتاقانه منتظرش هستم!

ممنون که وقت گذاشتید و مطالعه کردید.