הבדלים בין CC State לבין FC State

תמלול ההרצאה: הבדלים בין CC State לבין FC State

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

1. 00:02

   קיים איזשהו הבדל מאוד משמעותי בין ניהול ה-State שעשינו פעם Class Component לבין ניהול ה-State שאנחנו עושים עכשיו ב-Functional Component בעזרת ה-Use State.

2. 00:16

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

3. 00:48

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

4. 01:14

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

5. 01:38

   את ה-Item אלא תבצע את ה-Price אז בואו נראה איך ה-Class Component מתנהג כרגע נחזור בחזרה לקוד יש לנו שני לחצנים Best Seller Item אז הוא אומר לי Irish Coffee וכמובן אין לי את ה-Price ואז הוא נותן לי את ה-0 ה-Defaulty ו-Best Seller Price והוא נותן לי רק את זה ולא את זה זה כבר הגדרנו בואו ננסה אם אני לוחץ רק על

6. 02:04

   זה האמת שאני לא אראה את זה מפני שיש לנו conditional rendering והconditional rendering מתעסק עם האייטם עצמו עם האייטם עצמו אולי נוריד אותו בכדי שיהיה קצת יותר סימפל לראות את זה מקסימום אנחנו נראה על ההתחלה את הדולר 0 הזה לא נראה לי שזה כל כך חמור אז הנה יש לנו פה את

7. 02:33

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

8. 03:14

   רוצים כאן שני לחצנים בואו ניקח best seller Item, שכפל, Best Seller, Price, זה יהיה Item, Handler, זה יהיה Price, Handler, נהוג שאירועים יסתיימו ב-Handler, לא חייבים, זו מוסכמה.

9. 03:38

   הנה יש לנו את Item, הנה יש לנו את Price, נוריד רגע מכאן את ה-Conditional שיהיה כמו מקודם, ו-Item מעדכן רק את ה-Item, בואו נוריד רגע, נשאיר Irish Coffee כמו מקודם, נוריד את ה-Price, ויש לנו כבר פגיעה וכאן נוריד את האייטם ונשאיר את הפרייס.

10. 04:10

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

11. 04:26

    אתה לא חייב להביא לי אותו, זה אופציונלי, תביא לי מה שבא לך. כאן זה by default אופציונלי, קודם כל זה כבר הבדל.

12. 04:33

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

13. 04:54

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

14. 05:17

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

15. 05:28

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

16. 06:00

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