קורס React & Redux By Example שיעור גישה ישירה ל DOM


זה נושא דיון מלווה לערך המקורי ב- https://www.tocode.co.il/bundles/react/lessons/domelements

Blockquote

שמתי לב שב- REACT הפונקצית חץ שונה - במקום שאחרי החץ יהיה סוגריים מסולסלות - יש סוגרים עגולות - למה?

הראת בסרטון איך מוסיפים בקלות איבר חדש למערך קיים ב- ES6

[...ary,new item]

החסרון שזה מייצר את כל המערך מחדש - למה לא להשתמש בפונקציה push?

  1. פונקציות חץ-

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

const f = (x) => x * 2;
const g = (x) => x + 1;

לזה אתה יכול להוסיף גם סוגריים עגולים אם זה עוזר לקריאות וזה מה שעושים בריאקט הרבה פעמים:

const thing = (props) => (<div>hello world</div>);

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

const f = (x) => {
  const y = x;
  return y + y + 5;
};

בריאקט אנחנו משתמשים בדרך כלל בכתיב הראשון.

לייק 1
  1. מערכים חדשים וישנים

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

לייק 1

תוכל לפרט על הדרך השניה - להגיע לנתונים של הפקד - מה שנקרא דרך ה- state … איך אני מקבל מהפקד את מה שכתוב בו בלי שאני יצביע על הרכיב DOM ?

אתה לא…

או שתפנה דרך ה DOM או שתשמור את המידע בתור ה State של פקד-אב כלשהו ואז כל פקד שצריך את המידע יקבל אותו כ Property

לא הבנתי - אבל אם יש אירוע של onInput אז הערך עכשיו נמצא ב- DOM - אני לא יכול לדעת מה הכניסו בלי להגיע ל-DOM ולשמור אותו בstate ככה שבכל מקרה אני צריך להגיע ל- DOM

אתה יכול מתוך קוד הטיפול באירוע-

changeText = (e) => {
  // now e.target.value is the new text
};