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

معرفی هوک های ری اکت

مقدمه: بی مقدمه! ?

سوال: هوک ها اصلا چی هستن و به چه کارمون میان?؟

این سوال، سوال نسبتا مهمی هست تقریبا توی همه ی موقعیت های شغلی که دنبال دولوپر ری اکت می گردن سوالاتی رو درباره ی هوک ها از شما میپرسن

هوک ها چی هستن؟ جواب این سوال نسبتا ساده هست هوک ها توی ورژن ری اکت 16.8 اومدن تا یکسری از فیوچرز هایی رو که کلاس کامپوننت ها داشتن رو به فانکشنال کامپوننت ها هم اضافه کنیم چون نوشتن کد با فانکشنال کامپوننت ها خیلی نسبط به کلاس کامپوننت ها بهتر بود. (الان که دارم این مقاله رو مینوسم ورژن ری اکت 18.2 هستش)

انواع هوک ها :

State Hooks : دوتا استیت هوک داریم useState و useReducer

قطعا هر جایی توی فانکشنال کامپوننت ها بخوایم از استیت ها استفاده کنیم باید از استیت هوک ها هم استفاده کنیم پس کاربردشون نسبتا زیاده . مثلا وقتی می خوایم اطلاعات کاربرامون رو توی استیت ذخیره کنیم ، پروداکت ها و آیتم های موجود که اطلاعاتشون تغییر میکنه و... همه اینا باید از یک نوع استیت هوک استفاده کنیم

Context Hook: یک کانتکس هوک داریم : useContext

برای ایجاد یک یا چند استیت که به راحتی به تمامی کامپوننت‌های برنامه دسترسی داشته باشن ، استفاده می‌شه. که برای انتقال داده به کامپوننت‌های فرعی بدون نیاز به انتقال آن‌ها از طریق پارامترها، مناسب است. با استفاده از Context Hooks، می‌تونیم به سادگی داده‌هایی را توی کل برنامه به اشتراک بزاریم و تغییراتی که در یکی از کامپوننت‌ها ایجاد می کنیم رو توی تمامی کامپوننت‌های مرتبط با آن بصورت خودکار اپدیت کنیم.

Ref Hooks : دوتا رف هوکس داریم : useRef و useImperativeHandle

برای دسترسی و کنترل مستقیم بر روی المان هایDOM استفاده می کنیم . با استفاده از آنها، می‌تونیم به صورت مستقیم به المان هایDOM دسترسی پیداکنیم و تغییر دهید. این کار را می‌توان برای مدیریت فوکوس المان های DOM و اجرای عملیات های بیرون از React نیز به کار برد.

EffectHooks : 3نوع افکت هوک داریم useEffect و useLayoutEffect و useInsertionEffect برای مدیریت life cycle کامپوننت و اجرای کد اجرایی در طول زمان، مثل بارگذاری داده‌ها، ایجاد و حذف المان‌ها، اپدیت کامپوننت استفاده می‌شوند.

Performance Hooks :عبارتند ازuseMemo و useCallback و memo و و useTransition و useDeferredValue

کاربرد اصلی شون بهبود عملکرد و کارایی (Performance) برنامه‌های ری اکت هست با استفاده از این هوک ها، می‌تونید عملکرد برنامه‌ی خود را بهبود بخشید،و از اجرای غیر بهینه و کاهش کارایی جلوگیری کنید، حجم و زمان لود برنامه را کاهش دهید و در نتیجه تجربه کاربری(ux) بهتری را به کاربرانتان ارائه دهید.

دیگر هوک ها : useDebugValue و useId و useSyncExternalStore

و هوک های شخصی شده :هوک هایی هستن که خودمون درست میکنیم

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

امیدوارم که ازین پست خوشتون اومده باشه

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

"آیا این پست برای شما مفید بود؟ با لایک کردن و نظر دادن، به من کمک کنید تا بیشترین استفاده را از این پست داشته باشید."

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