שימוש ב-useEffect - חלק 1

תמלול ההרצאה: שימוש ב-useEffect - חלק 1

הטקסט המלא של הדקות הראשונות בהרצאה «שימוש ב-useEffect - חלק 1» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.

1. 00:02

   אחרי שראינו את הריאקט הוק סט סטייט אנחנו רוצים לראות עוד ריאקט הוק מאוד נפוצה וזה ה-Use Effect. Use Effect מאפשרת לנו להריץ סייד אפקט בתוך Functional Component.

2. 00:16

   אסור לנו להריץ סייד אפקט בתוך Functional Component ישירות מפני שאז זה יגרום לכל מיני התנהגויות לא רצויות של ריאקט, הוא ירנדר לנו עוד פעם את הפונקציה שלא לצורך ויכול להיות כל מיני דברים מאוד מוזרים, כל מיני דברים שרצים כמה פעמים כשהם לא צריכים לרוץ כמה פעמים,

3. 00:36

   אז קודם כל אסור להריץ side effects ישירות בתוך functional component, לדוגמה גלישה לשרת מרוחק. לצורך כך היינו תמיד בונים class component ואז היה לנו את component did mount את הפונקציה component did mount את ה-component did update את component will unmount כל מיני life cycles כאלה שיכלנו בהם להריץ

4. 00:57

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

5. 01:25

   הזאת הייתה היה לנו כאן קיבלנו מבחוץ איזה פורמט של שעון אנחנו רוצים והיה לנו state כי אנחנו כמובן כל שנייה צריכים לעדכן את ה-UI אז מן הסתם היה לנו פה איזה שהוא state time זה בסדר וכל מיני LifeCycles הוקס ראינו שאנחנו יכולים להשתמש לדוגמה בקומפורננט

6. 01:48

   did mount בשביל להתחיל פעם ראשונה את האינטרוול להריץ פעם ראשונה אינטרוול ולשמור אותו ובקומפורנט will unmount הרגנו את הטיימר אז אנחנו רוצים לקחת את כל ה-Component הזה ולבנות אותו מחדש כ-Functional Component.

7. 02:07

   כמובן, אין צורך כרגע לבנות את כל ה-Lifecycle Hooks, אנחנו רוצים רק להבין את העיקרון של Use Effect, איך משתמשים ב-Use Effect. בואו נשים את כל זה בהערה.

8. 02:19

   נחזור לפה, מה אנחנו כן צריכים? בואו ניקח את זה, נראה לי שאנחנו נצטרך. בואו נבנה אותו, נתחיל לבנות אותו כאן. אז יש לנו function והפונקציה נקראת clock והיא מחזירה לנו gsx-element ואנחנו כן רוצים לחשוף אותה החוצה והתוכן שלה מה היא מחזירה זה פונקציית הרנדר שהייתה לנו הנה היא פה ניקח ונשים את זה כאן פשוט אני עושה אדפטציה כזאת מה-class

9. 02:55

   component ל-functional component כדי שזה יעבוד same את זה אנחנו רוצים כי כאילו אנחנו אנחנו רוצים לשמור על אותו שעון שהיה לנו לפני זה, אז כמובן יש לנו פה props, נוריד את זה.

10. 03:13

    זה מקבל את ה-props מסוג clock props, כמובן, ככה אנחנו מקבלים props ב-functional components. ואז מה שאנחנו רוצים לעשות זה קודם כל את הפונקציה getTime אנחנו רוצים לקחת ולהעביר אותה אלינו פה, פונקציה פנימית כזאת.

11. 03:41

    נוריד את התיעוד, נוריד את ה-private, אנחנו לא ממש צריכים שהיא תהיה arrow, כי זה לא קלף שאני צריך להתעסק עם this. יכלנו להשאיר arrow כמובן, אבל אין צורך. אז כאן אנחנו ניגשים ישירות ל-props, כי קיבלנו את זה פה, הנה זה.

12. 04:01

    אז הנה, get time היא יכולה להביא לנו את השעה בצורה נכונה. האמת, למה עשיתי פה if-else? אי אפשר לעשות את זה ב-trainary אחד? נראה לי שכן, לא? בואו נעשה את זה קצת יותר מקוצר עם props.mpm.

13. 04:18

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

14. 04:54

    רגע, יש לנו פה עוד איזה משהו, זה Daypart Icon, אנחנו רוצים אותו מפה, משהו מעניין שעבדנו איתו בעבר אז נחזיר גם אותו אלינו שים אותו פה אז יש פה הבדלה בין שניהם אנחנו לא מחברים אותם אנחנו רק בונים יופי זה נראה לי בסדר עכשיו בואו נטפל בסטייט הסטייט בגלל שאני פונקצ'נל קומפורננט אז אין לי את הסטייט

15. 05:23

    של הקלאס קומפורנט אני גם לא אתחיל לבנות עכשיו אינטרפייס מיותר אני פשוט אנהל את הטיים כסטייט בואו פשוט נדאג לטיים הזה וזה אומר שאנחנו רוצים להשתמש ב-use state בשביל לנהל את ה-time אז.

16. 05:45

    וכבר למדנו איך, אנחנו לוקחים פה את ה-time ופונקציה set time שמאפשרת לעדכן אותו, ושוב, זה לא קשור ל-use effect שאנחנו כבר הולכים לראות, זה בגלל שבמקרה יש לי פה state, ממש במקרה.

17. 05:59

    use state פותח ואומר לו מה ה-default value שאני רוצה לתת לו, כמובן זה generic, בוא נראה רגע מה ה-Default value שנתנו כאן למעלה, התחלנו את הפונקציה getTime, זה משהו שעשינו ב-Default, אז נעשה את אותו הדבר כאן.

18. 06:25

    והנה יש לי את ה-Time, אז אני לא צריך את ה-dis.state, ניפטר מזה. Good? All right.

19. 06:36

    כל מה שאנחנו רוצים להתחיל לעשות זה לפתוח setInterval, איפה עשינו את זה כשעבדנו עם Class Component? כשעבדנו עם קלאס קומפוננט לא יכלנו בתוך הקונסטרקטור לפתוח אינטרוול זה לא היה נכון לעשות דבר כזה.

20. 06:55

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

21. 07:11

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

22. 07:24

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

23. 07:39

    אנחנו רוצים, אין לנו דיסט, אנחנו רוצים לקרוא לפונקציה set time, נכון? אין לנו set state, יש לנו set time. בואו נקרא פשוט ל-set time, ונשלח לה את ה-time החדש.

24. 07:54

    ה-time החדש ניתן להשגה על ידי הפונקציה getTime. זה מה שאנחנו רוצים, זה כאילו נראה שזה בסדר וזה עובד וזה אסור לביצוע. למה זה אסור לביצוע?

25. 08:09

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

26. 08:20

    היא פתחה שני אינטרוולים? אני לא רוצה לפתוח שני אינטרוואנים, אני רוצה אחד. אני רוצה הרבה הרבה טיימרים, אני רוצה רק טיימר אחד.

27. 08:29

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

28. 08:53

    נרכש רגע, ניגש לקונסול, ושימו לב מה קורה. רגע, אני אנסה עוד פעם לרפרש בשביל להתחיל מחדש. תראו כמה פעמים הוא מציג לי את השעה.

29. 09:07

    כל פעם זה עולה. תראו, 30 פעמים, 36, 42, 48, 54, 60 פעמים. איך זה יכול להיות? למה הוא מציג לי 90 פעמים את השעה? עשיתי משהו פה חמור.

30. 09:25

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

31. 09:38

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