פוסט זה יעסוק בצד הטכנולוגי של הוקס ואיך אנחנו יכולים להעזר בהוקס בקוד שלנו ולאיזה שימושים.
בפוסט הקודם ראינו איך אנחנו יכולים לנהל state מקומי בתוך פונקציות בעזרת useState.
אם אתם עדיין לא יודעים מה זה הוקס ולמה הם נוצרו מוזמנים לקרוא את ריאקט הוקס חלק א׳.
useEffect Hook
בקומפננטה מסוג קלאס קיימים שלושה מחזורי חיים המוחלפים על ידי השימוש בהוק useEffect- componentDidMount componentDidUpdate, ו componentWillUnmount .
היתרון של ה useEffect הוא היכולת לקחת את שלושת מחזורי החיים הנל ולממש אותם באמצעותו.
לדוגמא ניתן לממש בעזרת useEffect:
- פנייה לשרת לקבלת מידע(fetch)
- שינויים ב- DOM
- subscription
חשוב לשים לב, שכברירת מחדל useEffect ירוץ לאחר כל רנדור של הפונקציה, כולל הרנדור הראשוני(הדבר ניתן לשינוי, ויוסבר בהמשך הפוסט).
ועכשיו קצת קוד.. קומפונטטה מסוג קלאס ומסוג פונקציה עם counter שמעדכנן את כותרת הדף(document title) מיד לאחר שריאקט מבצעת את השינויים ב- DOM. בהקשר זה יש לשים לב, לשכפול הקוד בקלאס בשני מחזורי החיים.
המצב האופטימלי הינו שזה יקרה אחרי כל רנדור – אך מחזור חיים כזה אינו קיים בקלאס.
useEffect מגדיר לריאקט שהקומפוננטה צריכה לבצע את שכתבנו בתוכה לאחר הרנדור. ריאקט זוכרת את הפונקציה שנכתבה ותקרא לה לאחר שתסיים לעשות את כל השינויים ב DOM.
קומפננטה מסוג קלאס
קומפוננטה מסוג פונקציה עם useEffect
מתי useEffect ירוץ?
כפי שכתבתי כבר, ברירת המחדל של useEffect היא לרוץ ברנדור הראשוני ובכל פעם שהקומפוננטה מתרנדרת. useEffect יודע לקבל משתנה שני מסוג מערך,מערך זה יקבע מתי useEffect יתעדכן(המקביל ל- componentDidUpdate). במידה ויש צורך ש useEffect ירוץ רק ב- on mount נעביר מערך ריק.
דוגמא למצב שנרצה ש useEffect ירוץ רק פעם אחת היא כאשר נרצה לקרוא ל API רק שהקומפוננטה נטענת
במידה ויושם ערך בתוך המערך אז useEffect ירוץ בכל פעם שיהיה שינוי בערך המשתנה, כפי שניתן לראות בדוגמה המוצגת.
תהיו הראשונים לדעת!
הרשמו לניוזלטר שלנו וקבלו התראות על מאמרים חדשים ישירות למייל
איך נשתמש ב componentWillUnmount?
ישנם מספר מקרים הדורשים ניקוי המונע דליפות זיכרון. (memory leak)
לדוגמא פניות API , הפסקה של אינטרוולים וכו..
subscription של קומפוננטה ללא הוקס:
בכדי להריץ משהו לפני שהקומפוננטה unMount יש צורך בהחזרת פונקציה מתוך useEffect.
כעת נבחן את אותה הדוגמא תוך שימוש בהוקס.
useEffect מאפשר הן ניהול של componentDidMount componentDidUpdate, ו componentWillUnmount ללא שימוש בקומפוננטה מסוג קלאס והן שימוש חוזר ושיתוף הלוגיקה.
לסיכום, לפני תחילת העבודה עם useEffect חשוב לשים לב:
- מתי וכיצד ריאקט מבצע את useEfeect.
- כיצד להחליט מתי useEfeect ירוץ.
- כיצד לנקות דליפות זכרון כאשר עושים unmounting לקומפוננטה.
useContext
useContext מספק לנו את כל הפונקציונליות שיש לנו ב- Context API
רק בתור הוק שבו ניתן להשתמש בתוך קומפוננטות מסוג פונקציה.
useContext הוא הוק חדש שמאפשר לנו לצרוך מידע מ React.createContext
useContext מקבל אובייקט של context(הערך שחוזר מ – React.createContext ) ומחזיר את הערך הנוכחי של האובייקט
בדוגמא הבאה מוצג אופן השימוש בו.
בסרטון המצורף תוכלו לראות בצורה ויזואלית איך לקחו קלאס והפכו אותו להוקס. כמה הקוד התקצר ואיך הלוגיקה מנוהלת במקום אחד.
Took @dan_abramov's code from #ReactConf2018 and visualised it so you could see the benefits that React Hooks bring us. pic.twitter.com/dKyOQsG0Gd
— Pavel Prichodko (@prchdk) October 29, 2018
בפוסט זה עסקנו בהוקס הבסיסיים והמשמעותיים יותר אבל יש עוד הוקס שכדאי להכיר
- useReducer
- useCallback
- useMemo
- useRef
- useImperativeHandle
- useLayoutEffect
- useDebugValue
אם אהבתם את המאמר אשמח אם תשתפו/תמליצו לאחרים, אם יש לכם שאלות או הערות תוכלו להשאיר אותם בתגובות מתחת.
5 Responses
איך מממשים ComponentDidUpdate בלבד?
עם if בתוך useefect
היי אסף אני לא חושב שהייתי הולך על if.
אלא על הוספה של המשתנה אותו אני רוצה לבדוק במערך התלויות של useEffect
ובבדיקה האם זה רנדור ראשוני. אם זה לא רנדור ראשוני והמשתנה אכן השתנה אני אכנס ל effect
מוזמן לקרוא את הפוסט הבא https://www.react-israel.co.il/setstate-callback-in-react-hooks/
או לראות רק את הדוגמת קוד https://gist.github.com/roeib/f5b5788e9f4c9c142af42ae66fb0b654#file-setstate4-js
היי רועי,
תודה על כל ההסברים! מעולה ממש
אשמח אם תוכל בבקשה להסביר גם על ה hooks
useCallback
useMemo
useRef
תודה
תודה על הפידבק