שימוש ב-Context Object בתוך CC

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

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

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

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

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

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

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

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

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

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

שימוש ב-Context Object בתוך CC

ב-Class Component אי אפשר להשתמש ב-React hook, ולכן ההרצאה מראה דרך אחרת לקבל את אובייקט ה-Context.

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

1. קומפוננטת class חדשה: בתיקיית SupportArea יוצרים קומפוננטה עם כתובת הלינקדאין של המערכת, בלי state ובלי props, כי ה-Context לא מגיע דרכם. היא מוצגת בתוך Box.

2. הגדרת הטיפוס: כל class component יורשת מ-Component, ולו יש משתנה סטטי contextType. מציבים בו את ThemeContext.

3. קריאת האובייקט: this.context מקבל אוטומטית את הסוג שהוגדר במשתנה הסטטי, ושמים אותו ב-style. המרצה אומר שזה נראה קצת מוזר, אבל כך זה עובד.

4. בדיקה: מציבים את הקומפוננטה בדף ה-support, והלינקדאין מוצג באותו עיצוב ורוד.

שימו לב

שוב טעות בייבוא: ThemeContext נלקח מהספרייה של Material UI, שיש לה אותו שם. צריך לבדוק שמייבאים מה-state שלנו.

כך אפשר להפיץ Context מלמעלה למטה, ובקומפוננטות שצריכות אותו להשיג אותו בשתי הדרכים: hook ב-Functional Component ו-contextType ב-Class Component.

פרקי ההרצאה: שימוש ב-Context Object בתוך CC

תמלול ההרצאה: שימוש ב-Context Object בתוך CC

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

00:02
זה איך אנחנו משתמשים ב-in-context הזה בקלאס קומפוננט. בואו ניגש ונייצר לעצמנו כאן עוד קומפוננט, הפעם נייצר אותו כ-cc, support area, ואנחנו רוצים, כמו שהיה לנו פייסבוק, בואו ניקח לינקד אין, נעשה לינקד אין בצורה כזאת.
00:24
אין לנו צורך בסטייט במקרה הזה, אין לנו צורך בפרופס במקרה הזה, הוא לא מגיע דרך הפרופס. גו, הנה יש לנו פה קלאס קומפוננט, עבור הלינקדאין של המערכת.
00:36
ראשית נבוא לפה, פסקה לינקדאין שלנו זה https www.linkedin.com/northwind שוב אני לא באמת יודע מה יש שם רק לצורך הדוגמה ומה שאנחנו רוצים זה קודם כל נהפוך את זה ל-box.
00:59
עכשיו איך אנחנו משיגים את אותו אובייקט בשביל לשים אותו פה בסטייל כמו שהיה לנו מקודם. אז אנחנו לא יכולים להשתמש ב-react hook כי אנחנו ב-class component.
01:13
כל class component יורשת מ-component. ל-component יש משתנה סטטי בשם context type ואנחנו יכולים פשוט לבוא אליו, context type, ולהכניס לתוכו את הסוג שלנו עם context בצורה כזאת.
01:32
כל מה שאנחנו רוצים עכשיו לעשות זה פשוט להשתמש ב-disnקודה.context. Disnקודה.context מקבל אוטומטית את הסוג שהוגדר במשתנה הסטטי הזה.
01:44
נראה קצת מוזר, אבל זה מה שמתרחש, זה מה שמתבצע, ואנחנו יכולים לבדוק את זה. בואו ניקח את הלינקדאין, נשים אותו פה ב-support, כאן לינקדאין שמגיע מאצלנו, לא ממוטריאל,