بوق برای مدیریت State در React

خیلی وقت بود یک موضوعی دغدغه فکریم شده بود وجود Wrapper Component ها یا اصطلاحا Connect ها در کدهای React، به کد زیر دقت کنید:

کد وب سایت Uber
کد وب سایت Uber

همانطور که میدانید همه Module های که برای مدیریت State در پروژه های React استفاده میشود برای Rerender کردن Component ها متصل به State Management نیاز به Connect دارند که تغییر انجام شده در State را به صورت Props به Component انتقال دهند Redux و React Context و حتی ماژولی که خودم نوشتم به نام react-jet از همین مکانیزم استفاده میکنند. تصویر زیر درختی از Component های React هست:

فرض کنید بخواهیم Component D را به Redux، React Context و یا React-Jet وصل کنیم برحسب ماکانیزمی که وجود دارد درخت به شکل زیر تغییر میکند:

اما مشکل کجاست؟ جواب تعداد زیاد Component های واسطه یا همان Connect ها. در پروژه های بزرگ ممکن هست Component های خیلی زیادی داشته باشیم و هر Component برحسب نیاز اگر به Component Connect نیاز داشته باشد تعداد Node های درخت به شدت افزایش می آید و همین موضوع در پروژه های بزرگ باعث کاهش Performance می شود. روی این موضوع خیلی فکر کردم که چطور می شود Component ی که نیاز به State Management دارد بدون نیاز به Component Connect یا Wrapper Component از تغییرات State Management متوجه شود. تا اینکه ایده به ذهنم رسید. به احتمال زیاد شما هم با صدای بوق ماشین از جاتون پریدید یا شوکه شدید یا حداقل این صحنه را در واقیعت یا در فیلم ها دیدید. این فکر باعث شد به فکر این بیوفتم که چطور میتونیم به Component ها React وقتی مقداری در State Managemant تغییر کرد بوق بزنیم و Component دوباره Render شود. حاصل این فکر پروژه react-beep شد که میتونید از لینک Github زیر پروژه را مشاهده و استفاده کنید:

https://github.com/uxitten/react-beep

این ماژول فوق العاده سبک هست من در حال توسعه و تست در همه شرایط هستم اگر شما هم در این پروژه مشارکت کنید ممنون میشم.

مراحل نصب و استفاده در لینک بالا هست. اما توضیحات تکمیلی:

برای تعریف state از کد بالا استفاده میکنیم و هر چند تعداد که خواستیم میتوانیم تعریف کنیم.

اگر قصد دارید فقط defaultValue را در Component نمایش دهید به صورت زیر عمل میکنید:

به همین سادگی و اگر می خواهید Component در هر لحظه از تغییرات State متوجه شود کافی هست به جای extends کردن از React.Component از دستور زیر استفاده کنید:

با کمترین تغییرات. حاصل اجرای تابع Beep کلاسی هست که Componet ما از آن extends میشود پارامتر ورودی این تابع نام State های هست که قرار هست Component ما به آن ها حساس باشد و در صورت تغییر Component دوباره Render شود.

این ماژول به صورت کامل، از یک مکانیزم دیگری استفاده میکند و هیچ node جدیدی به node های موجود در درخت اضافه نمی کند. ما در حال استفاده از این ماژول در یک پروژه هستیم امیدوارم بتونم تجربیات استفاده از این ماژول را به صورت مقاله به شما انتقال دهم.

لینک Github:

https://github.com/uxitten/react-beep