PracticU

הדגמה של Decorators

בלי כתוביותעם כתוביות
PracticU › קורס ריאקט - React › הדגמה של Decorators
מילון מושגים:
סטייט - המידע על מצבו הנוכחי של רכיב או אפליקציה בזמן נתון, שמשתנה ומשפיע על מה שמוצג.
אובייקט - יחידה בתכנות מונחה עצמים שמאגדת נתונים (תכונות) ופעולות (מתודות). נוצר בדרך כלל ממחלקה המשמשת כתבנית.
הערה - טקסט בקוד שמסביר אותו לבני אדם ואינו מבוצע על ידי המחשב.
רכיב - יחידת בניין עצמאית וניתנת לשימוש חוזר בתוך מערכת או ממשק משתמש, שאחראית על חלק מוגדר מהתפקוד.
פונקציה - קטע קוד בעל שם שמבצע משימה מוגדרת, מקבל ערכי קלט (פרמטרים) ויכול להחזיר תוצאה. מאפשרת לארגן קוד ולהשתמש בו שוב.

הדגמה של Decorators
במקום להגדיר ב-makeObservable מה התפקיד של כל חבר ב-state, אפשר לסמן זאת ישירות מעל החברים עם decorators. ההרצאה ממירה את ה-state של רשימת המכולת לשיטה הזו.
השלבים העיקריים
1. אישור ב-tsconfig: מוסיפים experimentalDecorators: true.
2. ביטול ההגדרה הישנה: האובייקט עם ההגדרות ב-makeObservable הועבר להערה. עדיין קוראים ל-makeObservable, ושולחים לו רק את this, כי ההגדרות עצמן מופיעות כעת מעל הרכיבים.
3. סימון מעל הרכיבים: @observable מעל items, @action מעל כל אחת משלוש הפונקציות, ו-@computed מעל totalItems ו-totalAmount. גם observable ו-computed הם decorators.
4. בדיקה: מוסיפים לחם ופירות ואייס קרים, ואחר כך מוחקים. הכול עובד כמו קודם.
שימו לב
המרצה מדגיש שזה לא חוסך ביצועים או זמן כתיבה, אלא רק קוד ברור וויזואלי יותר. שתי השיטות תקינות, ואפשר לבחור את זו שנוחה לכם.
עכשיו אפשר להגדיר state של MobX בשתי דרכים: אובייקט הגדרות או decorators.
השיעור הבא בקורס: הסבר על Reactions ב-MobX

פרקי ההרצאה: הדגמה של Decorators

  1. 00:00

    אישור Decorators ב-tsconfig

  2. 00:40

    הגדרה מעל המרכיבים עצמם

  3. 01:18

    make observable עם דקורטורים

  4. 01:54

    הגדרת action מעל הפונקציות

תמלול ההרצאה: הדגמה של Decorators

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

  1. 00:02

    טוב, אז אחרי שהבנו מה זה בגדול, כן? Decorators, בואו נשלב אותם כאן. דבר ראשון, נלך ל-tsconfig ונאשר שימוש בדקורטורס. Experimental Decorators true.

  2. 00:20

    ביי ביי. אנחנו סוגרים את הקובץ הזה ואנחנו חוזרים ל-Grocery List State שלנו כאן. ומה שעשינו כאן זה הגדרנו מה הם כל הפריטים השונים או המרכיבים השונים שיש לנו בתוך המחלקה שמהווה את הסטייט שלנו והגדרנו את זה כאן.

  3. 00:42

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

  4. 01:06

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

  5. 01:27

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

  6. 01:56

    האלה אקשן, בואו ניקח את האקשן מעל הראשון, שני,

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

ההרצאה הקודמת: הסבר על Decorators

ההרצאה הבאה: הסבר על Reactions ב-MobX

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

  • הדגמה של הרובוט
  • הדגמה של Singleton - חלק 1
  • הדגמה של DRS
  • הדגמה של RESTCONF

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

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