PracticU

הצגת Computed Values ב-MobX

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

הצגת Computed Values ב-MobX
הערכים המחושבים שהוגדרו ב-state מוצגים כאן בכותרת של רשימת המכולת, וההרצאה בודקת שהם מתעדכנים בכל הוספה ומחיקה.
השלבים העיקריים
1. הצגה בכותרת: בקומפוננטת הרשימה מוסיפים לכותרת את מספר הפריטים ואת הכמות הכוללת בסוגריים, באמצעות interpolation של props.groceryList.totalItems ושל props.groceryList.totalAmount.
2. בלי סוגריים של פונקציה: ה-computed מוגדר כ-getter, ולכן קוראים לו כמו משתנה. המרצה מציין שלעבוד עם משתנה קל יותר מאשר עם פונקציה, ושאי אפשר לכתוב אליו, רק לקרוא.
3. בדיקה: ברשימה ריקה רואים 0 פריטים. אחרי הוספת פריטים שני הערכים מתעדכנים, ובמחיקת פריט הם משתנים שוב.
טעויות נפוצות
בהוספת פריט נוסף עם כמות 7 הערכים שורשרו כמו מחרוזות במקום להיחבר כמספרים. המרצה הניח שזה באג, למרות שהמשתנה הוגדר כ-number, והפתרון היה להוסיף + לפני הערך כדי להפוך אותו למספר.
כעת אפשר להציג בקומפוננטה ערכים מחושבים מה-state ולראות אותם מתעדכנים בלי קוד נוסף.
השיעור הבא בקורס: הסבר על Decorators

פרקי ההרצאה: הצגת Computed Values ב-MobX

  1. 00:00

    הצגת הערכים בכותרת

  2. 00:42

    קריאה לפרופרטי ללא סוגריים

  3. 01:19

    בדיקת הערכים בתצוגה

  4. 01:57

    תיקון שרשור במקום חיבור

תמלול ההרצאה: הצגת Computed Values ב-MobX

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

  1. 00:02

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

  2. 00:30

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

  3. 01:01

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

  4. 01:19

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

  5. 01:38

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

  6. 01:59

    כן זה נאמבר אז נגיד לו תשמע בוא תהפוך לי

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

ההרצאה הקודמת: הוספת Computed Values ב-MobX

ההרצאה הבאה: הסבר על Decorators

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

  • Numeric Values
  • הסבר על values.yaml - Helm
  • תכונות מחושבות - Computed Properties - Enums
  • הצגת תמונות באפליקציה

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

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