קורס React 2020 שיעור העברת State של פקד אחד בתור Prop לפקד אחר

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

שלום, יש לי 2 שאלות אשמח אם תוכל בבקשה לענות לי.

1.) לגבי ה-()useState, לא ממש הבנתי איך הוא עובד.
כאשר מפעילים את הפונקציה שבאה מ-useState, מתוך פקד שמכיל בתוכו פקדים אחרים - ה-App למשל שמכיל Counters.
האם הוא לא מאתחל שוב מחדש את הפקדים שבתוכו ובעצם נוצרים פקדים חדשים?
אם כן , כיצד הפרמטר count שבתוך ה-Counter לא מאותחל מחדש ומתחיל מ-0?

2.) לגבי העברת מידע מהפקד הפנימי להוא שמעליו , רצית לדעת האם הרעיון שלי נכון:
אני העברתי הפונקציה שמגיעה מה-useState כ-property ל-Counter ושם בתוך הפונקציה inc אני מפעילה אותו בתנאי מסויים.

#3

הי,

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

  1. מדויק. בדרך כלל עושים משהו קצת יותר ספציפי: יוצרים פונקציה בפקד הראשי שעושה בדיוק את העדכון שאת רוצה, ואת הפונקציה הזאת מעבירים. בקוד זה נראה בערך כך:
function App() {
  const [counter, setCounter] = useState(0);
  function inc() { setCounter(c => c + 1); }

  return (
    <ChildComponent onClick={inc} />
    <ChildComponent onClick={inc} />
  );
}

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

לייק 1
#4

תודה!
לגבי השאלה הראשונה, לדוגמא בקוד הבא:

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import { useState } from 'react';
import Counter from './counter';

const App = () => {
  const [delta, setDelta] = useState(1);

  function handleChangeDelta(e) {
    const newValue = Number(e.target.value);
    setDelta(newValue);
  }

  return (
    <div>
      <label>
        Increase By:
        <input type="number" value={delta} onChange={handleChangeDelta} />
      </label>

      <Counter delta={delta} />
    </div>
  )
};


const root = document.querySelector('main');
ReactDOM.render(<App />, root);

counter.js

import React from 'react';
import { useState } from 'react';

export default function Counter(props) {
  const { delta } = props;
  const [count, setCount] = useState(0);
  
  function inc() {
    setCount(x => x + delta);
  }

  return (
    <div>
      <p>
        I was clicked {count} times        
        <button onClick={inc}>Click Me</button>
      </p>
    </div>
  );
}

אני חשבתי שכאשר מופעלת הפונקציה - handleChangeDelta שמשנה את ה-state, וריאקט מפעילה שוב את הפונקציה App, אז הפקד - Counter שבתוכו נוצר ממש כמו פקד חדש. ואם הוא פקד חדש אז זו בעצם הפעם הראשונה שמופעלת הפונקציה שלו ואין לו עוד useState בזכרון.
ממך עכשיו אני מבינה שזה לא כך ולא ממש נוצר פקד חדש אלא הוא רק מעדכן את הפקד הישן.
אשמח אם תוכל יותר לחדד כיצד עובד ה - useState מאחורי הקלעים, ואיך הוא יודע האם הפקד הזה נוצר עכשיו או שכבר היה קיים.

תודה רבה!!!

#5

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

בשביל ליצור פקד חדש אנחנו צריכים שיהיה key חדש לדבר (ואני מדבר על זה בהמשך הקורס בשיעור על keys), או שהדבר מופיע במקום שונה ממה שהופיע בסיבוב הקודם

לייק 1
#6

איך פותרים את השאלה שבסוף השיעור לא הצלחתי

#7

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