יצירת Higher Order Component עם Function Components

תמלול ההרצאה: יצירת Higher Order Component עם Function Components

הטקסט המלא של הדקות הראשונות בהרצאה «יצירת Higher Order Component עם Function Components» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.

1. 00:02

   הפי הבא שמאפשר לנו to reuse code נקרא hire order component או בקיצור הוק זה בעצם משהו ממש מעניין זה קומפוננטה שאנחנו יכולים לבנות שמקבלת קומפוננטה אחרת כאינפוט עושה עליה איזושהי מניפולציה איזשהו צ'יינג אולי צ'יינג' ב-UI עצמו, אולי צ'יינג' בפונקציונליות, אנחנו מחליטים מה אנחנו בעצם רוצים לבצע, ומחזירה את עצמה בעצם, את הקומפוננטה,

2. 00:44

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

3. 01:03

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

4. 01:11

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

5. 01:35

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

6. 01:51

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

7. 02:20

   אבל אחרי שהיא עשתה לה את ה-change הזה אז זה קטע שיהיה מעניין לבנות בואו נבנה את הקומפוננטה הזאת ולאחר מכן נשתמש בה אז אנחנו רוצים שהקומפוננטה הזאת תהיה basically כללית ותתאים לכל הקומפוננטות באפליקציה זה לא משהו ששייך רק ל-Home Area או רק ל-Support או רק ל-Contact As,

8. 02:49

   אפשר להשתמש איתה בכל מקום. אז ראינו קומפוננטה שאנחנו רוצים לבנות בכל מקום, הגיוני שהיא תהיה ב-Shared, איפה שבנינו כאן משהו שמשותף לכולם. אז בואו ניגש ונייצר לעצמנו Create FC, Functional Component, ונכניס את זה לתוך ה-Shared Area, ונקרא לקומפוננטה הזאת Background by Hour.

9. 03:20

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

10. 03:40

    אין לנו שום State או Props במקרה הזה. בואו נצרף אותה והנה היא פה יש לה סך הכל זה קומפוננטה רגילה functional קומפוננט יש לה את העיצוב שלה ואנחנו רוצים לבנות אותה אז איך אנחנו בונים higher order component higher order component זה פשוט קומפוננטה שאנחנו בונים הנה היא זאת שמקבלת לסוגריים במקום props מקבלת function

11. 04:20

    היא מקבלת קומפוננטה אחרת גם אם היא מקבלת functional קומפוננט וגם אם היא מקבלת קלאס קומפוננט בסופו של דבר ב-JavaScript גם קלאס זאת פונקציה.

12. 04:35

    אז בואו נקרא למשתנה הזה Inner Component. אני בכוונה קורא לו Inner Component. אני בכוונה קורא לו עם איי גדולה מפני שזה קומפוננטה ששולחים אליי. אז יש לי פה inner component והסוג שלו זה function.

13. 05:01

    יש סוג כזה בטייפ סקריפט שנקרא function. ומה שאנחנו מחזירים זה לא html רגיל, זה גם function. כי אם קיבלנו function, אנחנו רוצים לעשות עליה איזשהו change ולהחזיר function.

14. 05:20

    בואו רגע את זה נשים בהערה. אז כאן מה שאנחנו רואים זה שיש לנו קומפוננט מוזרה כזאת, פונקציה, קראנו לה component background by arrow, זה בסדר והיא מקבלת קומפוננט ומחזירה קומפוננט, עושה עליה איזה שהוא צ'יינג.

15. 05:41

    מה אנחנו בעצם מחזירים? אנחנו יכולים to return a functional component or class component. ברוב המקרים מחזירים functional component, נעשה את שניהם.

16. 05:57

    בואו נחזיר function וזאת הפונקציה, אני כאילו מחזיר פונקציה בחזרה. פונקציה שאני מחזיר צריכה לקבל כאן props בדרך כלל ה-props יהיו any כי אני בעצם רוצה לאפשר לקבל את ה-props של הקומפוננט שמפעיל אותי.

17. 06:30

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

18. 06:46

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

19. 06:59

    ועכשיו מה שקורה זה שאנחנו בנינו קומפוננטה שמחזירה קומפוננטה, הרי פאנקשן בסופו של דבר זה קומפוננטה, והקומפוננטה שהיא מחזירה יש לה איזשהו UI, שתכף אנחנו נסדר את ה-UI הזה, ובתוכו יש את ה-Inner Component שה-Inner Component מקבל את ה-Pops שלנו.

20. 07:41

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