הסבר על Conditional Rendering
Specials מציג פיצה כמנה מיוחדת בסוף שבוע ופסטה בשאר הימים. פונקציה isWeekend מחשבת את היום בשבוע ומחזירה true כשהוא שישי או שבת. הפונקציה מוסיפה 1 לערך של getDay, שמתחיל מאפס, ובודקת אם התוצאה גדולה או שווה ל-6.if / else: שני return לפי התנאי. זה עובד, אבל מנפח את הקוד.return אחד, ובתוכו Interpolation עם isWeekend ? פיצה : פסטה. הביטוי מחזיר אלמנט JSX, ולכן אפשר לבחור בין שני אלמנטים. אפשר לבדוק על ידי החזרת true זמנית מהפונקציה.&&: מציגים אלמנט רק כשהתנאי נכון. בדוגמה, "חמין" מוצג רק כש-isWeekend הוא true.||: כאן הלוגיקה הפוכה. כשהתנאי הראשון שקר, מוצג מה שאחרי ה-||. בדוגמה, "פיש אנד צ'יפס" מוצג כשלא סוף שבוע.f1 עד f4, שמדפיסות את שמן ומחזירות true. בתנאי f1() && f2() && f3() && f4() כולן נקראות. אם f2 מחזירה false, אף אחת מהאחרונות לא נקראת, כי התוצאה כבר ידועה. עם || זה הפוך: ברגע שאחת מחזירה true, השאר לא נבדקות. && נפוץ יותר.index.css מחלקה box עם תצוגה inline-block, מסגרת, מרווחים, פינות מעוגלות וצל. מחילים אותה על הקומפוננטים כדי לראות איפה מתחיל כל אחד. בקומפוננטים שאין להם CSS משלהם מוחקים את הקובץ.פרקי ההרצאה: הסבר על Conditional Rendering
תמלול ההרצאה: הסבר על Conditional Rendering
הטקסט המלא של הדקות הראשונות בהרצאה «הסבר על Conditional Rendering» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
אנחנו מגיעים ליכולת הבאה והיכולת הבאה נקראת conditional rendering קודם כל מה פירוש רנדרינג רנדרינג זה הפעולה שריאקט או שכל מערכת אחרת מתרגמת את ה-UI ל-HTML סופי הרי זה לא באמת HTML ולמעשה זה JavaScript זה סוג של תחביר שריאקט מאפשרת לנו אבל מה שבאמת כתוב פה זה סוג של JavaScript כזה וה-JavaScript מכילה את ה-HTML הזה.
אז מתבצעת פה מאחורי הקלעים פעולה של סוג של תרגום של הקטע הזה ל-HTML סופי. שריאקט שותלת כאן את הערך המתאים וכאן את הערך המתאים ומתרגמת את זה לפסקה ואת זה ל-D ושמה פה את הקלאס.
קונדישיונל הרנדרינג זה הפעולה של אנחנו רוצים לתרגם איזשהו UI מסוים כתלות ב-condition, באיזשהו תנאי. אז איך בעצם אנחנו יכולים לבצע את זה?
לצורך כך בואו נוסיף לעצמנו עוד איזשהו רכיב אחר לגמרי. בואו נקרא לו Specials, שזה בעצם כל מיני מיוחדים, המיוחדים שאנחנו כרגע מוכרים באתר שלנו.
הנה יש לנו פה את ה-Specials שלנו, ומה שאנחנו רוצים לעשות ב-Specials זה להגיד שיש לנו כ-Special, פריט מזון שהוא ספיישל פיצה זה הספיישל שלנו לפחות השבוע אבל רגע אני לא באמת רוצה שתמיד הספיישל יהיה פיצה אני רוצה שפיצה יהיה לנו כספיישל רק בסוף שבוע ואם עכשיו לא סוף שבוע אני רוצה פסטה פעם פיצה פעם פסטה
אוקיי איך אני יודע אם עכשיו סוף שבוע כן או לא בואו נבנה פה איזושהי פונקציה is weekend מחזירה לנו בוליאן אנחנו רוצים לבנות פה את ה-now כרגע בואו נבנה פה איזשהו const day of week כך now למה רשמתי מיו רציתי לרשום now וניקח את ה-now נקודה get day get day זאת פונקציה שמחזירה לנו את היום בשבוע אבל גם היא מחזירה בין 0 ל-6
כאשר יום ראשון זה 0 אז אני אוסיף 1 שיהיה קצת יותר ברור ש-1 זה יהיה Sunday 2 זה יהיה Monday וכדומה ו-Return Day of Week גדול שווה 6. עכשיו יש לנו פונקציה שמחזירה לנו מספר סליחה מחזירה ערך בולעני וערך בולעני הוא True אם היום יום שישי או שבת ו-False אם שאר ימות השבוע.
איך אנחנו עכשיו יוצרים פה משהו שנקרא conditional rendering. אז למעשה יש כמה שיטות לבצע את זה. שיטה ראשונה, בואו ניגש ונגיד כזה דבר אם is weekend אז אנחנו רוצים to return את כל הקטע הזה.
אלס בואו נחזיר משהו אחר. בואו נחזיר את כל זה, בעצם את כל ה-return. נעתיק את ה-return, ונחזיר פסטה.
אז בואו נבדוק מה הוא מציג לנו, והוא מציג לנו פסטה כי עכשיו באמת לא סוף שבוע, הכל בסדר. אם לדוגמה היינו מחזירים מכאן, בואו נעשה רגע ניסוי, נחזיר true, כאילו שעכשיו סוף שבוע, isWeekend מחזיר לי true,
אני מסתכל ואני רואה פיצה כי זה הוחזר true והחזרנו את זה. בגלל שעכשיו לא סוף שבוע, אנחנו רואים פסטה הוא נכנס פה לif ובעצם הוא מחזיר false נכנס לelse ומחזיר לנו פסטה ויש לנו פה conditional rendering כתלות בתנאי כזה אני פחות אוהב להשתמש בif-else הזה למרות שזה ממש בסדר אתם רואים
שזה עובד אבל זה טיפה מנפח לנו את כל הקוד אז בואו נראה טכניקה אחרת לגמרי לעשות conditional rendering בטכניקה הזאת אנחנו בעצם מבצעים את אותו תנאי כאן איפשהו באמצע, תכף נראה איך זה מתבצע.
ולכן אנחנו יכולים שיהיה לנו רק ריטרן אחד. אני רגע גוזר פה את הכל, ויש לנו פה ריטרן אחד ויש לנו פה דיו אחת, וכאן אנחנו רוצים להחזיר לפעמים פסטה ולפעמים פיצה.
אם סוף שבוע, תחזיר לי פיצה, אם לא תחזיר לי פסטה אז מה שאנחנו יכולים לעשות זה לשים interpolation עכשיו אם אנחנו זוכרים interpolation אפשר לנו לשתול פה value איזשהו ערך אחד ויחיד אבל גם זה value אנחנו מסתכלים ורואים שהוא מציג לי פיצה תמיד כמובן אני בכלל לא בודק עם איזה weekend פשוט מציג לי פיצה מפני שהדבר הזה הוא value מסוג jsx-element.
לכן אנחנו יכולים עכשיו לשאול פה את השאלה. is weekend, בואו נשאל אותו כאופרטור טרינארי כזה, או לפעמים זה נקרא משפט תנאי מקוצר.
אם עכשיו weekend, תן לי פיצה, אחרת, תן לי span של פסטה. בואו נבדוק את זה. כרגע אנחנו רואים פסטה כי עכשיו לא סוף שבוע בואו ננסה להחזיר מפה true נניח שעכשיו כן סוף שבוע ואנחנו רואים את הפיצה גם זה conditional rendering בואו נחזיר רק את זה בחזרה גם זה conditional rendering בשיטה אחרת של משפט טרינרי בואו נשים כאן איזה
span כזאת בצורה כזאת ואנחנו רוצים לראות עוד טכניקה ממש מעניינת לבצע conditional rendering. והטכניקה הזאת שאני מראה כרגע היא נקראת שירט סרקט בעברית cat cell.
מה זה שירט סרקט? שירט סרקט זה בעצם מונח שבכלל קיים בג'אווה סקריפט וגם בהרבה שפות אחרות. לא בהכרח בריאקט, אבל ריאקט משתמשת איתו ממש בצורה נוחה.
מה זה Shirt Circuit? בואו נסתכל רגע. יש לנו כאן תוכנית שהיא ריקה לגמרי, יש לי פה קובץ אינדקס HTML. בואו רגע נחבר, קריפט src, נחבר אותו לג'אווה סקריפט, יש לנו פה ג'אווה סקריפט.
ומה שאני רוצה לבנות פה זה איזושהי פונקציה, אני אקרא לה כרגע f1, והיא תציג לי על המסך את המילה f1, תחזיר true, זה מה שהפונקציה עושה. עכשיו אני רוצה לקחת את אותה פונקציה ולשכפל אותה ארבע פעמים.
נקרא לזה f2, יש לנו פה את f3, יש לנו פה את f4, כל אחת מחזירה לי true. ופה למעלה אני רוצה לשאול שאלה, אם F1 וגם F2 וגם F3 וגם F4 אז תציג לי קול והשאלה היא מה יוצג בקונסול אם נריץ את זה תסתכלו רגע תנסו לחשוב רגע מה הדבר שאתם תראו בקונסול אז מה שיקרה זה שאנחנו נקרא ל-F1
ואז תתבצע קפיצה ל-F1 וכמובן אנחנו נראה את זה בקונסול מחזיר true ואז נעשה את אותו דבר ל-F2, ל-F3, ל-F4 אז אנחנו אמורים לראות F1, 2, 3, 4 על הקונסול ובגלל שכולם יחזרו true אנחנו כמובן נראה קול זאת אומרת אנחנו נראה F1, 2, 3, 4 קול בואו נריץ את זה רגע נרחיב פה טיפה
נפתח קונסול ויש לנו פה F1, 2, 3, 4 קול בדיוק כמו שחשבנו עכשיו מה קורה אם אני הולך ל-F2 ומחזיר false מה עכשיו יוצג? קראנו ל-F1 והוא מחזיר לי F1, כלומר, סליחה, הוא מציג לי F1, מחזיר true.
קראנו ל-F2, מציג F2 ומחזיר לי false, אבל השאלה היא אם JavaScript תקרא גם ל-F3 וגם ל-F4, כי אולי היא רוצה לדעת מה חוזר מכל אחד מהביטויים האלה.
אז התשובה היא לא, היא לא תקרא ל-F3 ול-F4, מפני שJavaScript ועוד הרבה שפות אחרות, ברגע שהן יודעות מה הולך להיות התוצאה הסופית של התנאי הזה, אז הן כבר לא הולכות לבדוק את כל הערכים האחרים, וכבר כאן אפשר לדעת מה התוצאה הסופית של התנאי.
הרי אם זה החזיר לפולס, מה זה משנה מה זה יחזיר ומה זה יחזיר? כל התנאי יהיה פולס, ולכן אין שום צורך לבדוק את F3 ואת F4 ואף אחד לא יקרא להם.
התצוגה הזאת תהיה F1, F2 בלבד. אין לנו פה לא את F3, לא את F4 ובטח שלא כל, מפני שחזר פה false. בואו נסתכל, F1 ו-F2.
אז אפשר להגיד ש-F2 יצרה לנו קצר. כאן היא החזירה false, פה כאילו כתוב false, ולכן JavaScript לא המשיכה הלאה. בואו נגיד שמפה אני מחזיר false, זה נחזיר true, נחזיר פולס, אז עכשיו F3 יצרה קצר כאילו שפה כתבנו פולס ואנחנו רואים רק את F1 ואת F2, סליחה רגע בואו נקרא ל-F3 נראה F1, F2, F3, אין F4, אנחנו לא קראנו בכלל ל-F4 מפני שכאן
התוצאה הזאת היא פולס, אף אחד לא הולך לקרוא ל-F4 מפני שאין צורך, מה שקרה כאן זה ש-F3 יצרה לנו קצר בליין הזה שכאילו הזרם החשמלי שעובר בין F1 ל-F2 ל-F3 ל-F4, נוצר פה קצר ואנחנו לא נמשיך לבדוק את זה.
יש לנו כאן בעצם את הקונספט הזה של Shirt Circuit. אותו הדבר אנחנו יכולים לעשות גם עם אורים. גם אור יכול שיהיה לו Shirt Circuit,