אין ספק שמהרגע שריאקט שחררו לנו את הוקס (ריאקט 16.8) הם די שינו את הדרך בה אנו חושבים וכותבים קומפוננטות וקצת דחפו אותנו לכתוב יותר פונקציות מאשר קלאסים. אם עד עכשיו היינו צריכים להשתמש ברנדר פרופס או HOC כדי לשתף לוגיקה אז תכירו את השחקן החדש בשכונה, custom Hook.
custom Hook מאפשר לנו לחלץ את הלוגיקה מהקומפוננטה שלנו לפונקציה שבה נוכל להשתמש בכל מקום שנצטרך. ובעצם לחסוך קוד מיותר.
custom Hook הוא בסך הכל פונקציית ג׳אווהסקריפט שיש לה תחילית 'use' (לפי הדוקס של ריאקט מומלץ להשתמש בתחילית הזאת מכיוון שכך ריאקט יכולה לבדוק אם השתמשתם נכון בהוקס) ויכולה לקרוא להוקס נוספים.
חשוב לזכור שקומפוננטות והוקים הם פונקציות, כך שאנחנו באמת לא יוצרים כאן איזה משהו חדש, אנחנו רק מעבירים את הלוגיקה שלנו לפונקציה אחרת כדי להפוך אותה לזמינה לשימוש חוזר.
אם אתם משתמשים בהוקס אני מאמין שהקונספט הזה יהיה לכם ממש ברור ותתחילו להשתמש בו די מהר בפרוייקטים שלכם.
יצירת הוק חדש
בואו נייצר הוק שידע לחשב בזמן אמת את הגודל הנוכחי של הדפדפן. ההוק הבא יחזיר אובייקט המכיל את רוחב החלון וגובהו.
כמובן שיכלנו לרשום את זה בתוך הקומפוננטה אבל תחשבו על מצב שבו יש כמה קומפוננטות שצריכות את המידע הזה,לא נרצה לכתוב את אותו קוד כמה פעמים.
כרגע אנחנו מחזירים את הגובה והרוחב הנוכחי אבל אנחנו כמובן יכולים לשנות את מה שההוק עושה ולמשל לבדוק אם הגובה קטן מ-700 ולהחזיר משתנה בוליאני ובפונקציה שנקרא להוק הזה נשנה עיצוב לפי אותו בוליאני שחוזר מההוק. בקיצור אנחנו יכולים לקחת את זה לאיזה כיוון שנרצה ולרשום כל הוק שיכול לעזור לנו.
כדי להשתמש בהוק שיצרנו – כל מה שנצטרך לעשות הוא לייבא אותו ולקרוא לו בקומפוננטה שאנחנו רוצים, לדוגמא:
חשוב מאוד להבין שאמנם אנחנו משתפים לוגיקה אבל אנחנו לא משתפים state. לדוגמא אם נרשום הוק שמממש counter של לחיצות עכבר ונשתמש בהוק במספר קומפוננטות שונות, כל קומפוננטה תציג את מספר הקליקים שנלחצו בה ולא תשפיע על שאר הקומפוננטות.
תהיו הראשונים לדעת!
הרשמו לניוזלטר שלנו וקבלו התראות על מאמרים חדשים ישירות למייל
ההוקים איתנו כבר תקופה ואנחנו לא רוצים להמציא את הגלגל. אם אתם צריכים הוק שנראה לכם שהוא כנראה נפוץ אז בטח מישהו כבר כתב אותו. אתר חביב שאני ממליץ להסתכל בו הוא https://usehooks.com יש שם כל מיני הוקים טובים וכמובן גוגל, אני בטוח שתמצאו מימושים טובים או רעיונות וגם תוכלו לראות איך אנשים אחרים כותבים הוקים. אם יש לכם רעיונות להוקים חדשים או בא לכם לשתף בהוקים שכתבתם מוזמנים לכתוב הכל בתגובות מתחת או לדבר איתי בלינקדין. תודה שקראתם עד כאן 🙂
6 Responses
נהנה מכל פוסט, תודה רבה
1. קודם כל תודה על ההסבר
2. הורס זה אומנם פונקציות, אבל זה לא פונקציות רגילות. הם נכנסות כחלק מהלייף סייקל בתהליך הרנדור של ריאקט ולכן אתה לא פשוט קורא אותם מלמעלה למטה ברגיל כתהליך סינכרוני.
אם משתמשים בהןקים נוספים בפנים חייב להבין מתי הם נקראים ומתי לא אחרת אתה הולך לאיבוד מהר מאוד.
הם מרימים את הרמה של ה אבסטרקציה והופכים את הקוד לקריא יותר אבל מבחינת סדר הרצת הקוד זה לא כזה טריוויאלי.
היי חן
קודם כל תודה על התגובה המפורטת.
לגבי סעיף 2 שרשמת. אתה לגמרי צודק אבל התכוונתי ברמת הפשט שקוסטום הוקס זה בסוף פונקציה 🙂
כמובן שאם משתמשים בלייף סייקל או בקוסטום הוקס אחר בתוך הקוסטום הוק שלך דברים יכולים להסתבך וצריך לשים לב מי נקרה ומתי.
מדהים וברור!
מדהים !
תודה רבה!!
על הסבר המושלם