مواردی که در این مقاله بررسی میکنیم.
- custom hook ها در ریکت چی هستند و چطور میتونیم تعریفشون کنیم.
- چرا و چه زمان هایی باید از Custom hook ها استفاده کنیم.
- تعریف یک کاستوم هوک کاربری
درساده ترین تعریف همون توابع جاوا اسکیریپتی هستند فقط با دوتا تفاوت، 1- در تعریفشون از کلمه کلیدی use استفاده شده مثل هوک های داخلی ریکت (useState,useEffect , ...) 2- شما داخلشون میتونید از react hook ها استفاده کنید (داخل توابع عادی جاوا اسکیریپت چنین قابلیتی وجود ندارد.)
به طور کلی کاستوم ها استفاده میشوند تا منطقی رو داخل خودشون نگهداری کنند که میخواهید داخل react component هاتون ازش استفاده کنید، و برای پیاده سازی این منطق نیاز به توابع داخلی react دارید.
استفاده از این کاستوم هوک ها این امکان رو به شما میدهد که منطقی که توی کامپوننت های مختلفتون تکرار شده رو در یک هوک (همون تابع خودمون ) ثابت داشته باشید، این باعث میشه کدتون خواناتر و قابل نگهداری تر باشه (تست و دیباگ و توسعه کدتون راحت تر باشه).
قطعا تا الان تفاوتشون رو متوجه شدید، و متوجه شدید که کاستوم هوک هارو ما فقط میتونیم داخل React component ها استفاده کنیم ولی توابع عادی Javascript رو داخل هر فایل JS ای میتونیم استفاده کنیم، و قطعا این رو هم متوجه شدید که ما داخل توابع عادی جاوا اسکیریپت نمیتوانیم از توابع داخلی و هوک های ریکت استفاده کنیم، ولی داخل CustomHook ها این قابلیت رو داریم، از طرفی این رو هم متوجه شدید که Custom Hook ها با کلمه کلیدی use تعریف میشن ولی توابع عادی به این شکل نیست.
این مثالی که میخوام براتون بزنم رو خودم داخل پروژه هام استفاده میکنم و به نظرم خیلی کاربردی هستش، یک custom hook میخوایم تعریف کنیم که با صدا زدنش داخل کامپوننت هامون، بیاد ابعاد viewport (همون صفحه نمایش کاربر) رو بهمون بده.
زمانی که این هوک رو داخل کامپوننت ریکتمون فراخوانی کنیم، یک آرایه به ما برمیگرداند، که عنصر اول این آرایه برابر با عرض صفحه نمایش کاربر و عنصر دوم آن برابر با ارتفاع صفحه نمایش کاربر است.
خیلی ممنونم که این مقاله رو مطالعه کردید، امیدوارم براتون مفید بوده باشه، من مسعود هارونی هستم و در تلاشم که بتونم دانش خودم رو با بقیه به اشتراک بذارم.
منابع:
منبع اصلی من برای نوشتن این مقاله داکیومنت ReactJs و تجربه خودم در استفاده از CustomHook ها بوده.
