הסבר על MobX - Observable

בלי כתוביותעם כתוביות

מילון מושגים:

זיכרון - רכיב מהיר ונדיף שבו המחשב שומר נתונים ותוכניות בזמן ריצתם. תוכנו נמחק עם כיבוי המחשב.

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

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

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

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

React - ספריית JavaScript לבניית ממשקי משתמש מבוססי רכיבים, שפותחה על ידי פייסבוק.

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

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

הסבר על MobX - Observable

ההרצאה מראה למה רשימה שמתעדכנת בזיכרון לא מתעדכנת בתצוגה, ואיך MobX פותרת את זה בעזרת צמד של Observable ו-Observer.

השלבים העיקריים

1. הבעיה: מוסיפים לרשימה פריט חדש בכל שנייה (setInterval) ומדפיסים את groceryList.items לקונסול. המערך גדל, אבל ה-UI לא משתנה, כי אף אחד לא מודיע לקומפוננטה שהמידע השתנה.

2. העברת המידע דרך props: MobX עובדת עם props, לכן הקומפוננטה לא ניגשת ישירות למשתנה הגלובלי. מגדירים interface עם הסיומת Props, והאובייקט מגיע מהקומפוננטה האב. מסיבה זו צריך לייצא את סוג ה-state. זה זהה ב-functional component וב-class component.

3. התקנה: מתקינים שתי ספריות, mobx ו-mobx-react. השנייה מכילה הגדרות ייעודיות לקומפוננטות.

4. הצד של ה-Observable: ב-constructor של ה-state קוראים ל-makeObservable. הפרמטר הראשון הוא this, והשני אובייקט שמתאר מה התפקיד של כל חלק ב-state. כאן items מוגדר כ-observable. מאחורי הקלעים MobX הופכת אותו ל-proxy, ולכן בקונסול הוא כבר לא נראה כמערך רגיל.

5. הצד של ה-Observer: הקומפוננטה היא זו שמתבוננת בשינויים. עוטפים אותה ב-higher order component בשם observer מ-mobx-react, וכך היא מתרעננת מיד כשהמידע ב-props משתנה.

מה רואים בסוף

אחרי שני הצדדים, הפיצה החדשה מופיעה בתצוגה בכל שנייה. זה החלק הראשון מתוך ארבעה ב-MobX: Observer מול Observable. החלק הבא עוסק ב-Actions.

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

השיעור הבא בקורס: הוספת פונקציות ופעולות - MobX Actions

פרקי ההרצאה: הסבר על MobX - Observable

תמלול ההרצאה: הסבר על MobX - Observable

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

00:02
אוקיי אז הדבר הבא שאנחנו רוצים לבצע אחרי שהצגנו את הרשימה זה לנסות להוסיף פריט לרשימה ולראות אם אנחנו רואים את הפריטים החדשים מתווספים אוטומטית בתצוגה.
00:16
במקום שנתחיל להתעסק כרגע עם הקומפוננטה הזאת שכמובן אנחנו הולכים לבנות אותה בהמשך, בואו נעשה משהו הרבה יותר פשוט רק בשביל לראות את האוספה ונייצר לעצמנו איזה שהוא סט אינטרוול כזה אולי סט אינטרוול ובתוכו כל שנייה נוסיף איזה שהוא פריט חדש לרשימה נבוא לכאן ונגיד כל שנייה אנחנו פונים לגרוסרי ליסט ונוסיף לעצמנו פריט אחר לגמרי בואו נוסיף כרגע פיצה
00:52
אנחנו רוצים שתי פיצות בואו נניח שכל שנייה אנחנו מוסיפים יאללה שתי פיצות, נישאר עם אותו פריט. בנוסף אני רוצה להציג על הקונסול את רשימת הפריטים groceryList.items ואני רוצה לראות שבאמת כל שנייה מתווסף פריט לרשימה.
01:15
בואו נראה אם רואים את זה בקונסול ואם רואים את זה ב-UI. אז נרפרש, נחליק את הקונסול ברור אפילו נרפרש עוד פעם ונראה שבהחלט הפריטים מתווספים אתם יכולים לראות כאן שכל שנייה מתווסף לנו פריט והמערך גדל וגדל וגדל אוקיי אבל שום דבר לא מתרפרש ב-UI עצמו אף אחד לא מודיע ל-UI תשמע יש איזה עדכון חדש בו תרפרש את עצמך
01:52
מפני שאם אנחנו רוצים שה-UI ירפרש את עצמו אנחנו צריכים ללכת ולהגדיר סטייט ב-UI שלנו. אנחנו היינו צריכים להגדיר איזשהו סטייט ואיכשהו לשנות את הסטייט הזה ב-UI עצמו ואז הרכיב היה יודע אה וואלה יש איזשהו צ'יינג' בוא תעדכן לי את ה-UI.
02:17
בואו נראה איך כל הסיפור הזה מתבצע במוביקס. דבר ראשון אנחנו נשאיר את זה רגע כי את זה אנחנו כן צריכים. מוביקס עובדת על ידי פרופס זה אומר שאנחנו צריכים את המידע עצמו לא לגשת אליו ישירות כמו שעשינו פה ניגשנו ישירות למשתנה הזה אלא אנחנו חייבים להעביר את המידע דרך הפרופרטיז של הקומפוננטה.
02:50
זה אומר שלקומפוננטה שלנו צריכים להיות props. זה לא משנה אם הקומפוננטה שלנו היא functional component או class component. מוביקס עובדת אותו הדבר על שניהם.
03:01
במקרה כרגע יש לנו functional component, גם אם היה לנו class component זה אותו הדבר. צריך להיות לנו props. אז בואו נייצר אינטרפייס ואנחנו מוציאים את אותו השם של הקומפוננטה עם הסיומת props.
03:17
והאובייקט הזה קודם כל צריך להגיע ממנו. זאת אומרת שאני לוקח בדיוק את האובייקט אני אקרא לו באותו השם למרות שיכלתי לקרוא לו בכל שם אחר והסוג שלו כמובן הוא הגרוסרי ליסט סטייט שלנו.
03:34
שימו לב זאת הסיבה שהיינו צריכים לחשוף אותו החוצה על ידי אקספרט כי אנחנו צריכים את הסוג שלו בפרופס. אנחנו רוצים להגדיר שזה הפרופס של הקומפוננטה in פרופס מסוג view grocery list props, אנחנו רוצים שהדבר הזה לא יהיה ישירות, גישה ישירה, אלא שיגיע מהפרופס, נקודה.
04:04
זה בסדר, אבל מישהו צריך להביא לנו את הפרופס הזה, מי שמביא לנו את הפרופס, את זה אנחנו כבר יכולים למחוק, זה בעצם ה-parent שלנו, אז בואו ניגש ל-parent הזה, ונראה כמובן שפה יש איזושהי שגיאה כי הוא אומר לי תשמע יש לי props בשם grocery list אתה צריך להביא את ה-grocery list המקורי
04:32
שהוחצן שם אז קודם כל במקום לגשת אליו באופן ישיר מתוך ה-component כאן הבאנו אותו ל-props ואנחנו ניגשים אליו דרך ה-props זה דבר ראשון אבל מה זה משנה? אם ניגשנו אליו מהפרופס אם אנחנו מסתכלים אנחנו רואים את אותו האפקט אני פותח קונסול ואפילו נרפרש בשביל טיפה לנקות.
05:01
הנה יש לנו פה גדילה של המערך שום דבר לא קשור לתצוגה כי אף אחד לא אמר לקומפוננטה להתרפרש זאת הסיבה שאנחנו צריכים פה את הספרייה הזאת שתעדכן לנו את כל הסיפור הזה.
05:20
דבר ראשון אנחנו צריכים להתקין אותה. אז בואו ניגש לכאן ונתקין לעצמנו npm i מוביקס רווח מוביקס מקף ריאקט יש פה שני דברים שאנחנו מתקינים קודם כל הספרייה עצמה זה מוביקס בית מוביקס מקף ריאקט זאת ספרייה נוספת שאנחנו צריכים להשתמש בה שמכילה בעצם מעין הגדרות ספציפיות לקומפוננטות שהקומפוננטות יוכלו להשתמש עם ספריית מוביקס
05:52
בצורה פשוטה.