قلاب چیست و چه کاربردهایی دارد؟
React یکی از محبوب ترین کتابخانه های مورد استفاده در توسعه وب است. این روش ساخت برنامه های کاربردی وب را متحول کرده است و آن را آسان تر و کارآمدتر از همیشه کرده است. یکی از دلایل اصلی محبوبیت آن، معرفی هوک ها است که مدیریت وضعیت را در برنامه های خود برای توسعه دهندگان آسان کرده است.
در این مقاله نگاهی دقیقتر به چیستی هوکها و نحوه استفاده از آنها در برنامههای React خواهیم داشت. ما با بحث در مورد مفهوم حالت در React شروع می کنیم، قبل از اینکه توضیح دهیم هوک ها چیست و چگونه کار می کنند. ما همچنین نمونه هایی از نحوه استفاده از قلاب ها در انواع مختلف برنامه های React را ارائه خواهیم داد.
حالت در React
قبل از اینکه بتوانیم در مورد هوک ها صحبت کنیم، ابتدا باید مفهوم حالت را در React درک کنیم. در React، state برای مدیریت داده هایی که توسط یک جزء استفاده می شود استفاده می شود. این داده ها می توانند هر چیزی باشند، از رشته یا عدد گرفته تا آرایه یا شی. هنگامی که وضعیت یک کامپوننت تغییر می کند، React به طور خودکار کامپوننت را مجدداً نمایش می دهد تا حالت جدید را منعکس کند.
دو راه برای مدیریت وضعیت در React وجود دارد: استفاده از کامپوننت های کلاس و استفاده از کامپوننت های تابعی. اجزای کلاس از روش خاصی به نام setState برای به روز رسانی وضعیت یک جزء استفاده می کنند، در حالی که اجزای عملکردی برای مدیریت وضعیت به قلاب ها متکی هستند.
هوک چیست؟
Hooks یک ویژگی جدید در React است که در نسخه 16.8 معرفی شده است. آنها به توسعه دهندگان این امکان را می دهند که از ویژگی های حالت و سایر ویژگی های React در اجزای عملکردی استفاده کنند. این بدان معنی است که توسعه دهندگان اکنون می توانند اجزایی را ایجاد کنند که از state استفاده می کنند بدون نیاز به استفاده از اجزای کلاس.
قلاب ها اشکال مختلفی دارند که هر کدام هدف متفاوتی را انجام می دهند. رایجترین قلابهای استفادهشده عبارتند از useState، useEffect، useContext و useReducer. در ادامه به هر یک از این قلاب ها با جزئیات بیشتری خواهیم پرداخت.
استفاده از ایالت
قلاب useState برای مدیریت وضعیت در اجزای تابعی استفاده می شود. یک مقدار اولیه را به عنوان آرگومان می گیرد و یک آرایه حاوی وضعیت فعلی و تابعی را برمی گرداند که می تواند برای به روز رسانی وضعیت استفاده شود. در اینجا مثالی از نحوه استفاده از useState آورده شده است:
``جاوا اسکریپت
وارد کردن React، { useState } از "react";
تابع مثال() {
const [count, setCount] {{0}} useState(0);
بازگشت (
شما {count} بار کلیک کردید
);
}
```
در این مثال، ما از useState برای مدیریت وضعیت یک شمارنده استفاده می کنیم. مقدار اولیه شمارنده با استفاده از useState روی 0 تنظیم شده است. سپس از setCount برای به روز رسانی مقدار شمارنده هر بار که روی دکمه کلیک می شود استفاده می کنیم.
useEffect
قلاب useEffect برای انجام عوارض جانبی در اجزای عملکردی استفاده می شود. عوارض جانبی هر گونه اقدامی است که خارج از مؤلفه انجام می شود، مانند واکشی داده ها از یک API یا به روز رسانی عنوان صفحه.
قلاب useEffect دو آرگومان می گیرد: تابعی که اثر جانبی را انجام می دهد و آرایه ای از وابستگی ها. هر بار که کامپوننت ارائه می شود، تابع فراخوانی می شود و از وابستگی ها برای تعیین زمان فراخوانی تابع استفاده می شود. در اینجا مثالی از نحوه استفاده از useEffect آورده شده است:
``جاوا اسکریپت
React، { useState، useEffect } را از "react" وارد کنید.
تابع مثال() {
const [count, setCount] {{0}} useState(0);
useEffect(() => {
document.title=«شما ${count} بار کلیک کردید»؛
}، [شمارش])؛
بازگشت (
شما {count} بار کلیک کردید
);
}
```
در این مثال، ما از useEffect برای به روز رسانی عنوان صفحه هر بار که شمارنده به روز می شود استفاده می کنیم. یک آرایه حاوی متغیر count را به useEffect میفرستیم، که به React میگوید فقط زمانی که تعداد تغییر میکند تابع را فراخوانی کند.
useContext
قلاب useContext برای دسترسی به دادههایی که در یک ارائهدهنده زمینه ذخیره میشوند استفاده میشود. Context راهی برای به اشتراک گذاشتن داده ها بین اجزاء بدون انتقال آن از طریق props است.
برای استفاده از useContext، ابتدا باید با استفاده از تابع createContext یک ارائه دهنده زمینه ایجاد کنیم. سپس می توانیم از useContext برای دسترسی به داده های ذخیره شده در ارائه دهنده استفاده کنیم. در اینجا مثالی از نحوه استفاده از useContext آورده شده است:
``جاوا اسکریپت
وارد کردن React, { useState, useContext } از "react";
const ThemeContext=React.createContext("light");
تابع مثال() {
const [theme, setTheme]=useState("light");
بازگشت (
);
}
تابع Toolbar() {
const theme=useContext(ThemeContext);
بازگشت (
موضوع فعلی این است: {theme}
);
}
```
در این مثال، ما از useContext برای دسترسی به متغیر تم ذخیره شده در ارائه دهنده ThemeContext استفاده می کنیم. میتوانیم متغیر تم را با کلیک کردن روی دکمه در مؤلفه Example بهروزرسانی کنیم.
استفاده از کاهش دهنده
قلاب useReducer برای مدیریت وضعیت پیچیده در اجزای عملکردی استفاده می شود. شبیه به useState hook است، اما به جای به روز رسانی مستقیم حالت، از یک تابع کاهنده برای به روز رسانی حالت استفاده می کند.
یک تابع کاهنده دو آرگومان می گیرد: وضعیت فعلی و یک شی عمل. بر اساس عملی که انجام شده است یک حالت جدید برمی گرداند. قلاب useReducer تابع کاهنده و حالت اولیه را به عنوان آرگومان می گیرد و یک آرایه حاوی وضعیت فعلی و یک تابع اعزام را برمی گرداند که می تواند برای انجام اقدامات مورد استفاده قرار گیرد. در اینجا مثالی از نحوه استفاده از useReducer آورده شده است:
``جاوا اسکریپت
وارد کردن React, { useReducer } از "react";
کاهش دهنده عملکرد (وضعیت، عمل) {
سوئیچ (action.type) {
مورد "افزایش":
return { count: state.count + 1 };
مورد "کاهش":
return { count: state.count - 1 };
پیش فرض:
خطای جدید ();
}
}
تابع مثال() {
const [state, dispatch] {{0}} useReducer(reducer, { count: 0 });
بازگشت (
شما روی {state.count} بار کلیک کردید
);
}
```
در این مثال، ما از useReducer برای مدیریت وضعیت یک شمارنده استفاده می کنیم. ما یک تابع کاهنده را ارسال می کنیم که متغیر count را بر اساس عمل انجام شده به روز می کند. سپس از تابع dispatch برای انجام اقدامات استفاده می کنیم.
نتیجه گیری
Hooks مدیریت وضعیت در برنامههای React را آسانتر از همیشه کرده است. آنها به ما اجازه می دهند کامپوننت های کاربردی ایجاد کنیم که می توانند از حالت و سایر ویژگی های React استفاده کنند، بدون اینکه نیازی به استفاده از مولفه های کلاس داشته باشیم. در این مقاله، رایجترین قلابهای مورد استفاده در React را مورد بحث قرار دادهایم: useState، useEffect، useContext و useReducer. ما همچنین نمونه هایی از نحوه استفاده از این هوک ها در انواع مختلف برنامه های React را ارائه کرده ایم.
با درک نحوه کار هوک ها و نحوه استفاده از آنها، می توانید کدهای کارآمدتر و قابل نگهداری را در برنامه های React خود بنویسید. اگر قبلاً این کار را نکردهاید، ما شما را تشویق میکنیم که از هوکها در پروژههای خود استفاده کنید و مزایایی را که برای گردش کار توسعهتان به ارمغان میآورند تجربه کنید.