אולי אתה כבר יודע על ווים של React ואפילו איזה ווים בסיסיים המסגרת מציעה. Hooks מאפשרים לך לנהל מצב ותכונות אחרות מבלי שתצטרך לכתוב מחלקה. הווים הבסיסיים הם useState, useEffect, ו useContext. במאמר זה תלמדו על כמה ווים נוספים שמוסיפים התנהגות מסובכת יותר.

הווים הנוספים שאתה תלמד הם useRef ו השתמש ב-Memo.

useRef

ה useRef הפונקציה מחזירה אובייקט ref ניתן לשינוי ומאתחלת שלו .נוֹכְחִי רכוש לטיעון שעבר. לעתים קרובות אנשים מבלבלים את השימוש ב useRef וו עם useState וו. אתה יכול להורות להוק הזה להחזיק את ההפניה של an אלמנט HTML. באמצעות הפניה זו, אתה יכול לתפעל בקלות את הרכיב הזה.

ה useRef להוק יש רק תכונה אחת: .נוֹכְחִי. React לא מעבד מחדש את הדף כאשר האלמנט שלו משתנה. זה גם לא מעבד מחדש אם אתה משנה את הערך של ה-.נוֹכְחִי תכונה. בואו נבין את השימוש בקרס זה עם דוגמה:

ייבוא ​​React, { useState, useRef } מתוך 'react';
ייצוא פונקציית ברירת המחדל App() {
const count = useRef (null);
const [מספר, setNumber] = useState (0);
const checkNumber = () => {
if (count.current.value < 10) {
count.current.style.backgroundColor = "אדום";





instagram viewer


} אחר {
count.current.style.backgroundColor = "ירוק";
}
};
לחזור (


הזן מספר גדול מ-10

ref={count}
type="text"
value={number}
onChange={(e) => setNumber (e.target.value)}
/>
 checkNumber()}>לחץ



);
}

בקוד לעיל, הצבע של רכיב הקלט משתנה בהתאם למספר שתזין בתיבת הקלט. ראשית, הוא מקצה את התוצאה מה- useRef() וו ל לספור מִשְׁתַנֶה. ישנם שני אלמנטים: קלט וכפתור. לרכיב הקלט יש את הערך של מספר וה ref המאפיין של תג הקלט הוא לספור כדי להתאים את המשתנה.

כאשר אתה לוחץ על הכפתור, ה checkNumber() הפונקציה נקראת. פונקציה זו בודקת אם הערך של ה- מספר גדול מ-10. זה אז מגדיר את צבע הרקע של רכיב הקלט באמצעות ה- count.current.style.backgroundColor תכונה.

קָשׁוּר: יסודות CSS: עבודה עם צבעים

השתמש ב-Memo

ה-useMemo hook יחשב מחדש ערך שמור כאשר כל התלות שלו משתנה. אופטימיזציה זו עוזרת למנוע חישובים יקרים בכל עיבוד.

התחביר של ה השתמש ב-Memo וו הוא כדלקמן:

const memoizedValue = useMemo(() => computeExpensiveValue (a), [a]);

להבנה טובה יותר, הבה נשקול דוגמה. הקוד שלהלן מחליף את הצבעים של שתי כותרות. זה קורא ל useState וו כדי לעקוב אחר הערכים שלהם. פונקציה מראה אם ​​הצבע חם או קר לפי ערכו. לפני החזרת הסטטוס של הצבע, יש לולאת while שנעצרת למשך שנייה אחת בערך. זה למטרות הדגמה, כדי להסביר את התועלת של השתמש ב-Memo וו.

ייבוא ​​React, { useState, useMemo } מתוך 'react';
ייצוא פונקציית ברירת המחדל App() {
const [color1, setColor1] = useState("blue");
const [color2, setColor2] = useState("green");
const toggleColor1 = () => {
להחזיר צבע 1 "כחול"? setColor1("red"): setColor1("blue");
};
const toggleColor2 = () => {
צבע 2 "ירוק"? setColor2("כתום"): setColor2("ירוק");
};
const displayColor = () => {
var now = new Date().getTime();
while (new Date().getTime() < now + 1000);
להחזיר צבע 1 "כחול"? "מגניב": "חם";
};
לחזור (


טקסט 1 צבע: {color1}

צבעו {displayColor()}

החלף צבע
צבע טקסט 2: {color2}

החלף צבע



);
}

כאשר אתה לוחץ על לחצן toggle1, אתה אמור לשים לב לעיכוב קל בזמן שהמצב משתנה. שימו לב שיש גם עיכוב כשאתה לוחץ על לחצן toggle2. אבל זה לא אמור לקרות, מכיוון שההפסקה של שנייה אחת מתרחשת ב צבע תצוגה. בעמוד זה, הכפתורים צריכים להיות מסוגלים לפעול באופן עצמאי. כדי להשיג זאת, אתה יכול להשתמש ב- השתמש ב-Memo וו.

אתה צריך לעטוף את צבע תצוגה פונקציה ב השתמש ב-Memo הוק ומעבר צבע 1 במערך התלות.

const displayColor = useMemo(() => {
var now = new Date().getTime();
while (new Date().getTime() < now + 1000);
להחזיר צבע 1 "כחול"? "מגניב": "חם";
}, [צבע1]);

ה השתמש ב-Memo hook לוקח פונקציה ואת התלות כפרמטרים. ה השתמש ב-Memo hook יעבד רק כאשר אחת מהתלות שלו משתנה. זה שימושי במצבים שבהם אתה צריך לאחזר מ-API.

מה לעשות הלאה לאחר לימוד הוקס

ווים הם תכונה חזקה מאוד ונעשה בהם שימוש נפוץ בפרויקטים של React. הם מספקים פוטנציאל רב לאופטימיזציה. אתה יכול לתרגל ווים על ידי בניית פרויקטים קטנים כמו טפסים או מוני שעון.

יש עוד ווים מתקדמים כמו useReducer, useLayoutEffect, ו useDebugValue. אתה יכול ללמוד אותם על ידי הפניה לתיעוד הרשמי של React.

Unnati Bamania (10 מאמרים שפורסמו)

Unnati הוא מפתח Full stack נלהב. היא אוהבת לבנות פרויקטים תוך שימוש בשפות תכנות שונות. בזמנה הפנוי היא אוהבת לנגן בגיטרה וחובבת בישול.

עוד מאת Unnati Bamania