هوکهای React که روزانه استفاده میشوند، گروهبندیشده بر اساس کار: نگهداری state، اجرای افکتها، memoize کردن کارها، اشتراکگذاری context و دسترسی به بیرون از render. هر سطر هوک را با کاربردش جفت میکند.
هوک تابعی است که به یک کامپوننت تابعی اجازه میدهد از قابلیتهای React استفاده کند: state، چرخه حیات، context و تنظیم کارایی. دو قانون: هوکها را در سطح بالاتر صدا بزنید (هرگز داخل حلقه یا شرط نه)، و آنها را فقط از توابع React صدا بزنید. باقی کار، انتخاب هوک درست برای هر وظیفه است.
جدول مرجع · 24 مورد
هوکهای ReactExplained
24 of 24 rows
State
یک مقدار را نگه میدارد که با تغییرش یک render دوباره فعال میشود.
state محلی کامپوننت: فیلدهای فرم، کلیدهای روشن/خاموش، شمارندهها.
state ای را نگه میدارد که با یک reducer اکشنمحور کار میکند، مثل یک store کوچک.
state با چند فیلد مرتبط یا گذارهای پیچیده.
یک مقدار تغییرپذیر نگه میدارد که render دوباره را فعال نمیکند.
ظرفهای تغییرپذیر، تایمرها و دسترسی مستقیم به DOM از طریق .current.
افکتها
یک عارضه جانبی را بعد از render اجرا میکند، با پاکسازی اختیاری.
دریافت داده، اشتراکها و همگامسازی با یک سیستم بیرونی.
تابعی که effect برمیگرداند قبل از effect بعدی و دوباره هنگام unmount اجرا میشود.
برچیدن اشتراکها و تایمرها، یا لغو یک fetch در جریان.
مثل useEffect است، اما بعد از تغییر DOM بهصورت همزمان اجرا میشود.
خواندن یا نوشتن layout قبل از رنگآمیزی مرورگر (toast و tooltip).
مدیران رویداد در پاسخ به عمل کاربر اجرا میشوند؛ افکتها بعد از render برای همگامسازی اجرا میشوند.
منطق ناشی از کاربر به handler تعلق دارد، منطق ناشی از render به effect.
در حالت توسعه کامپوننتها را دو بار mount میکند تا افکتها اجرا، پاکسازی و دوباره اجرا شوند.
گرفتن اشتراکهای تکراری و پاکسازیهای جاافتاده قبل از production.
کارایی
یک مقدار محاسبهشده را تا زمان تغییر وابستگیهایش کش میکند.
پرهیز از محاسبات سنگین بین renderها؛ برای خالی کردن کش عمداً یک مقدار در وابستگیها را تغییر دهید.
یک ارجاع تابع را تا زمان تغییر وابستگیهایش کش میکند.
callbackهای پایدار که به فرزندان memo شده پاس داده میشوند یا بهعنوان وابستگی بهکار میروند.
render دوباره کامپوننتی که propهایش تغییر نکرده را رد میکند.
کامپوننتهای فرزند سنگین؛ وقتی برابری سطحی کافی نیست، یک تابع مقایسه بهعنوان آرگومان دوم بدهید (یک HOC است، نه هوک).
Context و دستگیرههای بیرونی
مقدار context را بدون prop drilling میخواند.
تم، locale یا کاربر احراز هویتشده که در سراسر درخت به اشتراک گذاشته شده.
نمونهای را که والد از طریق ref میبیند سفارشی میکند.
در معرض گذاشتن یک API متمرکز از یک فرزند از طریق forwardRef.
همزمانی و موارد دیگر
یک بهروزرسانی state را غیرفوری علامت میزند تا UI پاسخگو بماند.
چابک ماندن ورودی در حین render دوباره یک فهرست سنگین.
یک مقدار را به تعویق میاندازد تا بهروزرسانیها قابل وقفه باشند.
debounce کردن renderهای سنگین بدون تایمر.
یک id یکتا و پایدار برای ویژگیهای دسترسپذیری تولید میکند.
پیوند دادن label و input بین render سرور و کلاینت.
در حین render یک promise یا context را میخواند؛ تنها هوکی که میتوان بهصورت شرطی صدا زد.
باز کردن یک promise با Suspense، یا خواندن context داخل یک return زودهنگام.
state ای را نگه میدارد که با یک اکشن فرم هدایت میشود، همراه با پرچم pending.
ارسال فرمهایی که خطاها یا state بهروز شده را برای نمایش درجا برمیگردانند.
بلافاصله یک مقدار خوشبینانه render میکند، سپس با تمام شدن اکشن به state واقعی برمیگردد.
نمایش یک لایک یا پیام ارسالشده در حینی که درخواست سرورش در جریان است.
وضعیت pending فرم احاطهکننده را میخواند، بدون نیاز به prop.
دکمه ارسالی که خودش را غیرفعال میکند وقتی فرم والدش در حال ارسال است.
به store ای بیرون از React مشترک میشود و یک snapshot سازگار میخواند.
APIهای مرورگر مثل وضعیت آنلاین، یا storeهای state شخص ثالث.
قبل از افکتهای layout اجرا میشود، برای تزریق قواعد CSS-in-JS ساخته شده.
کتابخانههای استایل که باید قواعد را قبل از خوانده شدن layout درج کنند.
در React DevTools برچسبی سفارشی برای state داخلی یک هوک نشان میدهد.
برچسبگذاری محتوای یک هوک سفارشی هنگام دیباگ.
هوک خودتان که توابع داخلی را ترکیب میکند تا منطق به اشتراک گذاشته شود.
رفتارهای stateful قابل استفاده مجدد مثل useFetch یا useMediaQuery.