במדריך זה נלמד מה זה בעצם ריאקט הוקס למה הם נוצרו ואיך להשתמש ביכולות החדשות שמגיעות איתו.
הדוגמאות יהיו בריאקט אך למעשה אין הבדל מהותי מהווב לנייטיב למעט סוגי התגיות.
מה זה ריאקט הוקס
הוקס הגיחו לאוויר העולם בגרסא 16.8 של ריאקט וכעת נותנים לנו יכולות שהיו לנו עד היום בקומפוננטות שהן קלאס גם בפונקציות
באופן די מהיר לאחר שהוקס הגיעו לווב הוא שוחרר גם לריאקט נייטיב החל מגרסא 0.59 וכעת גם בפיתוח למובייל אנחנו יכולים להנות מהפיצר הנפלא הזה.
לדעת רבים ריאקט הוקס מבשר את ״מותם״ של הקלאסים בריאקט אך במדריך הרשמי של ריאקט פרסמו כי אין חשש מלהמשיך להשתמש בקלאסים וכי הם לא מתכוונים להפסיק לתמוך בהם.
למה בעצם ריאקט הוקס
כיום, יש הרבה דרכים לעשות שימוש חוזר בלוגיקה בריאקט. אנחנו יכולים לכתוב פונקציות פשוטות ולקרוא להם בכל פעם שנרצה לממש אותן. אנחנו יכולים גם לכתוב קומפוננטות (פונקציות או קלאסים). לקלאסים יש יותר כח אבל הם צריכים לדאוג לרנדור של ממשק המשתמש, מה שמביא אותי לחסרון שלהם. לא נוח לשתף באמצעותם לוגיקה( stateful logic) כדי לשתף לוגיקה בין קלאסים נמצא את עצמינו משתמשים ב- Mixins ,מעבירים פרופס או עושים שימוש ב HOC.
פתרונות אלה דורשים מאיתנו בעצם לבנות מחדש/לשנות את הקומפוננטה שלנו כאשר נרצה להשתמש בה, כל הדברים הנל יגרמו לקוד שלנו להיות מסורבל יותר, קשה יותר להבנה וקשה יותר לדבג אותו. המנוסים יותר בינינו בטח מכירים את המושג ״wrapper hell״. עטיפה של קומפוננטה ב HOC תגרום ל-״בלאגן״ וקושי רב בהתמצאות ב react devtools. חסרון נוסף הוא שלא נוכל לדעת איזה מידע אכן הגיע מה HOC ואיזה מידע הועבר לקומפוננטה. הוקס מאפשרים לנו לחלץ לוגיקה מקומפוננטות כך שנוכל להשתמש בהם שוב ושוב בכל מקום שנרצה בלי לשנות את מבנה ההיררכיה.
תהיו הראשונים לדעת!
הרשמו לניוזלטר שלנו וקבלו התראות על מאמרים חדשים ישירות למייל
קומפוננטות מורכבות הופכות עם הזמן קשות להבנה-
לקומפוננטות בעלות state שעד היום היו קלאסים יש נטייה להיות מראש גדולות מכיוון שהן מחזיקות את כל הניהול הלוגי בתוכן ומעבירות מידע לפונקציות קטנות שתפקידן להציג מידע. בנוסף מוצר תמיד גודל תמיד יש דרישה לפיתוח של פיצ׳ר חדש, הוספת יכולות או שינויים שנדרשו עם הזמן ומכילים לוגיקה נוספת ב- state.
מה שהופך אותן למסובכות להבנה ככל שהן גדולות הם ה lifeCycle methods(מחזורי חיים)
כל מחזור חיים של קומפוננטה ככל הנראה יכיל לוגיקה של מספר דברים אשר אין ביניהם קשר בכלל! לדוגמא ארצה לפנות לשרת לקבלת מידע בכל פעם שהקומפוננטה נטענת אשתמש ב componentDidMount.
עם זאת ב- componentDidMount יכול להיות עוד הרבה קוד שלא קשור לפנייה לשרת כגון האזנה לאירועים או אפילו מספר פניות לשרת שלא קשורות אחת לשנייה. בהרבה מקרים לא נוכל לשבור את הקומפוננטה כי הלוגיקה של ה state צריכה להשמר וכבר מועברת להמון קומפוננטות אחרות.
כדי לפתור את הבעיה הזאת הוקס מאפשר לנו לפצל קומפוננטה אחת לפונקציות קטנות יותר על סמך ההגיון הלוגי שמשותף להם.
קלאסים בריאקט-
לפי הצוות של ריקאט הם מצאו שקלאסים יכולים להיות מכשול גדול בלמידת ריאקט. צריך להבין איך קלאסים עובדים בגאווהסקריפט ואת השוני בהתנהגות ביניהן לבין קלאסים ברב השפות אני נוטה לא להסכים איתם בנושא הזה מכיוון שלדעתי לא נכון להכנס וללמוד ריאקט אם אתה לא מבין גאווהסקריפט.
מפתחי גאווהסקריפט מתחילים וגם מנוסים נוטים להתבלבל בשאלה. מה ה-(context (this של אותה מתודה שרצה.
עם הזמן גדל השימוש במתודה bind בקלאסים, דוגמה טובה לכך הינה events שמשנים את הcontext. ולכן היה צורך להחזיר ולשייך את ה הcontext של המתודה מחדש לקלאס ולא ל-event
הצוות של ריאקט תמיד מנסה לשפר את הספריה ואת זמני הטעינה. בניסויים שהם ערכו לטענתם הם הציגו תוצאות הרבה יותר טובות באמצעות שימוש בפונקציות לעומת קלאסים. בנוסף הם אומרים ש- minify לא עובד בצורה כל כך יעילה עם קלאסים ו- Hot Reload לא עובד תמיד בצורה טובה ואמינה. הם רוצים לבנות API שיהיה אופטימלי מבחינת אופטימיזציה ככל הניתן וכאן הוקס נכנס שוב.
כל אלה בעצם הובילו לפיתוח של הוקס.
חשוב לציין
-עבודה עם הוקס לא תשתף state בין פונקציות אלה רק את הלוגיקה של העבודה עם ה- state.
– לא כל הפיצרים של קלאס נתמכים(getSnapshotBeforeUpdate and componentDidCatch) אבל הצות של ריאקט אומרים שהם עובדים על זה ובעתיד הקרוב נוכל לעשות את כל מה שעשינו בקלאסים גם בפונקציות בעזרת הוקס.
הגיע הזמן לקצת קוד
בפוסט זה נתעסק ביצירת state בתוך פונקציה, בכל שאר הפיצרים של הוקס נעסוק בפוסט הבא.
בדוגמא הבאה ניצור counter שייצג את מספר הפעמים שלחצנו על כפתור מסויים
אז איך מתחילים:
תחילה נצטרך לייבא מתוך ריקאט את היכולת להשתמש ב useState.
לאחר שייבאנו את Usestate נוכל להתחיל להשתמש בו בתוך הפונקציה כאשר נרצה לייצר state לוקאלי.
useState מחזיק 2 ערכים: ערך נוכחי של הstate ופונקציה שתיתן לנו את האופציה לעדכן את ה state. מכיוון שאנחנו עושים destructuring למערך אז אין בעצם משמעות לשמות של הערכים שנבחר, נוכל לבחור את שמות המשתנים לפי
מה שנח ונכון עבורינו.
הערך שנשים בתוך הסוגריים לאחר Usestate הוא הערך ההתחלתי של ה state אין בעצם הגבלה של סוג המשתנה אותו נוכל להזין(סטרינג,מספר מערך).
אז מתי בעצם ריאקט מרנדרת לנו את הקומפוננטה?
בכל פעם שקוראים לפונקציית העדכון, הקומפוננטה תתרנדר מחדש. ובלי קשר בכל פעם שהקומפוננטה מתרנדרת מחדש useState יחזיר את הערך הנוכחי של ה- state.
מכיוון שבגאווהסקריפט אפשר לכתוב פונקציות שמכילות פונקציות נוכל לקרוא לפונקציה שמעדכנת את ה- state מכל מקום.
כמו כן נוכל להשתמש ב useState מספר פעמים וכל אחד מהם יכיל את ה- state שהכרזנו עליו, לדוגמא:
;(const [age, setAge] = useState(42
;('const [fruit, setFruit] = useState('banana
עד כאן לחלק א׳ מקווה שהבנתם למה נוצר הצורך בהוקס ואיך הוא יכול לשפר לנו את הקוד. בפוסט הקרוב אציג את היכולות המתקדמות של הוקס.
אם אהבתם את המאמר אשמח אם תשתפו/תמליצו לאחרים, אם יש לכם שאלות או הערות תוכלו להשאיר אותם בתגובות מתחת.
6 תגובות
Very nice. I like
ברור מאוד..
תודה רבה
אחלה מאמר, נתן לי את ה"אומץ" להתחיל לצלול לתוך HOOKS.
ולהמלצתי נראה שכדי להוסיף לינק למאמר הבא, סתם באסה כל פעם לחזור ולחפש:)
אחלה של סיכום 🙂
המדריכים שלך מעולים אני נהנה לקרוא אותם🎉
אחלה!!!!👍