מה זה הוקס ושימושים?
React היא אחת הספריות הפופולריות ביותר בשימוש בפיתוח אתרים כיום. זה חולל מהפכה באופן שבו יישומי אינטרנט נבנים, והפך אותו לקל ויעיל יותר מאי פעם. אחת הסיבות העיקריות לפופולריות שלה היא הצגת הוקים, שהקלו על מפתחים לנהל את המצב באפליקציות שלהם.
במאמר זה, נסקור מקרוב מה הם ווים וכיצד ניתן להשתמש בהם ביישומי React. נתחיל בדיון במושג המדינה ב-React, לפני שנמשיך להסביר מה הם ווים וכיצד הם פועלים. אנו נספק גם דוגמאות כיצד ניתן להשתמש בווים בסוגים שונים של יישומי React.
מדינה בתגובה
לפני שנוכל לדון ב-hooks, עלינו להבין תחילה את מושג המדינה ב-React. ב-React, מצב משמש לניהול הנתונים המשמשים רכיב. נתונים אלה יכולים להיות כל דבר ממחרוזת או מספר ועד מערך או אובייקט. כאשר המצב של רכיב משתנה, React מעבד מחדש את הרכיב באופן אוטומטי כדי לשקף את המצב החדש.
ישנן שתי דרכים לנהל מצב ב-React: שימוש ברכיבי מחלקה ושימוש ברכיבים פונקציונליים. רכיבי מחלקה משתמשים בשיטה מיוחדת הנקראת setState כדי לעדכן את המצב של רכיב, בעוד שרכיבים פונקציונליים מסתמכים על ווים לניהול מצב.
מה הם הוקס?
Hooks הם תכונה חדשה ב-React שהוצגה בגרסה 16.8. הם מאפשרים למפתחים להשתמש בתכונות מצב ותכונות אחרות של React ברכיבים פונקציונליים. משמעות הדבר היא שמפתחים יכולים כעת ליצור רכיבים המשתמשים ב-state מבלי צורך להשתמש ברכיבי מחלקה.
ווים מגיעים בצורות שונות, כל אחד משרת מטרה אחרת. ה-hooks הנפוצים ביותר הם useState, useEffect, useContext ו-useReducer. נדון בכל אחד מהווים הללו בפירוט רב יותר להלן.
useState
ה- useState hook משמש לניהול מצב ברכיבים פונקציונליים. הוא לוקח ערך ראשוני כארגומנט ומחזיר מערך המכיל את המצב הנוכחי ופונקציה שניתן להשתמש בה כדי לעדכן את המצב. הנה דוגמה לאופן שבו ניתן להשתמש ב-useState:
``` javascript
ייבוא React, { useState } מ-"react";
function example() {
const [count, setCount] {{0}} useState(0);
לחזור (
לחצת {count} פעמים
);
}
```
בדוגמה זו, אנו משתמשים ב-useState כדי לנהל את המצב של מונה. הערך ההתחלתי של המונה מוגדר ל-0 באמצעות useState. לאחר מכן אנו משתמשים ב-setCount כדי לעדכן את הערך של המונה בכל פעם שהלחצן נלחץ.
useEffect
הוו useEffect משמש לביצוע תופעות לוואי ברכיבים פונקציונליים. תופעות לוואי הן כל פעולה שמתבצעת מחוץ לרכיב, כגון שליפת נתונים מ-API או עדכון כותרת העמוד.
ה-useEffect hook לוקח שני ארגומנטים: פונקציה שמבצעת את תופעת הלוואי ומערך של תלות. הפונקציה נקראת בכל פעם שהרכיב מעובד והתלות משמשות כדי לקבוע מתי יש לקרוא לפונקציה. הנה דוגמה כיצד ניתן להשתמש בuseEffect:
``` javascript
ייבוא React, { useState, useEffect } מ-"react";
function example() {
const [count, setCount] {{0}} useState(0);
useEffect(() => {
document.title=`לחצת ${count} פעמים`;
}, [ספירה]);
לחזור (
לחצת {count} פעמים
);
}
```
בדוגמה זו, אנו משתמשים ב-useEffect כדי לעדכן את כותרת העמוד בכל פעם שהמונה מתעדכן. אנו מעבירים במערך המכיל את משתנה ה-count ל-useEffect, שאומר ל-React לקרוא לפונקציה רק כאשר הספירה משתנה.
useContext
ה-useContext Hook משמש לגישה לנתונים המאוחסנים בספק הקשר. הקשר הוא דרך לשתף נתונים בין רכיבים מבלי להעביר אותם דרך אביזרים.
כדי להשתמש ב-useContext, ראשית עלינו ליצור ספק הקשר באמצעות הפונקציה createContext. לאחר מכן נוכל להשתמש ב-useContext כדי לגשת לנתונים המאוחסנים בספק. הנה דוגמה לאופן שבו ניתן להשתמש ב-useContext:
``` javascript
ייבוא React, { useState, useContext } מ-"react";
const ThemeContext=React.createContext("light");
function example() {
const [theme, setTheme]=useState("light");
לחזור (
);
}
function Toolbar() {
const thema=useContext(ThemeContext);
לחזור (
הנושא הנוכחי הוא: {theme}
);
}
```
בדוגמה זו, אנו משתמשים ב-useContext כדי לגשת למשתנה ערכת הנושא המאוחסן בספק ThemeContext. נוכל לעדכן את משתנה הנושא על ידי לחיצה על הכפתור ברכיב הדוגמה.
useReducer
הוו useReducer משמש לניהול מצב מורכב ברכיבים פונקציונליים. זה דומה ל-useState hook, אבל במקום לעדכן את המצב ישירות, הוא משתמש בפונקציית מפחית כדי לעדכן את המצב.
פונקציית מפחית לוקחת שני ארגומנטים: המצב הנוכחי ואובייקט פעולה. הוא מחזיר מצב חדש על סמך הפעולה שבוצעה. ה-useReducer hook לוקח את פונקציית המפחית ואת המצב ההתחלתי כארגומנטים, ומחזיר מערך המכיל את המצב הנוכחי ופונקציית שליחה שניתן להשתמש בה לביצוע פעולות. הנה דוגמה כיצד ניתן להשתמש ב-useReducer:
``` javascript
ייבוא React, { useReducer } מתוך "react";
מפחית פונקציות (מצב, פעולה) {
switch (action.type) {
מקרה "תוספת":
החזר { count: state.count + 1 };
מקרה "הפחתה":
החזר { count: state.count - 1 };
בְּרִירַת מֶחדָל:
זרוק שגיאה חדשה();
}
}
function example() {
const [מצב, שיגור] {{0}} useReducer(reducer, { count: 0 });
לחזור (
לחצת {state.count} פעמים
);
}
```
בדוגמה זו, אנו משתמשים ב-useReducer כדי לנהל את המצב של מונה. אנו מעבירים פונקציית מפחית שמעדכנת את משתנה הספירה על סמך הפעולה שבוצעה. לאחר מכן אנו משתמשים בפונקציית השליחה כדי לבצע את הפעולות.
מַסְקָנָה
הוקס עשו את זה קל מתמיד לנהל מצב ביישומי React. הם מאפשרים לנו ליצור רכיבים פונקציונליים שיכולים להשתמש ב-state ותכונות אחרות של React, מבלי שנצטרך להשתמש ברכיבי מחלקה. במאמר זה, דנו ב-hooks הנפוצים ביותר ב-React: useState, useEffect, useContext ו-useReducer. סיפקנו גם דוגמאות כיצד ניתן להשתמש בווים אלה בסוגים שונים של יישומי React.
על ידי הבנת אופן הפעולה של הוקס וכיצד להשתמש בהם, אתה יכול לכתוב קוד יעיל יותר וניתן לתחזוקה ביישומי React שלך. אם עדיין לא עשית זאת, אנו ממליצים לך להתחיל להשתמש ב-hooks בפרויקטים שלך ולחוות את היתרונות שהם מביאים לזרימת העבודה בפיתוח שלך.