ניהול State בתוך Class Component
state. ההרצאה מדגימה את זה ב-class component.BestSeller מציג פריט ומחיר ויש לו כפתור "Show Best Seller". ה-handler מעדכן את this.item ו-this.price, אבל אחרי לחיצה לא קורה כלום ואין שגיאה בקונסול. React לא יודעת שנתון השתנה, וגם לא אמורה להציג כל שינוי. עבודה עם ה-Virtual DOM מחייבת שנאמר לה במפורש.interface בשם הקומפוננט עם הסיומת State, למשל BestSellerState, עם item (מחרוזת) ו-price (מספר), בלי מגדירי גישה.Component. הראשון הוא תמיד props. אם אין props אבל יש state, כותבים אובייקט ריק {} לטיפוס הראשון, ולא any, כדי שהאב לא יוכל לשלוח כל דבר.this.state.item ו-this.state.price, ולהציג אותם.setState: מעבירים לפונקציה אובייקט עם הערכים החדשים, למשל Irish Coffee ו-3.9. היא משנה את הנתונים ומרעננת את ה-UI.this.state ישירות כדי לאתחל אותו, למשל item ריק ו-price אפס. גם עם props ריקים הוא מקבל אותם ומעביר ל-super. אחרת state הוא null.this.state.item מכיל משהו. כדי לעטוף כמה תגיות משתמשים ב-React Fragment ולא ב-div מיותר.state ישירות, רק דרך setState.state ו-setState.פרקי ההרצאה: ניהול State בתוך Class Component
תמלול ההרצאה: ניהול State בתוך Class Component
הטקסט המלא של הדקות הראשונות בהרצאה «ניהול State בתוך Class Component» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
אנחנו מגיעים ליכולת הבאה של React וכאן אנחנו הולכים לראות איך אפשר ב-react לשנות מידע שקיים ב-component כך שהמידע יוצג לאחר השינוי. זה נראה אולי טריוויאלי אבל זה לא כל כך טריוויאלי.
בואו נבין רגע מה הכוונה, מה הבעיה שקיימת פה ומה הפתרונות ש-react נותנת לנו. אנחנו הולכים לראות את זה כרגע בקלאס קומפוננט ולא בפונקצ'ונל קומפוננט מפני שהטיפול בסיטואציה הזאת, שתכף נבין בכלל מהי הסיטואציה, הוא שונה לחלוטין בין קלאס קומפוננט לפונקצ'ונל
קומפוננט והוא פחות קשה להבנה בקלאס קומפוננט. בואו קודם כל ננסה להבין את זה בקלאס קומפוננט. איך לפתור את הסיטואציה הזאת בפונקצ'ונל קומפוננט כמובן שנראה בהמשך, אבל הפתרון הולך להיות בטכניקה אחרת לגמרי.
קלאס קומפורננט, יש לי קלאס קומפורנט, אני הולך לייצר אותה בהום ואני הולך לקרוא לה בסט סלר. בוא נניח שזה הולך להיות איזשהו רכיב שמציג לנו את הפריט שהוא נחשב בסט סלר אייטם.
כן, בסט סלר יכול להיות גם מוכר, אבל יש דבר כזה שנקרא בסט סלר אייטם, וזה הפריט שהכי נמכר לנו בחנות. Class Component, Go, בוא תייצר לי. זה אני לא צריך.
הינה ה-Best Seller שלנו. מה שאנחנו רוצים זה לבנות כאן איזשהו בטון. הבטון, יהיה כתוב עליו Show Best Seller בצורה כזאת.
יש לנו כאן On Click, ואנחנו רוצים לבנות פה איזושהי פונקציה. פריווט קליק הנדלר ואנחנו כמובן רוצים כרגע לבנות את זה בצורה של אירו ואני אבנה כאן איזשהו משתנה בוא נניח שהאייטם שלנו נגדיר אייטם כסטרינג ונגדיר כרגע ניתן לו מחוזת דרכה נגדיר את המחיר שלו כנאמבר כרגע הוא 0. אלה ערכי ה-Default שקיימים
לנו, וכל מה שאני רוצה לעשות בלחצן זה this.item, תן לי בבקשה סתם איזה אובייקט שהוא ה-Best-Teller שלנו, אני כמובן בהמשך אביא אותו נניח מהסרוור, Irish Coffee, זה ה-Best-Teller Item.
בואו נלך ל-this.Price ונגיד שה-Price שלנו הוא 3.9, ואנחנו רוצים כאן להשתמש בליק קנדלר הזה ואנחנו גם רוצים כמובן להציג את האייטם ואת הפרייס.
אז בואו ניגש לפה ונייצר ספאן ובתוך הספאן נציג דיס נקודה אייטם ונייצר כאן קו הפרדה כזה ועוד ספאן שיהיה לנו פה איזה שהוא פרייס דיס נקודה פרייס סליחה זה אמור להיות כמובן פה.
נגיד שהוא דולר יש לו בעצם תצוגה של דולרים כזה וזהו זה כאילו הבסיס שעשינו בואו נבין רגע האם זה עובד האם יש פה איזושהי בעיה בבסט סלר הזה ניגש להום ומתחת לכל הטאמניילים האלה נבנה פה בסט סלר בצורה כזאת אין לו שום פרופס הוא לא צריך לקבל פרופס מבחוץ ואנחנו רוצים לראות אותו, הוא נראה לי ככה,
למה הוא נראה לי ככה? לא כל כך יפה, פה חסר לי בוקס, אז הנה יש לי בוקס וטיפה נרווח אותו, בוא נגיד שיש לו padding 10 פיקסלים, נרווח לי אותו טיפה, אני רואה פה כרגע את ה-default value שהוא 0 ואין לי כרגע אייטם, אני לוחץ על הלחצן,
לא קורה שום דבר, הנה הבעיה, בואו רגע נסתכל, אולי יש שגיאת קונסול ואז יש פה איזושהי בעיה ובגלל השגיאה הוא לא מראה לי כלום. לוחץ ואין שום שגיאת קונסול ושום דבר גם לא עובד.
זאת הסיבה שאמרתי שזה לא הכי טריוויאלי לבצע את הפעולה הזאת ב-react. באנגולר סיפור אחר, שמה זה מאוד פשוט לביצוע.
ב-react יש פה איזה catch ו-react לא משנה את התצוגה של מידע שהשתנה אחרי שהקומפוננט הוצג. זאת בדיוק הבעיה שיש פה בריאנט ואנחנו כמובן רוצים לפתור את זה.
מה, אני לא יכול אחרי שהקומפוננט מוצג ללכת לסרבר להביא מידע חדש ולהציג אותו? ברור שאני אוכל לעשות את זה, אבל זה לא מתבצע כמו שהראינו כרגע.
למה? React אומרת כזה דבר: אם אתה רוצה שאני אפרש לך את הדום האמיתי, הרי ריאקט עובדת עם וירצ'ואל דום. תגיד לי שמידע שונה, אני לא יודעת בתור ריאקט שבאמת שינית לי פה את הדאטה ממבר, וגם אם שינית, אולי אתה לא רוצה להציג אותו.
אולי אתה רוצה להציג אותו רק בעוד X זמן. אולי אתה רוצה לשנות חמישה דאטה ממברס אבל בכלל להציג רק את השישי. אני לא יודעת מה אתה רוצה להציג. זה ששינית לי פה את המידע זה לא אומר שאתה רוצה שאני אלך ואני אעדכן את ה-UI שלך.
לכן, אם יש לך מידע שאתה רוצה לשנות אותו אחרי התצוגה של הקומפורננט, כי ראיתם בפעם הראשונה, אם היה כתוב לי פה איזה משהו, בואו נכתוב ABC, הוא כן יראה לי ABC ו-0, כי זה מידע שהוא הציג לי, הכל בסדר.
אבל אם אתה רוצה לשנות אותו בהמשך, אחרי שהקומפורנט הזה כבר הוצג, זאת לא הטכניקה. מה כן הטכניקה? הטכניקה נקראת State זה מונח שמתאר את הדאטה שמשהו מנהל או שמנוהל על ידי משהו.
State זה המצב או הדאטה המנוהל על ידי הקומפוננט. ב-react כל מה שאתם רוצים ברמת הקומפוננט לשנות לאחר שהקומפוננט מוצג וכמובן גם להציג את השינוי, זה הדבר החשוב.
אתם רוצים ש-react תציג לכם את השינוי של המידע, אתם כבר לא יכולים לשים את המשתנים האלה כאן סתם ככה בתור data members ולא בתור משתנים בתוך פונקציות.
אתם צריכים לשים את המידע הזה ב-object מיוחד שנקרא state מבחינת מונח והוא זה שמחזיק את המידע ורק אותו react data להציג ברגע שאת הגידול הזה השתנה.
איך עושים את זה? בטייפסקריפט אנחנו מחויבים לעבוד עם טיפוסים, בג'אווה סקריפט לא היינו צריכים להגדיר טיפוס נתונים ספציפי, כי גם אין לנו יכולת כל כך כזאת.
בטייפסקריפט, כמו שהגדרנו טיפוס נתונים עבור props, אנחנו מגדירים טיפוס נתונים עבור state. זה יהיה בדומה כאינטרפייס.
השם של האינטרפייס זה אותו השם של הקלאס עם הסיומת state. אנחנו מגדירים מה הדאטה שאנחנו רוצים לנהל על ידי ה-State וזה שני החבר'ה האלה. אני גוזר אותם ושם אותם פה.
כמובן שבאינטרפייס אני לא יכול להגדיר הרשעת גישה, הכל אוטומטית הוא Public, את זה אני מוריד, אני לא יכול להתקל נתונים, את זה אני יוריד ואת זה אני יוריד ויש לי כרגע אינטרפייס שנקרא Best Seller State שמכיל את ה-state שהקומפוננט רוצה לנהל.
מה הדאטה שהקומפוננט רוצה לנהל ולשנות וכמובן להציג אחרי שהקומפוננט כבר עובד ומוצג וקיים. כמו שאנחנו רואים, הדבר הזה הוא כרגע אפור, זה אומר שבכלל עוד לא השתמשתי עם האינטרפייס הזה.
איפה אני משתמש איתו? ב-class component מאוד פשוט יחסית לעבוד עם state. פונקשיונל קומפוננט זו טכניקה אחרת לגמרי, היא נקראת React.
אנחנו נראה אותה בהמשך. כרגע אנחנו רוצים לראות איך קלאס קומפוננט מנהל סטייט. קלאס קומפוננט ניהל props על ידי ג'נריק, זוכרים את זה?
כאן הגדרנו שאותו אובייקט או טיפוס נתונים שאנחנו שמים פה זה ה-props של הקומפוננט, אז ה-parent יהיה חייב להעביר לנו את מה שאנחנו דורשים ב-props.
state זה המשתנה השני שאנחנו שולחים פה לג'נריט עם פסיק. תמיד הראשון הוא props, תמיד השני state הוא הטיפוס של ה-state.
state ו-props לא חייב שיהיה לי. אם אין לי אף אחד מהם, ראינו בעבר, זה מה שאנחנו עושים. אם יש לי את שניהם אז אני פשוט שולח את הטיפוסים של שניהם.
אם יש לי רק props אני פשוט מעביר רק props אבל אם יש לי רק state אני לא יכול להעביר רק state בצורה כזאת. אין דבר כזה עם הפסיק פה ואם אני אעביר את הstate כאן אז המערכת תחשוב שזה props כי אמרנו שאם אני מעביר אחד מהם זה props.
אם יש לי רק state ואין לי props אז הדבר הנכון לעשות זה להגיד שה-props שלי הוא אובייקט ריק. יש כאלה שאוהבים לשים any, אני פחות מחבב את ה-any כי אז זה אומר שה-parent יכול לשלוח לי מה שבא לו כ-props למרות שמבחינתי אין props אז אני תמיד שם אובייקט ריק לציין שאין לי כרגע Crops, זה הטיפוס נתונים
הראשון שקיים והטיפוס נתונים השני שקיים זה כמובן זה. עכשיו מה שאמרתי לקומפוננט שלי ושיש לו אובייקט מסוג Best Seller State והוא ה-State של האובייקט שלי.
אז אם עכשיו אני ניגש אליו אני יכול לגשת אליו על ידי State, שימו לב יש לי פה אובייקט State ויש לי אייטם ויש לי פרייס בדיוק כמו שהיה לי.
דיסט נקודה פרופס והוא הכין את מה שיש בפרופס. יש לנו דיסט נקודה סטייט ויש לו אייטם ויש לו פרייס. סטייט נקודה פרייס.
אבל אני רואה שעדיין יש לי פה איזושהי שגיאה. הוא אומר לי לא, אתה גם את זה לא יכול לעשות. רגע, מה קורה פה? למה הוא לא נותן לי לגשת לאייטם ולפרייס?
פה כמובן אני רוצה להציג את ה-dist.state.item ו-dist.state.price ושימו לב שפה הוא כן מאשר. מה הסיבה? בואו נרחף.
הסיבה היא שהפריטים שמוגדרים בתוך ה-state הם read-only. בואו נבין רגע למה. אנחנו אמרנו שאם אנחנו רוצים לשנות מידע אחרי שהקומפוננט כבר הוצג ואנחנו רוצים שהוא יציג את השינוי, אנחנו חייבים לומר את זה ל-react כששינינו משהו נא לרפרש את ה-UI אם אנחנו מכניסים מידע לתוך משתנה react לא יודעת את זה לא יודעת
שעשינו שינוי איך היא יודעת שיש value אחר במשתנה היא לא מאזינה למשתנה או משהו אז לכן כל מה שנמצא בתוך ה-state הוא read only אנחנו יכולים רק לקרוא אותו אנחנו רוצים פה לשנות את המידע איך אנחנו עושים את זה אנחנו לא ניגשים ישירות לנתונים, בואו רגע נשים את זה בהערה, אנחנו צריכים לפנות לפונקציה מיוחדת שנקראת setState.
פונקציה הזאת מקבלת אובייקט שמכיל בדיוק מה שהוגדר ב-State.