حسان امینی لو
حسان امینی لو
خواندن ۲ دقیقه·۲ سال پیش

خلاصه فیچر جدید ری-اکت useEvent

تو این مطلب میخوایم با یکی از جذاب ترین هوک های ری-اکت که البته هنوز ریلیز نهایی نشده آشنا بشیم که اسمش هست useEvent.

در کل قابلیت هوک ها به ما اجازه میده که کد هایی که برای کامپوننت ها مینویسیم بسیار تمیز تر و reusable تر و قابل توسعه تر باشن.

هوک جدیدی که میخوام تو این مطلب در موردش صحبت کنم که مشکلی رو حل میکنه که خیلی ظریفه. برای درک بهترش باید اول مشکل رو بررسی کنیم و ببینیم دقیقا مشکل چیه.




مشکل چیزی هست به نام Referential equality of callback functions. حالا اسمش یکم عجیبه ولی سادست، مساله اینه که شما برای هندل کردن یک event بهش یک callback میدید، که اگر اون اتفاق افتاد اون callback رو صدا بزنه ولی با هربار تغییر prop یا state دوباره اون تابع رو ایجاد میکنه در صورتی که فقط مقدار تغییر کرده و نه ساختار کلی تابع.

توی این مطلب از مثال های اینجا استفاده کردم که یه RFC هست.

این مثال رو ببینید:

یه کامپوننت با لاجیک کاملا درست و به خوبی هم کار میکنه. ولی جای بهبود داره.

مشکل اینه که به ازای هر تغییری که مقدار text بکنه و کامپوننت rerender بشه، رفرنس تابع هم تغییر میکنه، یعنی عملا تابع همون تابع قبله، کاری که میکنه مثل قبله ولی اگه مقدار text عوض بشه ری-اکت فکر میکنه کلا تابع عوض شده و تابع جدیدی ایجاد میکنه.

خب میتونیم از هوک useCallback استفاده کنیم که این مشکل رو (تا حدودی) برطرف کنیم.

در واقع کاری که useCallback انجام میده اینه که یه رفرنس ثابت از ایجاد میکنه که توی هر رندر مقدارش تغییر نکنه اما فقط در صورتی که هیچ dependency ای نداشته باشه.

اما اینجا چون مقدار text رو مجبوریم به عنوان یک dependency پاس بدیم به useCallback چون با هر ورودی کاربر مقدار تغییر میکنه طبیعتا و باز هم رفتارش با قبل تفاوتی نمیکنه. اگر میخواستیم text رو به dependency ها پاس ندیم تابع همیشه مقدار اولیه text رو میدید که اینجا میشد یه رشته خالی.




راه حل جدیدی که ارائه شده استفاده از هوک useEvent هست.

بسیار شبیه به useCallback هست با این تفاوت که پارامتر دوم که مربوط به dependency هاست رو نداره و علاوه بر اون میتونه مقادیر رو از closure هم بخونه و تغییراتش رو ببینه و در عین حال هم همیشه همون تابع اولی باقی بمونه. این میشه نمونش:



هنوز این hook روی React ریلیز نشده و باید منتظرش باشیم. این مطلب یه خلاصه خیلی جمع و جور بود از مشکلی که وجود داره و راهکاری که میتونیم استفاده کنیم. خیلی جزییات بیشتری داره که توصیه میکنم حتما کاملش رو اینجا بخونید.

بعضی وقتا واقعا خوندن RFC کتابخونه ها یکی از جذاب ترین کار هاست. هر چند وقت یکبار که یه آپدیتی این شکلی میاد اینکه بدونیم دقیقا باید منتظر چی باشیم خیلی هیجان انگیزه!


reactبرنامه نویسیهوکآموزشی
برنامه نویس از جلو
شاید از این پست‌ها خوشتان بیاید