ری اکت هوک ها بخشهای جدیدی هستند که به ورژن 16.8 ری اکت اضافه شده اند و قابلیت استفاده از استیت ها و ویژگی های دیگر ری اکت را در فانکشن های ری اکت فراهم می آوردند". این تعریف دقیقا ترجمه تعریفی هست که در داکیومنت ری اکت آمده است. چنانچه بدنبال یافتن پاسخ سوالاتی از قبیل اینکه هوک ها چه هستند، چه تغییراتی در ری اکت به وجود آورده اند، چه مزایایی دارند و نحوه استفاده از آنها به چه صورت هست می باشید در داکیومنت ری اکت به صورت کامل در این باره توضیح داده شده است و من این مباحث را در این بخش پوشش نخواهم داد بلکه به صورت صریح گامهای تبدیل کلاس کامپوننت ها به فانکشن ها را ارائه خواهم داد.
در ابتدا باید بدانید که اگر قبلا کامپوننت های زیادی را با کلاسها ساخته اید، نیازی به تبدیل این کامپوننت ها به فانکشن های ری اکت نیست و میتوانید در ادامه پروژه خود کامپوننت های جدید را با فانکشن های هوک بسازید ولی اگر در شرایطی مشابه با من قرار دارید که در آغاز راه یک پروژه بزرگ هستید و ترجیح میدهید که همه کامپوننت هایتان خوانایی و نظم و قابلیت استفاده مجدد بالایی داشته باشند و تعداد کامپوننت هایی که با کلاسها ساخته اید انگشت شمار هست، میتونید با استفاده از روشی که در ادامه توضیح خواهم داد کلاس کامپوننت های خودتان را به فانکشن های هوک تبدیل کنید.
به طور کلی زمانی که نیاز به استفاده و تغییر state ها به وجود می آید ما کامپوننت های خود را با کلاسها میسازیم چرا که قبل از پیدایش هوک ها قابلیت تعریف و تغییر state ها در فانکشن کامپوننت ها وجود نداشت و از فانکشن کامپوننت ها بعنوان کامپوننت های نمایشی که صرفا با گرفتن props ها المنت ها را با داده های گرفته شده از props ها نمایش می دانند استفاده می شد و همچینن از Lifecycle فقط در کلاس کامپوننت ها استفاده می شد و قابلیت استفاده از این متدها در فانکشن ها وجود نداشت. در برخی مواقع که نیاز به اضافه کردن state به فانکشن کامپوننت ها به وجود می آمد، فانکشن کامپوننت ها باید به کلاس کامپوننت ها تبدیل می شدند تا بتوانند از state ها پشتیبانی کنند.بنابرین با اضافه شدن هوک ها مسائلی همچون مسائل مطرح شده در بالا حل شده است و خوانایی کدها بهبود یافته است.
با دنبال کردن گامهای زیر میتوانید کلاس کامپوننت های خود را به فانکشن های هوک تبدیل کنید.
1-حذف component از بخش ایمپورت
2-حذف کلاس و اضافه کردن فانکشن به صورت زیر
3-حذف متدهای constructor و render
4- اضافه کردن const به ابتدای همه فانکشن ها
5-حذف همه thisها از stateها و propsها
6-ایمپورت کردن متدهای useState و useEffect
7- حذف this.state و تعریف state ها با استفاده از useState به صورت زیر
6-حذف متد setstate و استفاده از متد تعریف شده برای هر state برای تغییر آن state
7-حذف componentDidMount و اضافه کردن useEffect به صورت زیر
با استفاده از گامهای فوق میتوانید به راحتی تمامی کلاس کامپوننت ها را به فانکشن کامپوننت ها تبدیل کنید.
