PracticU

קורס ריאקט - Context

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

קורס ריאקט - Context
מודול קצר שמציג את Context ב-React: מנגנון להעברת אובייקט גלובלי בעץ הקומפוננטות בלי להעביר אותו דרך props של כל קומפוננטה בדרך.
מה זה ולמה צריך
1. הרעיון: Context מאפשר לכמה קומפוננטות להשתמש באותו אובייקט גלובלי, ומייתר את העברתו מאחת לשנייה.
2. דוגמאות לשימוש: אובייקט theme שהרבה קומפוננטות צריכות, אובייקט settings, או אובייקט המשתמש הנוכחי.
3. הבעיה בדרך הקלאסית: כשרק חלק מהקומפוננטות בעץ צריכות את האובייקט, צריך להעביר אותו דרך ה-props של כל הקומפוננטות בנתיב, גם אם הן עצמן לא צריכות אותו.
4. הפתרון: מעבירים את האובייקט ל-Context, שעוטף את הקומפוננטות כתגית. כל קומפוננטה שצריכה את האובייקט משיגה אותו ישירות.
שימו לב
מנגנוני Redux או MobX היו פותרים את אותה בעיה, אבל כאן מדובר בפתרון ממוקד: רק לתת אובייקט גלובלי לקומפוננטות, בלי אירועים.
אחרי ההרצאה אפשר להסביר מה בעיית ה-props שמועברים לשווא ואיך Context פותר אותה. את הקוד רואים בהרצאות הבאות.
השיעור הבא בקורס: יצירת Context Object

פרקי ההרצאה: קורס ריאקט - Context

  1. 00:00

    מהו מנגנון Context

  2. 00:44

    דוגמאות לאובייקט גלובלי

  3. 01:20

    בעיית העברת אובייקט דרך props

  4. 01:55

    העברה דרך קומפוננטות שאינן צריכות

תמלול ההרצאה: קורס ריאקט - Context

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

  1. 00:02

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

  2. 00:16

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

  3. 00:33

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

  4. 00:46

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

  5. 01:07

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

  6. 01:29

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

  7. 01:45

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

  8. 01:58

    הנה יש לנו פה את השחורה,

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

ההרצאה הקודמת: הדגמה של Reactions ב-MobX

ההרצאה הבאה: יצירת Context Object

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

  • Application Context
  • יצירת מחלקת Context - לתקשורת עם מסד הנתונים
  • יצירת Context Class - לגישה למסד הנתונים

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

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