سلام! امیدوارم که حال همه خوب باشه در سلامت کامل باشیم. توی این پست میخوام درباره سه تا دیزاین پترن توی ری‌اکت بنویسم که شاید بعضیش رو دیده باشید شاید هم نه.
اول از همه بریم سراغ تعریف دیزاین پترن: «راه حل های مشخص برای ایرادات رایج در برنامه‌نویسی»
پس یعنی اگر شما هم تاحالا چند خطی ری‌اکت نوشته باشید، با این مشکلات رو به رو شدین!
خب اول از همه بگم که احتمالا خیلی هامون با Context API آشنا هستیم و ازش استفاده می‌کنیم، اگر شماهم جزو این دسته هستید، میتونید دو مورد بعدی رو چک کنید.
شاید براتون جالب باشه که Context API از مدت ها پیش در ری‌اکت بوده اما خب شاید توجه کافی به اون نمی‌شده.
خب بریم ببینیم چه زمانی می‌تونیم از این دیزاین پترن استفاده کنیم!
فرض کنید چندین کامپوننت تو در تو داشته باشیم، مثلا کامپوننت داشبورد رو در نظر بگیرید، داخلش کامپوننت پست داریم که داخل اون کامپوننت کامنت داریم. فرض کنیم می‌خوایم که یک prop از داشبورد به کامپوننت کامنت بدیم. اینجا باید اول prop رو بدیم به کامپوننت پست (که شاید اصلا کامپوننت پست از این prop استفاده نکنه) و بعدش بدیم به کامپوننت کامنت!
شاید مثال من به اندازه کافی ترسناک نباشه اما فرض کنید همینطور چندین کامپوننت تو در تو داشته باشیم و برای انتقال داده از فقط از props استفاده کنیم! (به این کار Prop Drilling میگن)
شاید برای حل این مشکل فکر کنید که ریداکس این مشکل رو حل میکنه. اما ریداکس پیچیدگی های خودش رو داره و شاید پروژه ما کوچک باشه و اصلا نیازی به استفاده از ریداکس نداشته باشه.
اینجاس که Context API وارد میشه! اینجا با دوتا کامپوننت کلیدی سر و کار داریم.
یکی Provider و دیگری Consumer
در اصل Provider شامل یک سری داده هست که ما همه جا بهش دسترسی داریم.
و Consumer به داده های داخل Provider ما دسترسی داره.
اگر بخوایم در یک نگاه این کامپوننت هارو داشته باشیم، به صورت این میشه:
خب حالا برگردیم به همون مثالی که بالاتر گفته بودم و سعی کنیم با Context API حلش کنیم!
اینجا باید توجه داشته باشیم که کامپوننت Provider، کامپوننت Dashboard مارو در بر بگیره.
و بله! میبینم که به سادگی تونستیم از داده مورد نظرمون رو به سادگی انتقال بدیم!
ممنون از اینکه وقت گذاشتید و مطالعه کردید. خوشحال میشم نظرتون رو بهم بگید.
منتظر قسمت دوم باشید!
برگرفته از Kent C. Dodds
