۷ قلاب مهم React که باید بشناسید | به زبان ساده

کاربرد کامپوننت‌های تابعی ری‌اکت تا پیش از معرفی مفهوم قلاب (Hook)، کاملاً محدود بود. زمانی که قرار بود با «حالت» (State) کار کنیم، context API و متدهای دیگر چرخه عمر هیچ کاری نمی‌توانستند انجام دهند. اما از نسخه 16.8 ری‌اکت که قلاب‌ها معرفی شدند، انعطاف‌پذیری بیشتری برای استفاده مجدد از کدهای خود یافته‌ایم. در این مطلب به معرفی 7 قلاب مهم React می‌پردازیم که هر توسعه‌دهنده‌ای باید آن‌ها را بشناسد.

قلاب useFiler

یک مجموعه بسیار جالب از قلاب‌ها از سوی «کریستوفر پتی» (+) معرفی شده است که به نام crook مشهور شده است. در این میان قلاب useFiler بسیار جالب به نظر می‌رسد، زیرا به ما امکان می‌دهد که یک «فایل سیستم» مجازی درون یک مرورگر وب ایجاد کنیم. این قلاب از فضای ذخیره محلی مرورگر برای مدیریت فایل‌ها و محتوایشان استفاده می‌کند.

فیلم آموزش مقدماتی کتابخانه ReactJS در جاوا اسکریپت در فرادرس

کلیک کنید

برای شروع، پکیج crooks را در اپلیکیشن خود با دستور زیر نصب کنید:

npm install crooks –save

اکنون قلاب useFiler را از crooks ایمپورت کنید:

import { useFiler } from 'crooks'

در این زمان آماده مقداردهی قلاب و مدیریت فایل سیستم مجازی هستیم. در ادامه یک قطعه کد نمونه ساده را می‌بینید:

1const App = () => {
2  const [files, {add, remove, update, clear}] = useFiler("localStorageItem")
3  return (
4    <div>My Project</div>
5  )
6}

چنان که در کد فوق می‌بینید، اکنون به متدهای ()add() ،remove() ،‌update و ()clear دسترسی داریم. در ادامه شیوه استفاده از این متدها را بررسی می‌کنیم.

افزودن فایل

تابع ()add یک پارامتر الزامی می‌گیرد. شیوه ارسال داده‌های سریال‌سازی‌شده JSON به صورت زیر است:

add("Save this JSON-serializable data in the file.")

نکته: این تابع به صورت خودکار یک ID برای هر فایل جدید می‌سازد، اما همچنان می‌توانید یک ID سفارشی را با ارسال یک عدد صحیح یا رشته به عنوان پارامتر دوم تعیین کنید.

به‌روزرسانی فایل

متد ()update دو آرگومان می‌گیرد. آرگومان اول ID فایل است، در حالی که آرگومان دوم برای ارسال داده‌های جدید استفاده می‌شود:

update("abc1234", "New content of file.")

حذف فایل

ID فایل را در تابع ()remove ارسال می‌کنیم تا حذف شود:

remove("abc1234")

پاکسازی همه فایل‌ها

با فراخوانی تابع ()clear همه فایل‌ها را حذف کنید:

clear()

قلاب useFetch

در این صفحه می‌توانید فهرستی عالی از قلاب‌های ری‌اکت به نام «کاپیتان هوک» (+) را ببینید که برای اجرای کارهای روزمره بسیار مفید هستند. در ادامه مثال‌هایی از این قلاب‌ها ارائه می‌شوند. از useFetch می‌توان برای دریافت داده‌ها از API استفاده کرد. پس از آن که درخواست تکمیل شد، پاسخ و یا خطا را بازگشت می‌دهد. ابتدا باید آن را در پروژه خود ایمپورت کنیم:

import useFetch from "hooks/useFetch";

سپس یک درخواست ارائه می‌کنیم:

const { response, errors } = useFetch("https://api.github.com/users/torvalds/repos");

قلاب useHover

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

ابتدا قلاب را ایمپورت می‌کنیم:

import useHover from "hooks/useHover";

سپس قلاب را مقداردهی می‌کنیم:

const [hoverMe, isHovered] = useHover();

در کد فوق، به عنصر HTML اشاره دارد، در حالی که isHovered یک مقدار بولی است که می‌تواند در یک گزاره شرطی بررسی شود. برای نمونه می‌توانیم از آن به صورت زیر استفاده کنیم:

<div ref={hoverMe}>{isHovered? "Hovered!": "Hover me!"}</div>

قلاب useSlug

این قلاب بخش مهمی از هر پروژه وب محسوب می‌شود. در واقع این قلاب می‌تواند سئوی یک وب‌سایت را نیز ارتقا ببخشد. به همین دلیل است که این قلاب به مجموعه کاپیتان هوک اضافه شده است. با استفاده از آن می‌توانیم به سرعت هر رشته‌ای را به یک slug مناسب از نظر سئو تبدیل کنیم. این قلاب به قدر کافی هوشمند است تا هر نشانه آوایی را به همتایان استانداردش تبدیل کند. برای نمونه می‌تواند é یا è را به e تبدیل کند. به طور معمول ابتدا باید این قلاب را ایمپورت کنیم:

import useSlug from "hooks/useSlug";

کاربرد قلاب useSlug

زمانی که این قلاب مقداردهی شد، می‌توان هر رشته‌ای مانند عنوان یک مقاله را عنوان آرگومان نخست به آن ارسال کرد تا یک Slug بازگشت دهد که مستقیماً در پروژه استفاده می‌شود:

useSlug("React Hooks! résoudre les problèmes quotidiens");
// react-hooks-resoudre-les-problemes-quotidiens

قلاب‌های useDrag و useDrop

یک کتابخانه متن-باز از قلاب‌های ری‌اکت به نام ahooks (+) وجود دارد که به صورت فعالی از سوی غول تجاری مشهور Alibaba همراه با مشارکت‌کنندگان داوطلب توسعه می‌یابد. در زمان نگارش این مقاله‌، این کتابخانه دارای 46 قلاب است که هر کدام از آن‌ها روی حل یک مسئله خاص تمرکز دارند.

در این بخش یک جفت قلاب را به نام‌های useDrag و useDrop معرفی می‌کنیم. در حال حاضر، شما ممکن است ایده‌ای از کارکرد آن‌ها داشته باشید. با این حال باید اشاره کنیم که این قلاب‌ها به پیاده‌سازی کارکرد کشیدن و رها کردن در HTML5 کمک می‌کنند. برای نصب این قلاب‌ها به صورت زیر عمل کنید:

npm install ahooks –save

سپس قلاب‌ها را ایمپورت کنید:

import { useDrag, useDrop } from 'ahooks';

کاربرد قلاب‌ها

قبل از هر چیز باید قلاب‌های useDrag و useDrop را مقداردهی کنیم. useDrag برخی props را بازگشت می‌دهد که به یک عنصر DOM ارسال می‌شوند. useDrop آن Props را بازگشت می‌دهد که به ناحیه رها کردن ارسال می‌شوند. همچنین به ما اطلاع می‌دهد که آیا عنصر کشیده شده روی ناحیه رها کردن رسیده است یا نه. به این منظور از یک مشخصه بولی به نام isHovering استفاده می‌کند.

در نهایت useDrop چهار تابع callback دارد که بر اساس نوع آیتمی که رها شده عمل می‌کنند:

• onText
• onFiles
• onUri
• onDom

1const getDragProps = useDrag();
2const [props, { isHovering }] = useDrop({
3  onText: (text, e) => {
4    alert(`'text: ${text}' dropped`);
5  },
6  onFiles: (files, e) => {
7    alert(`${files.length} file dropped`);
8  },
9  onUri: (uri, e) => {
10    alert(`uri: ${uri} dropped`);
11  },
12  onDom: (content: string, e) => {
13    alert(`custom: ${content} dropped`);
14  }
15});

یک عنصر HTML5 تعریف می‌کنیم که می‌توان با ماوس آن را کشید:

<div {...getDragProps(id)}>Draggable Element</div>

در ادامه نیز یک عنصر HTML5 را می‌بینید که می‌توان چیزی را روی آن رها کرد:

<div {...props}>
   {isHovering? 'Release Item Here': 'Drop Anything Here'}
</div>

قلاب useDarkMode

یک مجموعه دیگر به نام React Recipes (+)‎ نیز وجود دارد که شامل برخی قلاب‌های مفید ری‌اکت است. این مجموعه قلابی به نام useDarkMode ارائه می‌کند که بین حالت روشن و تیره وب‌سایت سوئیچ کند. پس از سوئیچ کردن حالت، مقدار کنونی در یک localStorage ذخیره می‌شود. این بدان معنی است که حالت ترجیحی کاربر مستقیماً روی همه زبانه‌های مرورگر وب‌سایتی که باز است اعمال خواهد شد.

برای نصب کتابخانه به صورت زیر عمل می‌کنیم:

npm install react-recipes –save

با دستور زیر این قلاب را ایمپورت می‌کنیم:

import { useDarkMode } from "react-recipes";

یک مثال ساده

قلاب ()useDarkMode اساساً دو چیز بازگشت می‌دهد.

• darkMode: یک مقدار بولی است که وقتی حالت تیره فعال باشد، مقدار true می‌یابد.
• setDarkMode: بین حالت تیره و روشن سوئیچ می‌کند.

1function App() {
2  const [darkMode, setDarkMode] = useDarkMode();
3  return (
4    <div className="header">
5      <Toggle darkMode={darkMode} setDarkMode={setDarkMode} />
6    </div>
7  );
8}

سخن پایانی

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