קורס React 2020 שיעור ניהול State של פקד

דיונים מקורסים
#1
זהו נושא דיון מלווה לערך המקורי שב־https://www.tocode.co.il/bundles/react/lessons/07-state
#2

שלום,
אשמח בבקשה לדעת- האם המשתנה “oldValue” הוא מילה שמורה?
מאיפה הבאת את המשתנה הזה? איפה הוא מוגדר?

אשמח לחידוד בנושא,
תודה מראש,
עדן

#3

הי @edenz
אני חושב שכדאי לוודא קודם שאתה מכיר טוב את הנושא של פונקציות חץ ב JavaScript. יש שיעור בנושא כאן:
https://www.tocode.co.il/bundles/es6/lessons/arrow-functions

עכשיו לעניין שלנו-

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

function inc(value) { return value + 1 }

// And then in the component for example in onClick:
setCount(inc);

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

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

#4

נראה לי נכון לציין כי כאשר מעבירים value לinput (כמו שאתה עושה בתרגול), אוטומטית יש שגיאה בקונסול אשר מבקשת להוסיף onChange handler לאותו שדה ואז זה מאוד נח לשים לב למשהו שנשכח.
שגיאת הקונסול:
Warning: Failed prop type: You provided a value prop to a form field without an onChange handler. This will render a read-only field. If the field should be mutable use defaultValue. Otherwise, set either onChange or readOnly.

לייק 1
#5

You did not explain the logic of the three points…

{...this.props} spreads out the “own” enumerable properties in props as discrete properties on the Modal element you’re creating. For instance, if this.props contained a: 1 and b: 2 , then

<Modal {…this.props} title=‘Modal heading’ animation={false}>

would be the same as

#6

הי

לא הבנתי - מה השאלה?

#7

בדוגמה שהבאת:
יש שלוש נקודות לא הסברת מה השימוש של זה בריאקט

function toggleColor(color) {
    setColors(previousValue => (
      {
        ...previousValue,
        [color]: !previousValue[color],
      }));
  }
#8

הי
על כל הנושא של תחביר JavaScript ES6 אני ממליץ לעבור קודם על קוד ES6 שיש פה באתר:
https://www.tocode.co.il/bundles/es6

זה השיעור משם על סימן השלוש נקודות:
https://www.tocode.co.il/bundles/es6/lessons/destructuring

#9

שלום,

האם זה לא בזבזני שבכל שינוי של ה-state מפעילים מחדש את הפונקציה של הפקד שמשנה את כל תוכן העמוד? במיוחד שלא תמיד השינוי של ה-state מחייב שישפיע על התצוגה.
לדוגמא פה, יכולנו גם לא לאתחל את ה-value שמוצג ב-input, ואז השינוי של המספר היה משנה רק את המשתנה delta ולא משפיע ישירות על התצוגה אלא רק לאחר הפעלת ה-inc.

#10

הי,

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

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

לייק 1
#11

לפי מה שהבנתי כל השמת ערך חדש ל- setCount או ל- setDelta יש קריאה מחדש לפונקציה של Count ועל ידי כך כל מה שב- return נבנה מחדש.
הבנתי נכון?

#12

מדויק. אחרי הפעלת פונקציה כמו

setCount(10);

ריאקט יודע ״לרנדר״ מחדש את הקומפוננטה ואז נקראת כל פונקציית הקומפוננטה מחדש. באותה קריאה חדשה השורה:

const [count, setCount] = useState(0);

תזהה שיש כבר ערך במשתנה הסטייט הזה (הערך 10 שנשלח מ setCount), ותחזיר ל count את אותו ערך 10 במקום את הערך הראשוני 0

#13

לפי מה שראיתי כשעשיתי את תרגיל 4 עם הצבע, אפשר לתת state גם במצב כזה:

כלומר BgColor נתתי לו state משלו וזה עבד: const [BgColor, setBgColor] = useState();

ובקריאה לפונקציה שיניתי לו את ה-
const myColor = “#” + val;
setBgColor(myColor);

כלומר לא חייבים לרשום את ה-state ככה לדוגמה: value={val}.
אפשר גם לרשום ככה: style={{background: BgColor}}, כשה- BgColor הוא state בעצמו