فرادرس۴ قلاب سفارشی React برای ارتقای عملکرد اپلیکیشن ها — راهنمای کاربردی
با استفاده از 4 قلاب سفارشی React که در این مقاله معرفی می‌کنیم، می‌توانید کد تمیزتری داشته باشید و این کد قابلیت استفاده مجدد بالاتری خواهد داشت. اینک پس از سپری شدن مدتی که از معرفی قلاب‌های ری‌اکت گذشته است، این قلاب‌ها موجب تحول عظیمی در روش توسعه‌دهندگان برای نوشتن کامپوننت‌های ری‌اکت شده‌اند. این یک گام معمول در مسیر تحول کتابخانه‌هایی مانند ری‌اکت محسوب می‌شود و با معرفی قابلیت‌های جدید تصمیم می‌گیریم که کدام کتابخانه‌ها و فریمورک‌ها در مسیر رقابت شدید توسعه فرانت‌اند نسبت به دیگران ارجحیت بالاتری دارند. ری‌اکت همواره یک کتابخانه فرانت‌اند بسیار محبوب بوده است، اما معرفی قلاب‌های ری‌اکت گام بزرگی در مسیر پیشرفت آن محسوب می‌شود.
چرا باید از قلاب‌های ری‌اکت استفاده کرد؟
قلاب‌های ری‌اکت به توسعه‌دهنده کمک می‌کنند که عوارض جانبی کامپوننت‌های کارکردی را بدون نیاز به استفاده از یک رویکرد کلاسی و متدهای چرخه عمری مانند componentDidMount ،componentDidUpdate و غیره کنترل کند. به علاوه به توسعه‌دهندگان کمک می‌کند تا منطق را در میان کامپوننت‌ها به اشتراک گذاشته و کدهای تکراری و خطاهای انسانی را کاهش دهند.
ری‌اکت دارای قلاب‌های داخلی است که کارکردهایی در مورد فرایند کنترل کامپوننت ارائه می‌کند، اما قابلیت شگفت‌انگیز ری‌اکت امکان ترکیب آن‌ها و ایجاد قلاب سفارشی و همچنین امکان تعامل با API مرورگر است.
کتابخانه‌های زیادی وجود دارند که قلاب‌های سفارشی ارائه می‌کنند و برخی از آن‌ها شاید کارکردی که قصد داریم در این مقاله ایجاد کنیم را به روشی بهتر مدیریت می‌کنند. با این حال آشنایی با پشت صحنه تابع‌هایی که هر روزه استفاده می‌کنیم، همواره ایده خوبی به حساب می‌آید. در بخش بعدی یک قلاب سفارشی می‌نویسیم.
قلاب usePrefetch
قلاب usePrefetch به شما کمک می‌کند که زمان بارگذاری صفحه اصلی اپلیکیشن را از طریق «بارگذاری کند» (lazy loading) کامپوننت‌های دیگر که نیازی به رندر نمای نخست ندارند، بهبود دهید. هدف ما کاهش اندازه باندل و اطمینان یافتن از دریافت سریع پاسخ از اپلیکیشن است.
در این مثال فرض می‌کنیم صفحه‌ای با برخی اطلاعات و یک دکمه داریم که یک کادر modal را باز می‌کند. پیش از فشردن دکمه، کادر modal نمی‌تواند رندر شود و نیازی هم به آن نداریم. اما اگر آن را در ابتدای کامپوننت اصلی ایمپورت کنیم، برای دانلود کد جاوا اسکریپت آن به زمان بیشتری نیاز داریم، زیرا در باندل اصلی جای می‌گیرد. ما می‌خواهیم کامپوننت modal را به صورت «با تأخیر» بارگذاری کنیم تا کد از کامپوننت اصلی جدا شود و زمانی که کامپوننت اصلی برای نخستین بار رندر شد، آن را «پیش‌واکشی» (Prefetch) کنیم.
چرا باید یک تابع importModal تعریف کنیم؟
دلیل این امر آن است که اگر ایمپورت را به صورت درون‌خطی بنویسیم، هر بار یک تابع جدید فراخوانی می‌شود و در هر بار رندر useEffect را درون قلاب اجرا می‌کند.
قلاب useGeo
قلاب useGeo هر زمان که کاربر جابجا می‌شود، موقعیت کنونی و مقدار به‌روزرسانی شده را می‌گیرد.
چرا باید متغیری به نام isLoad تعریف کنیم؟ از آنجا که دریافت موقعیت، یک عملیات ناهمگام (async) است؛ این امکان وجود دارد که کامپوننت از نو رندر شود. بنابراین باید تابع پاکسازی را پیش از بازیابی مؤثر مکان اجرا کنیم. بدین ترتیب می‌توانیم در صورتی که کامپوننت پیش از موعد مقرر unmourn شود، از اجرای دستگیره‌های onSuccess یا onFailure جلوگیری کنیم.
قلاب useInterval
اثر useInterval احتمالاً شناخته‌شده‌ترین قلاب ری‌اکت محسوب می‌شود، اما ما در این بخش پیاده‌سازی انجام یافته از سوی «دن ابرامُو» (Dan Abramov) را نمایش می‌دهیم، چون از آن برای قلاب بعدی استفاده خواهیم کرد:
قلاب useTimer
توسعه‌دهندگان گهگاه با نیاز به پیاده‌سازی روشی مؤثر برای دریافت یک تایمر شمارش معکوس مواجه می‌شوند. از این رو یک تایمر شمارش معکوس ایجاد می‌کنند که از یک timestamp آغاز می‌شود که نمایانگر مقدار زمانی است که باید برحسب میلی‌ثانیه سپری شود:
بدین ترتیب به پایان این مقاله رسیدیم. امیدواریم از مطالعه این راهنما در مورد 4 قلاب سفارشی ری‌اکت که به ارتقای سطح اپلیکیشن‌ها کمک می‌کند، بهره آموزشی لازم را برده باشید.
اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:
- مجموعه آموزش‌های JavaScript (جاوا اسکریپت)
- مجموعه آموزش‌های برنامهنویسی
- ری اکت (React) — راهنمای جامع برای شروع به کار
- کوئری مدیا در React به روش برنامه نویسی شده — راهنمای کاربردی
- ۱۰ نکته و ترفند برای بهبود برنامه نویسی React — راهنمای کاربردی
- آموزش ری اکت (React) — مجموعه مقالات مجله فرادرس
==
