ساده کردن واکنش با EventEmitter: کاهش حفاری و بازپرداختهای غیر ضروری را کاهش دهید

مقدمه

در برنامه های React ، ابزارهای مدیریت دولتی مانند Redux ، Zustand یا React Context به مدیریت داده های مشترک در سراسر مؤلفه ها کمک می کنند. با این حال ، وقتی صحبت از ارتباطات محور است ، همسر می تواند یک جایگزین سبک و کارآمد باشد. این مؤلفه ها را قادر می سازد بدون حفاری عمیق یا مجدداً غیر ضروری تعامل داشته باشند. در این وبلاگ ، ما بررسی خواهیم کرد که چگونه EventEmitter کار می کند ، چگونه می توان آن را در React اجرا کرد و چه زمانی ابزار مناسب برای کار است.

چه اتفاقی می افتد

در مرورگرها ، ما با استفاده از رویدادها تعامل کاربر را اداره می کنیم. با اقدام کاربر ، مانند کلیک ماوس یا فشار کلید صفحه کلید ، می توان یک رویداد را ایجاد کرد. به عنوان مثال ، وقتی پرونده های متن یا رسانه را در برنامه خود کپی و چسبانده ایم ، برای دستیابی به نتیجه مطلوب توسط ClipboardEvent انجام می شود. چارچوب ها و کتابخانه های مختلف پیاده سازی های مختلفی از این مفهوم را ارائه می دهند. در Node.js ، کلاس EventEmitter روشی ساده و انعطاف پذیر برای رسیدگی به رویدادها ارائه می دهد. به عبارت ساده ، رویدادی را منتشر می کند (یا باعث ایجاد) می شود که هر کسی می تواند بر اساس داده های منتشر شده به آنها گوش کند و وظایف خود را انجام دهد.

نمونه اصلی EventEmitter در JavaScript

در اینجا یک اجرای اساسی از EventEmitter در JavaScript با استفاده از Node.js ساخته شده است EventEmitter کلاس.

• در emit روش برای ایجاد یک رویداد استفاده می شود. در این مثال ، این امر را تحریک می کند login رویداد و شماره تلفن ('01829546') را به عنوان داده عبور می دهد.
• در on روش برای گوش دادن به یک رویداد و اجرای یک عملکرد پاسخ به تماس هنگام شروع رویداد استفاده می شود. در اینجا ، آن را فراخوانی می کند sendOTP با شماره تلفن ارائه شده کار کنید.

اجرای EventEmitter در React

React داخلی ندارد EventEmitter، بنابراین ما از eventemitter3 بسته از NPM. این رویکرد به ما امکان می دهد تا رویدادهای گسترده برنامه را بدون اجزای اتصال محکم مدیریت کنیم.

مرحله 1: تنظیم EventEmitter

بیایید یک فایل ایجاد کنیم (eventEmitter.ts) برای تعریف و صادر کردن یک نمونه واحد از EventEmitterبشر این تضمین می کند که همان نمونه در کل برنامه به اشتراک گذاشته شده است.

مرحله 2: انتشار یک رویداد از هر مؤلفه

در LoginButton جزء منتشر کردن رویدادی به نام login با شماره تلفن به عنوان داده.

مرحله 3: عضویت در این رویداد از هر مؤلفه

• در OTPHandler جزء گوش دادن برای login رویداد و یک عمل را انجام می دهد.
• مؤلفه ها می توانند به وقایع گوش دهند حتی اگر مستقیماً با مؤلفه امیتر ارتباط نداشته باشند. این امر نیاز به حفاری عمیق را از بین می برد ، زیرا داده ها در دسترس برنامه هستند.

مثال کد repo

مزایای استفاده از EventEmitter

• منطق جداشده: در LoginButton وت OTPHandler مؤلفه ها کاملاً مستقل هستند. آنها از طریق نمونه مشترک AppEmitter ارتباط برقرار می کنند.
• جلوگیری از عبور عمیق: نیازی به عبور از اجزای عمیق تو در تو نیست ، زیرا داده های رویداد در سطح جهانی قابل دسترسی است.
• اجتناب از رأی دهندگان: از آنجا که وقایع خارج از مدیریت دولت React انجام می شود ، اجزای نامربوط دوباره به طور غیر ضروری ارائه نمی دهند.
• اعلان های گسترده برنامه: EventEmitter برای پخش اعلان ها ، ورود به سیستم یا تجزیه و تحلیل در سراسر برنامه مفید است.

اشکالاتی از EventEmitter

• اشکال زدایی سخت: رویدادها هستند جدا شدهردیابی در جایی که یک رویداد منتشر شده یا شنوندگان از آن برخورد کرده اند ، به خصوص با رشد برنامه ، دشوار است.
• نشت حافظه: اگر شنوندگان تمیز نشوند (به عنوان مثال ، استفاده .off()) ، آنها می توانند پس از عدم شمارش مؤلفه ها ادامه دهند و منجر به نشت حافظه و رفتار غیر منتظره شوند.
• بدون استفاده از خطای داخلی: خطاها در شنوندگان می توانند برنامه را خراب کنند EventEmitter مکانیسم های دستیابی به خطای قوی را ارائه نمی دهد.
• نه برای مدیریت پیچیده دولت: EventEmitter برای مدیریت جریان پیچیده یا گردش کار نامناسب است. این برای ارتباط ساده رویداد محور طراحی شده است ، نه برای حفظ وضعیت برنامه هماهنگ

EventEmitter ، React Context ، Redux/Zustand: کدام ابزار متناسب با مورد استفاده شما است؟

• دستکش های رویداد: بهترین برای گردش کار محور رویداد (به عنوان مثال ، ورود به سیستم ، تجزیه و تحلیل). از بازگرداندن مجدد جلوگیری می کند اما به پاکسازی دستی نیاز دارد و فاقد رسیدگی به خطای داخلی است.
• واکنش واکنش: ایده آل برای دولت UI مشترک (به عنوان مثال ، مضامین ، نویسنده). استفاده از آن آسان است اما باعث می شود که مجدداً مکرر شود و باعث می شود آن را برای به روزرسانی های با فرکانس بالا کارآمدتر کند.
• redux/شرایط: مناسب برای ایالت پیچیده جهانی (به عنوان مثال ، منطق کسب و کار پیچیده) در برنامه های بزرگ. مقیاس پذیری و پشتیبانی میان افزار را ارائه می دهد.

پایان

همسر ابزاری قدرتمند برای گردش کار محور رویداد، به اجزای React اجازه می دهد بدون حفاری عمیق یا مدیریت بیش از حد دولت ارتباط برقرار کنند. در حالی که با جلوگیری از بازپرداخت مجدد غیر ضروری ، به بهینه سازی عملکرد کمک می کند ، اما با تجارت مانند پاکسازی دستی و عدم استفاده از خطای داخلی همراه است. هنگامی که به درستی استفاده می شود ، همسر می تواند یک جایگزین سبک و کارآمد برای رسیدگی به اعلان های گسترده برنامه ، ورود به سیستم و تعامل یک بار باشد. با این حال ، برای مدیریت حالت های کاربردی پیچیده ، زمینه واکنش یا کتابخانه های مدیریت دولتی مانند Redux و Zustand گزینه های مناسب تری باقی می مانند.

این شیرجه عمیق ما را به EventEmitter می رساند! با تشکر از شما برای خواندن ، و فراموش نکنید که در LinkedIn یا ارتباط برقرار کنید x برای دریافت محتوای بیشتر

اگر سؤال یا بازخورد دارید ، لطفاً نظر دهید.