الگو‌های ری اکت - ۲

تو این مقاله میخوام در مورد بهترین روش های استفاده از امکانات و قدرت ری اکت صحبت کنم. استفاده از الگوهای ری اکت باعث میشه کدهایی بنویسیم که به لحاظ کارایی و خوانایی سطح بالاتری داشته باشند.

تو این مقاله قصد دارم الگوهای ری اکت رو با بیان ساده شرح بدم . این مقاله برداشت آزادی از سایت الگوهای ری اکت است.

تو نوشته قبلی درباره یک سری از الگوی‌های ساده برنامه نویسی در ری اکت صحبت کردم. بریم ادامه الگوهای بهینه کد زدن ری اکت رو بررسی کنیم.

قسمت اول این نوشته:

https://virgool.io/@novonimo/الگوهای-ری-اکت-قسمت-۱-hk9v5jbfalqa

سرفصل های این قسمت:

Children types , Array as children , Function as children , Render prop, Children pass-through

استفاده از Children types

ری اکت پراپس ویژه ای به اسم children داره. این پراپس میتونه انواع نوع داده رو رندر کنه.

اینجا نوع رشته رو داره رندر میکنه:

و در اینجا از نوع لیست استفاده کردیم:

Array as children

استفاده از لیست به عنوان children کار متداولی هست. معمولا هم از تابع map برای این کار استفاده می‌کنیم:

با استفاده از کد بالا در واقع همچین چیزی رو تولید کردیم:

استفاده از Function as children

متاسفانه کامپوننت های ری اکت از توابع به عنوان children پیشتیبانی نمی‌کنند. اما با استفاده از render prop می‌تونیم کامپوننت هایی رو بنویسیم که از تابع به عنوان children استفاده می‌کنند.

استفاده از Render prop

برای مثال فرض کنید یک تابع به اسم Width داریم:

این تابع یک children به عنوان تابع رو ورودی میگیره و اون رو مثل کالبک صدا میزنه ( البته با آرگومان ۵۰۰)

حالا اینجا میخواهیم ازش استفاده کنیم:

که این خروجی رو داره:

با این ویژگی میتونیم رندر شرطی هم بنویسیم:

همچنین مطالعه کنید:

http://vrgl.ir/cpSJu

استفاده از Children pass-through

بعضی وقتا لازم داریم که context رو از طریق یک کامپوننت عبور بدیم. یا به بیان ساده تر ، کامپوننتی که فقط children میگیره و کارش رندر کردن اون children هست. به کامپوننت زیر توجه کنید:

خوب اولین چیزی که به ذهنمون میرسه استفاده از یک div هست و یا حتی از <> </> که به fragment مشهور هست. و یا اینکه خود children رو بدون قرار دادن div اضافی return کنیم: