اگر توی ری اکت تازه کاری و همه جای کدت داری از کلاس ها(class) استفاده میکنی احتمالا متوجه شدی که یه وقتایی پیگیری وضعیت(state) ها آسون نیست، اینکه چه جوری بروزرسانیشون کنی، یا رندرشون کنی و غیره. واسه من که خصوصا سروکله زدن با "this" خیلی اذیت کننده بوده.
این ور میری "this" اون ور میری "this" .... خیلی تجربه خوشایندی نیست. ولی نگران نباش هوک ها نجاتمون میدن!
تو این پست، توضیح میدم که چرا هوک ها یادگیریشون انقد آسونه و چطوری باعث میشه خوانایی کدمون از قبل خیلی بیشتر و بهتر بشه. در ضمن با یسری مثال روش استفاده از چنتا ازین امکاناتی که تو نسخه های جدید ری اکت فراهم شده رو بهت معرفی میکنم.
برای یادگیری ری اکت پیشنهاد میکنم ویدیوی آموزشی زیر رو ببینی:
طبق مستندات خود ری اکت:
هوک ها یه امکان جدید تو نسخه 16.8 ری اکت هستن که بهت این اجازه رو میدن که از استیت(state) و امکانات دیگه ری اکت بدون استفاده از کلاس(class)ها استفاده کنی.
اساسا، استفاده از فانکشن ها به جای کلاس ها می تونه اثر مثبتی رو کارایی(پرفرمنس) و خوانایی کدهات بزاره.
نه، ری اکت قصدی برای کنار گذاشتن کلاس ها نداره. هوک ها می تونن همزمان با کلاس ها استفاده بشن و با هم هیچ تداخلی ندارن و رو روش کدزنیتون دخالتی نمی کنن اما هوک ها توی کلاس ها کار نمی کنن.
توصیه میشه که ازین به بعد کامپوننت هات رو به صورت فانکشن بنویسی نه کلاس ولی می تونی اون کامپوننت هایی که قبلا به صورت کلاس نوشتیشون رو تغییرشون ندی(البته اگر فک میکنی خیلی پیچیده نیست تبدیلشون، چرا که نه ریفکتورشون کن ولی اجباری نیست)
قبل از اینکه بریم سراغ چنتا مثال، خوبه که این مفهوم رو توضیح بدم. یه هوک در اصل یه فانکشنه که بهمون این اجازرو میده که به استیت(state) ری اکت قلاب بندازیم.
اگه قبلا با فانکشن کاموننت ها کار کرده باشی میدونی که یه وقتایی لازمه که یه چنتا استیت(state) بهش اضافه کنی. قبل از هوک مجبور بودی که این فانکشن ها رو به کلاس(class) تبدیل کنی تا بتونی از استیت(state) و setState استفاده کنی. با هوک ها خیلی راحت می تونی تو فانکشن کامپوننت ها به استیت و امکانات دیگه ای که تو کلاس ها داشتی دسترسی داشته باشی و از کلاس ها بی نیاز بشی.
جدای از همه قوانینی که هوک ها باید پیروی کنن(از اونجایی که یه فانکشن جاوااسکریپتی هستن)، ما یسری قوانین اضافه تری هم داریم:
حالا می خوام یه چنتا مثال نشونت بدم که میتونه مفید باشه برات، و همچنین قدرت هوک ها رو نشونت میده.
خوب اول از همه بریم هوک useState رو یادبگیریم
فرض کنیم یه کلاس مثل این داریم:
اساسا، این کلاس یه استیت داره(به اسم count که از صفر شروع میشه). هر وقت که دکمه رو میزنیم باید یکی به مقدار این count اضافه بشه(با استفاده از setState تو خط 16).
حالا بیایم همین مثال رو با هوک useState بنویسیمش:
اینجا ما تو خط 1 هوک useState رو ایمپورت(import) کردیمش. خط 4 مهمتریم چیز تو این مثاله.
هوک ()useState یه متغیر استیت(state) تعریف میکنه. به این روش مقدار استیت رو بین فراخونی های فانکشن حفظ میکنه. به طور معمول وقتی از فانکشن خارج میشیم مقدا متغیر ها از بین میرن ولی متغیرهای استیت بوسیله ری اکت مقادیرشون حفظ میشه و از بین نمیرن.
تنها آرگومانی که useState داره مقدار اولیه استیته (تو این مثال count). برخلاف کلاس ها، استیت(state) اینجا لازم نیست که یه شئ باشه.
در آخر، useState یه جفت مقدار برمیگردونه: مقدار فعلی استیت و فانکشنی که باهاش میشه مقدار استیت رو بروزرسانی کرد(تغییر داد). پس به جای استفاده از this.setState و this.state می تونیم یه مقدار جدید رو با فانکشن setCount به count نسبت بدیم و تو این مثال تو خط 9 یکی بهش اضافه کنیم.
درنهایت، خوندنش هم خیلی راحت تره:
<p>You clicked {count} times</p>
نسبت به این:
<p>You clicked {this.state.count} times</p>
هوک افکت(effect) بهت اجازه میده که ساید افکت ها(side effects) یا همون اثرات جانبی حاصل از تغییر متغییرها تو فانکشن ری اکتی رو پیاده سازی کنی.
در ادامه کد قبلیمون، میتونیم یسری کد بهش اضافه کنیم:
تو خط اول یه فانکشن جدید ایمپورت(import) کردیم: useEffect. تو خط 6 ازش استفاده کردیم. useEffect مثل متدهای componentDidMount، componentDidUpdate، componentWillUnmount تو کلاس ها عمل میکنه.
برای روشن شدن قضیه بگم که، بعضی نمونه های ساید افکت تو ری اکت گرفتن دیتا از سمت بک انده، که بعد از یه فراخونی برفرض سرویس بک اند و دریافت داده ها به صورت دستی دام(DOM) رو تغییر میدیم.
ساید افکت ها بعضیاشون لازمه که بعد از اتمام کار از حافظه پاک بشن.
بعضیاشونم نیاز ندارن: مثل درخواست های شبکه(network requests)، دستکاری دام(DOM) و لاگ گرفتن. کدی رو که این کارهارو انجام میده اجرا میکنیم و بعدشم بی خیالشون میشیم.
برای این موارد ما فقط اینجوری از این هوک استفاده میکینم:
useEffect(() => { document.title = `You clicked ${count} times`; });
به طور پیش فرض این کد هم بعد از اولین رندر هم بعد از هر بروزرسانی(آپدیت) اجرا میشه. پس بعد از هر رندر ما عنوان صفحمون رو تغییر میدیم(همراه با مقدار count).
هر چند خیلی شبیه componentDidMount یا componentDidUpdate هست، افکت هایی که با useEffect پیاده سازی میشن جلوی مرورگر رو برای آپدیت صفحه نمی گیرن. باعث میشه که صفحه واکنشگرا تر باشه وقتی نیاز داریم که افکتمون همزمان اتفاق بیوفته یه هوک دیگه ای هست به نام useLayoutEffect که شبیه api useEffect هست.
خوب حالا شاید بگی باشه ولی من می خوام این افکت فقط وقتی کامپوننت بالا اومد(mount شد) اجرا بشه، نه هر بار که بروزرسانی(آپدیت) میشه. البته، این کار رو هم می تونی انجام بدی:
معمول ترین روش برای اجرای یه چیزی بعد از اینکه کامپوننت برای اولین بار رندر شد اینه که از یه آرایه خالی ( [ ] ) به عنوان دومین آرگومان فراخونی useEffect استفاده کنیم:
useEffect(() => { document.title = `You clicked ${count} times`; }, []);
همچنین میتونیم یه مقدار استیت رو با effect نگاه کنیم به این صورت ک هر وقت این مقدار تغییر کرد کد افکت مون اجرا بشه:
useEffect(() => { document.title = `You clicked ${count} times`; }, [count]);
تو مثال بالا، useEffect فقط زمانی اجرا میشه که count تغییر کنه، هرچند بار که تغییر کنه هم مهم نیست به ازای هر بار تغییر count کد افکت ما هم اجرا میشه.
برای یادگیری بیشتر پیشنهاد میکنم ویدیوی آموزشی زیر رو ببینی:
امید وارم که این مقاله براتون مفید بوده باشه و ازتون می خوام حتما این مطلب رو لایک کنید و با دیگران به اشتراک بزارید، ممنون.
من رو تو شبکه های اجتماعی دنبال کنید:
اینستاگرام: yasharhabibimedia
تلگرام: yasharhabibimedia
یوتیوب: yasharhabibimedia
