PracticU

הסבר על useState ב-React Hooks

בלי כתוביותעם כתוביות
PracticU › קורס ריאקט - React › הסבר על useState ב-React Hooks
מילון מושגים:
React - ספריית JavaScript לבניית ממשקי משתמש מבוססי רכיבים, שפותחה על ידי פייסבוק.
סטייט - המידע על מצבו הנוכחי של רכיב או אפליקציה בזמן נתון, שמשתנה ומשפיע על מה שמוצג.
מחלקה - תבנית בתכנות מונחה עצמים שמגדירה אילו נתונים ופעולות יהיו לאובייקטים שנוצרים ממנה.
רכיב - יחידת בניין עצמאית וניתנת לשימוש חוזר בתוך מערכת או ממשק משתמש, שאחראית על חלק מוגדר מהתפקוד.
הוק - נקודת חיבור שמאפשרת להריץ קוד מותאם בשלב מסוים של תהליך. ב-React, מנגנון לניהול מצב ויכולות ברכיבים.
בנאי - מתודה מיוחדת שמופעלת אוטומטית בעת יצירת אובייקט ממחלקה, ומאתחלת את ערכיו ההתחלתיים.
מערך - מבנה נתונים שמאחסן אוסף ערכים מאותו סוג ברצף, שאפשר לגשת אליהם לפי מספר מיקום (אינדקס).
אובייקט - יחידה בתכנות מונחה עצמים שמאגדת נתונים (תכונות) ופעולות (מתודות). נוצר בדרך כלל ממחלקה המשמשת כתבנית.
הסבר על useState ב-React Hooks
אחרי ניהול State ב-Class Component, ההרצאה מראה איך לבנות את אותה התנהגות ב-Functional Component בעזרת ה-Hook useState.
השלבים העיקריים
1. בניית Functional Component: במקום Class, בונים פונקציה פשוטה שמחזירה JSX-Element ונחשפת החוצה.
2. הבעיה בלי this: בפונקציה אין this, ולכן אין גישה ל-this.state או ל-setState כמו בקלאס.
3. קריאה ל-useState: מפעילים את useState כפונקציית ג'נריק עם סוג הנתונים של ה-state, ושולחים לה ערך דיפולט - זה תפקיד שמילא הקונסטרקטור בקלאס.
4. החזרה של מערך: useState מחזירה מערך עם שני תאים - בתא הראשון אובייקט ה-state, ובתא השני פונקציה לעדכון אותו (מקביל ל-setState).
5. שליפת שני הערכים: עם const [state, setState] = useState(...) מקבלים את שני הפריטים לפי מיקום במערך, ובוחרים בעצמנו את שמות המשתנים.
6. עדכון הקוד הקיים: מחליפים כל this.state ב-state, וכל קריאה ל-setState בקריאה לפונקציה החדשה שהוחזרה מ-useState.
שימו לב
כל הפונקציות שנחשבות React Hook מתחילות במילה use. בניגוד לקלאס, אין צורך שהפונקציה תהיה arrow function, כי אין this לשמר.
כך מקבלים את אותה ההתנהגות שהייתה ב-Class Component, אבל בלי צורך בקלאס.
השיעור הבא בקורס: הבדלים בין CC State לבין FC State

פרקי ההרצאה: הסבר על useState ב-React Hooks

  1. 00:00

    חזרה על ניהול state בקלאס

  2. 00:40

    למה המידע חייב להיות ב-State

  3. 01:45

    מעבר ל-Functional Component

  4. 02:26

    בניית הפונקציה בלי this

  5. 03:20

    קריאה לפונקציה useState

תמלול ההרצאה: הסבר על useState ב-React Hooks

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

  1. 00:02

    פונקציית ה-react hook הראשונה שאנחנו הולכים לראות זאת ה-use state. חזרנו כאן לדף ה-home שהיה לנו כל מיני דברים בסיסיים ב-react ואחד הדברים שלמדנו זה היה state וזה היה הקומפוננט הזה.

  2. 00:19

    כאשר אנחנו לחצנו על show best seller item אז בעצם הקומפוננט אמר לנו תשמע ה-best seller item זה אייריש קופי והוא עולה 3.9 דולר והלחצן פשוט עדכן את ה-State ואז ה-Component יכל לרנדר את עצמו ולהציג את המידע הזה.

  3. 00:39

    כשלמדנו את זה ראינו שאם המידע לא היה ב-State אז הוא כן היה משתנה אבל ה-Component לא היה יודע מזה ולא היה מציג אותו. זאת הסיבה שהיינו חייבים להעלות את המידע לרמת ה-State של ה-Component.

  4. 00:51

    אנחנו בנינו אותו בעזרת Class Component כי וואלה לא ראינו איך עושים את זה ב-Functional Component עם React Hooks זה רק עכשיו אנחנו רואים.

  5. 01:01

    אז הנה ה-Best Seller, בואו ניכנס אליו, זה בעצם ה-Class, היה לנו פה אינטרפייס שאמר מה המידע שאנחנו רוצים לנהל והאייטם, היה ה-Best Seller Item וה-Best Seller Price ופה שמנו את האינטרפייס, התחלנו אותו במחוז הדרגה ו-0 והיה לנו פה לחצן אחד שפשוט קרא לפונקציה הזאת והפונקציה עדכנה את ה-State,

  6. 01:29

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

  7. 01:50

    אנחנו רוצים לעשות את זה בעזרת functionalComponent בכדי לראות איך בעצם זה ניתן לביצוע אם אנחנו רוצים לעבוד עם functionalComponent ולא classComponent.

  8. 02:02

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

  9. 02:16

    בואו ניקח את כל זה ונשים בהערה, לא נמחק אותו מהפרויקט הזה, נשים אותו באיזושהי הערה, נבוא לפה ונבנה לעצמנו פונקשן, השם הוא אותו השם כמובן, והיא מחזירה JSX-Element, אנחנו רוצים כן לחשוף אותה החוצה, והנה יש לנו פרנקשיון על קומפורננט, מה אנחנו רוצים להחזיר? יש לנו פה את ה-return, כל הקוד הזה אנחנו רוצים להחזיר מהפונקציה,

  10. 02:43

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

  11. 03:04

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

  12. 03:16

    ומה אנחנו צריכים לבצע? אז אנחנו רוצים בתוך הפונקציה, ב-Functional Component שלנו פה, לקרוא לפונקציית המערכת useState.

  13. 03:31

    הנה, כל הפונקציות שהן נחשבות ReactHook מתחילות ב-use, ושימו לב שיש פה מלא פונקציות שמתחילות ב-use.

  14. 03:38

    useState, התפקיד שלה זה לאפשר ל-functional component לנהל state. אנחנו רואים שהמערכת הביאה אותה מפה, רק בואו נשים את זה למטה.

  15. 03:49

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

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

ההרצאה הקודמת: הסבר על React Hooks

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

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

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