ניהול Multiple State Values ב-React Hooks

בלי כתוביותעם כתוביות

מילון מושגים:

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

React - ספריית JavaScript לבניית ממשקי משתמש מבוססי רכיבים, שפותחה על ידי פייסבוק.

אובייקט - יחידה בתכנות מונחה עצמים שמאגדת נתונים (תכונות) ופעולות (מתודות). נוצר בדרך כלל ממחלקה המשמשת כתבנית.

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

מחרוזת - סוג נתונים שמייצג רצף של תווים, כלומר טקסט, ומשמש לאחסון מילים, משפטים או כל רצף סימנים.

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

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

ניהול Multiple State Values ב-React Hooks

במקום לנהל אובייקט state אחד עם כמה שדות, ב-Functional Component אפשר לפתוח useState נפרד לכל property - פתרון שלא היה נוח לבצע בקלאס קומפוננט.

השלבים העיקריים

1. הפרדת האייטם: מוחקים את האינטרפייס המשותף ומגדירים useState חדש מסוג string, עם מחרוזת ריקה כערך דיפולט, שמחזיר זוג item ו-setItem.

2. הפרדת המחיר: באותו אופן מגדירים useState נוסף מסוג number, עם ערך דיפולט 0, שמחזיר זוג price ו-setPrice.

3. שימוש נפרד בכל state: כל לחצן קורא רק לפונקציית העדכון שלו (setItem או setPrice) בלי שום צורך לשלוח את שדות ה-state האחרים, כי כל state מנוהל בנפרד.

4. רינדור מחדש: בכל קריאה ל-setItem או ל-setPrice React מרנדרת מחדש את הפונקציה, קוראת שוב לכל ה-useState-ים ומחזירה ערכים ופונקציות מעודכנים.

שימו לב

גישה זו חוסכת את הצורך למזג ידנית את כל אובייקט ה-state בכל עדכון. לכל property יש שלוש שורות קוד (useState, שם המשתנה ופונקציית העדכון), ובהרצאה הבאה יוצג שיפור שמקצר אותן לשורה אחת.

השיעור הבא בקורס: שימוש ב-Destructuring Assignment עם useState

פרקי ההרצאה: ניהול Multiple State Values ב-React Hooks

תמלול ההרצאה: ניהול Multiple State Values ב-React Hooks

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

00:02
בהרבה מקרים אנחנו לא נרצה לנהל בפונקצ'נל קומפורננט סטייט אובייקט אחד ויחיד כזה שאנחנו היינו צריכים לבצע את הפירוק וההרכבה הזה כאן.
00:16
מה שאנחנו יכולים לעשות זה משהו שלא היינו יכולים לעשות כל כך בקלאס קומפורנט וזה לנהל בצורה נפרדת את כל אחד מהמאפיינים של הסטייט. בואו נעשה את זה, בואו נשנה את הדוגמה הזאת בפונקצ'נל ככה כי לא יהיה לנו איזשהו אובייקט סטייט אחד כזה אלא שני סטייטים אחד זה האייטם ואחד זה הפרייס אז אני נפטר מהדבר הזה ביי ביי אין לי את
00:46
האינטרפייס הזה אני לא צריך אותו ניקח את כל זה ונשים כאן נשים רגע את זה פה בצד כי אנחנו נצטרך אותו בטח ואנחנו רוצים את זה להפוך לכזה שמנהל רק פריט אחד, רק את האייטם.
01:09
אייטם זה סטרינג, אז אני פשוט משנה אותו לסטרינג. ה-Default Value של הסטרינג היה מכרוזת ריקה, אז אני שולח לכל זה מכרוזת ריקה.
01:24
אני לא אקרא למערך שמוחזר State הרי, מפני שאני הולך לנהל שני סטייטים שונים. אני אקרא לו, בוא נניח, הרי זה ה-state שמנהל רק את האייטם הזה אז מן הסתם אני לא אקרא לו state פה אני אקרא לו item נכון כי אנחנו רוצים את הפריט עצמו זה אנחנו צריכים לשנות ל-item הרי ואני לא אקרא לו set state אני אקרא לו set item בואו
01:58
נשנה את זה ל-set item אני רוצה אותו רק פה ואז אני יכול לשלוח אליו רק את המחרוזת הזאת זה השינוי כל מה שאני רואה כרגע זה שלושת השורות קוד האלה זה רק בשביל לנהל את האייטם בלבד מה שהיה לנו מקודם רק פה רק את האייטם הזה לא את כל האובייקט כמובן שאין לי state נקודה אייטם יש לי פשוט אייטם אותו הדבר אנחנו רוצים לעשות עבור הפרייס אפילו אני אכתוב את זה מההתחלה const price array שווה
02:39
use state הסוג שלו זה number היה לנו default value שהוא היה 0. עכשיו אנחנו רוצים להוציא אותו, את ה-price עצמו להוציא ל-price הרי במיקום 0. ואנחנו רוצים set price, זאת פונקציה מיוחדת שיודעת רק לעדכן את ה-price ולא שום דבר אחר.
03:00
ואנחנו רוצים price הרי במיקום 1. הוצאנו את הפונקציה. אני פונה כאן, אני מוחק את זה, פונה רק לפונקציה set price. בואי תעדכני לי את ה-price, היה לנו ותציג כאן רק את הפרייס, זאת אומרת אין לנו בעיה ב-functional component להגיד וואלה כל use state אני משתמש איתה רק עבור פרופרטי