PracticU

יצירת Higher Order Component עם Class Component

בלי כתוביותעם כתוביות
PracticU › קורס ריאקט - React › יצירת Higher Order Component עם Class Component
מילון מושגים:
רכיב - יחידת בניין עצמאית וניתנת לשימוש חוזר בתוך מערכת או ממשק משתמש, שאחראית על חלק מוגדר מהתפקוד.
מחלקה - תבנית בתכנות מונחה עצמים שמגדירה אילו נתונים ופעולות יהיו לאובייקטים שנוצרים ממנה.
סטייט - המידע על מצבו הנוכחי של רכיב או אפליקציה בזמן נתון, שמשתנה ומשפיע על מה שמוצג.
פונקציה - קטע קוד בעל שם שמבצע משימה מוגדרת, מקבל ערכי קלט (פרמטרים) ויכול להחזיר תוצאה. מאפשרת לארגן קוד ולהשתמש בו שוב.
יצירת Higher Order Component עם Class Component
Higher Order Component לא חייב להחזיר Functional Component - אפשר להחזיר ממנו Class Component, במיוחד כשצריך יכולות שקיימות רק בקלאס, כמו Lifecycle Hooks או State.
השלבים העיקריים
1. מה משתנה: במקום להחזיר פונקציה אנונימית, מחזירים קלאס אנונימי שיורש מ-Component.
2. הגדרת Props: מגדירים את ה-props מסוג any, בדיוק כמו בגרסה הפונקציונלית, כי לא ידוע מראש מה הפרופס שישלחו.
3. מתודת render: הקלאס מכיל מתודת render ציבורית שמחזירה JSX Element - בדיוק את הקוד שבגרסה הפונקציונלית הוחזר כ-return.
4. שימוש ב-this: בתוך render משתמשים ב-this.props במקום בגישה הישירה שהייתה בפונקציה, כי מדובר כאן בקלאס קומפוננט.
5. השתלת ה-Inner Component: בתוך ה-render מציבים את ה-InnerComponent (הקומפוננט שהתקבל) עם הפרופס המתאימים, בתוך אותו style שחושב לפי השעה.
שימו לב
הבחירה בין Functional ל-Class לה-wrapper (ה-HOC עצמו) ולקומפוננט שמוחזר ממנו הן שתי החלטות נפרדות - אפשר לשלב ביניהן בכל צירוף.
כך אפשר לבנות Higher Order Component שמחזיר קלאס קומפוננט כשיש צורך בלוגיקה שקיימת רק בקלאס.
השיעור הבא בקורס: בניית Custom React Hook

פרקי ההרצאה: יצירת Higher Order Component עם Class Component

  1. 00:00

    החזרת Class במקום Functional Component

  2. 00:38

    מתי מחזירים Class Component

  3. 01:21

    החזרת Anonymous Class

  4. 02:25

    הלוגיקה עם this

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

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

  1. 00:02

    כאשר אנחנו בנינו את ה-Higher Order Component שלנו, אנחנו בנינו אותה עם Functional Component שזה בדרך כלל מה שעושים, אבל אנחנו החזרנו כאן Functional Component וזה ממש בסדר.

  2. 00:16

    מה שאני רוצה להראות עכשיו זה אולי אתם רוצים להחזיר Class Component במקום Functional Component, כי יש לכם הרבה דברים שקשורים ל-Class שאתם רוצים לבצע ב-Higher Order Component, או במעטפת הזאת, כמו Lifecycle הוקס, אולי אתם רוצים להשתמש ביכולת של ה-State של הקלאס, לכן אתם לפעמים רוצים להחזיר קלאס קומפוננט

  3. 00:41

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

  4. 00:55

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

  5. 01:12

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

  6. 01:34

    משהו מוזר איזה יופי הנה קלאס לא נתתי לה שם ומיד אמרתי שהיא יורשת את מה היא יורשת? קומפוננט אין לי צורך כרגע בסטייט יש לי צורך רק בפרופס נשים פרופס any כי אנחנו בעצם לא יודעים איזה פרופס הולכים לשלוח לנו זה בדיוק כמו זה ואנחנו רוצים to create public render ממש כאילו שאני קומפוננטה שמחזירה jsxElement קלאס קומפוננט

  7. 02:06

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

  8. 02:39

    פרופס, כי אנחנו קלאס קומפוננט, אז יש לנו this, מכל זה אנחנו יכולים להיפטר ויש לנו פה משהו ממש מגניב יש לנו פה פונקציה functional component שאנחנו בונים זה ה higher order component והיא מחזירה סוג של wrapper מעטפת שמקודם החזרנו functional component שעטפה אבל כרגע אנחנו מחזירים class component אנונימוס

  9. 03:04

    קלאס שיש לו איזושהי לוגיקה איזשהו סטייל מסוים יש לה פונקציית render שמחזירה ג'י אס אקס אלמנט והיא מקבלת או שהיא שמה את האינר קומפוננט

לקורס המלא: קורס ריאקט אונליין

ההרצאה הקודמת: שימוש Higher Order Component עם FC

ההרצאה הבאה: בניית Custom React Hook

הרצאות קשורות מקורסים אחרים

  • The R Class
  • Component Testing
  • Component Communitaction
  • Static Class

קורסים נוספים במסלול

  • קורס יסודות HTML - בניית אתר אינטרנט פשוט
  • קורס CSS 3 - בדגש על Flex & Grid
  • קורס Javascript כולל JQuery
  • קורס ג'אווה סקריפט מעשי - JavaScript
  • קורס TypeScript
  • קורס NodeJS