אם תלחצו על ריבוע עכשיו, אתם אמורים לראות ‘click’ במסוף (console) בכלי הפיתוח של הדפדפן שלכם.
\n\n\nשימו לב
\nכדי לחסוך בהקלדות ולהמנע מהתנהגות מבלבלת של
\nthis, אנחנו נשתמש בתחביר פונקציית חץ עבור פונקציות מנהלי אירועים מכאן והלאה:\nclass Square extends React.Component {\n render() {\n return (\n <button className=\"square\" onClick={() => console.log('click')}> {this.props.value}\n </button>\n );\n }\n}שימו לב איך עם
\nonClick={() => console.log('click')}, אנו מעבירים פונקציה בתור ה-proponClick. React תקרא לפונקציה זו רק אחרי לחיצה. לשכוח את() =>ולכתוב רקonClick={console.log('click')}היא טעות נפוצה, והיא תגרום להרצת הקוד בכל פעם שהקומפוננטה מתרנדרת מחדש.
בצעד הבא, אנחנו רוצים שהקומפוננטה ריבוע “תזכור” שהיא נלחצה, ותמלא את עצמה עם\nהסימן “X”. כדי “לזכור” דברים, קומפוננטות משתמשות ב-state (מצב).
\nקומפוננטות React יכולות להשתמש ב-state על ידי הגדרת this.state בבנאים (constructor) שלהם. this.state צריך להיחשב כפרטי לקומפוננטת ה-React שבה הוא מוגדר. בואו נאחסן את הערך הנוכחי של הריבוע ב-this.state, ונשנה אותו כאשר נלחץ על הריבוע.
תחילה, נוסיף בנאי למחלקה כדי לאתחל את ה-state.
\nclass Square extends React.Component {\n constructor(props) { super(props); this.state = { value: null, }; }\n render() {\n return (\n <button className=\"square\" onClick={() => console.log('click')}>\n {this.props.value}\n </button>\n );\n }\n}\n\nשימו לב
\nב-מחלקות של JavaScript, עליכם תמיד לקרוא לפונקציה
\nsuperבעת הגדרת בנאי של תת-מחלקה. בכל מחלקה של קומפוננטת React שיש להconstructorעליו להתחיל עם קריאה ל-super(props).
כעת נשנה את מתודת render של ריבוע כך שתציג את הערך שמוגדר ב-state בעת לחיצה:
- \n
- החליפו את
this.props.valueעםthis.state.valueבתוך התגית<button>. \n - החליפו את מנהל האירוע
onClick={...}עםonClick={() => this.setState({value: 'X'})}. \n - שימו את ה-props
classNameו-onClickבשורות נפרדות על מנת שתהיה לנו קריאות טובה יותר. \n
לאחר ביצוע שינויים אלה, תגית הכפתור <button> שמוחזרת ממתודת render של ריבוע אמורה להיראות כך:
class Square extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n value: null,\n };\n }\n\n render() {\n return (\n <button\n className=\"square\" onClick={() => this.setState({value: 'X'})} >\n {this.state.value} </button>\n );\n }\n}על ידי קריאה ל-this.setState מהאירוע onClick במתודה render של ריבוע, אנו אומרים ל-React לרנדר מחדש את ריבוע זה בכל פעם שהכפתור <button> שלו נלחץ. לאחר העדכון, הערך this.state.value של הריבוע יהיה 'X', כך שנראה את ה-X על לוח המשחק. אם תלחצו על כל אחד מהריבועים, X אמור להופיע.
כאשר אנו קוראים ל-setState בקומפוננטה כלשהי, React מעדכנת אוטומטית גם את קומפוננטות הבנים בתוכה.
כלי פיתוח
\nהתוסף React Devtools עבור Chrome ו-Firefox מאפשר לכם לבדוק עץ קומפוננטות של React עם כלי הפיתוח של הדפדפן שלכם.
\n\n \n \n \n \n![\"React](\"/static/41330fe61a925e2c3009be675bdb96a9/f2205/devtools.png\" "\\"\\"")
\n \n \n \n \n \nה-React DevTools מאפשר לכם לבדוק את ה-props וה-state של קומפוננטות ה-React שלכם.
לאחר התקנת React DevTools, באפשרותכם ללחוץ לחיצה ימנית על כל אלמנט בדף, ללחוץ על “בדוק” (“Inspect”) כדי לפתוח את כלי הפיתוח, והכרטיסיות React(“⚛️ Components” ו- “⚛️ Profiler”) יופיעו כאחרונות מימין. השתמש ב-”⚛️ Components” על מנת לבדוק(inspect) את עץ הקומפוננטות.
\nעם זאת, שימו לב כי ישנם כמה צעדים נוספים כדי לגרום לזה לעבוד עם CodePen:
\n- \n
- היכנסו או הירשמו ואשרו את הדוא”ל שלכם (נדרש כדי למנוע דואר זבל). \n
- לחצו על הלחצן “פצל” (“Fork”). \n
- לחצו על “שנה תצוגה” (“Change View”) ולאחר מכן בחרו “מצב דיבאג” (“Debug mode”). \n
- בכרטיסייה החדשה שנפתחת, ל-devtools כעת אמורה להיות הכרטיסייה React. \n
השלמת המשחק
\nעכשיו יש לנו את אבני הבניין הבסיסיים שלנו למשחק האיקס-עיגול. כדי לקבל משחק שלם, עכשיו אנחנו צריכים להחליף לסירוגין בין השמת “X”-ים ו-”O”-ים על הלוח, ואנחנו צריכים דרך כדי לקבוע את הזוכה.
\nהרמת ה-State למעלה
\nנכון לעכשיו, כל קומפוננטת ריבוע שומרת על מצב המשחק. כדי לבדוק מי הזוכה, נשמור על הערך של כל אחד מ-9 הריבועים במקום אחד.
\nאנחנו יכולים לחשוב כי הלוח צריך רק לשאול כל ריבוע על ה-state שלו. למרות שגישה זו אפשרית ב-React, אנו נרתעים ממנה משום ששימוש בה הופך את הקוד להיות קשה להבנה, רגיש לבאגים וקשה לשכתוב. במקום זאת, הגישה הטובה יותר היא לאחסן את ה-state של המשחק בקומפוננטת האב לוח במקום בכל ריבוע. קומפוננטת הלוח יכולה להגיד לכל ריבוע מה להציג על ידי העברת prop, בדיוק כמו שעשינו כאשר העברנו מספר לכל ריבוע.
\nכדי לאסוף נתונים ממספר ילדים, או כדי לאפשר לשתי קומפוננטות ילדים לתקשר אחת עם השניה, עלינו להכריז על state משותף בקומפוננטת האב שלהם במקום. קומפוננטת האב יכולה להעביר את ה-state שלה בחזרה לילדים באמצעות שימוש ב-props; פעולה זו שומרת על קומפוננטות הילדים מסונכרנות זו עם זו ועם קומפוננטת האב.
\nהרמת ה-state לקומפוננטת האב היא פעולה נפוצה כאשר משכתבים קומפוננטות React — בואו ניקח הזדמנות זו כדי לנסות זאת.
\nהוסיפו בנאי ללוח וקבעו את ה-state הראשוני של הלוח כך שיכיל מערך עם 9 ערכים ריקים (nulls) התואמים ל-9 הריבועים:
\nclass Board extends React.Component {\n constructor(props) { super(props); this.state = { squares: Array(9).fill(null), }; }\n renderSquare(i) {\n return <Square value={i} />;\n }כאשר נמלא את הלוח בשלב מאוחר יותר, המערך this.state.squares ייראה כמו משהו כזה:
[\n 'O', null, 'X',\n 'X', 'X', 'O',\n 'O', null, null,\n]מתודת “renderSquare” של הלוח כרגע נראית כך:
\n renderSquare(i) {\n return <Square value={i} />;\n }בתחילה, העברנו את props ה-value למטה מהלוח על מנת להראות מספרים מ-0 ועד 8 בכל ריבוע. בשלב קודם שונה, החלפנו את המספרים עם סימן “X” שנקבע על ידי ה-state של ריבוע עצמו. זו הסיבה שריבוע מתעלם כעת מהערך value שהלוח מעביר אליו.
כעת נשתמש במנגנון העברת ה-props שוב. אנו נשנה את הלוח כדי להורות לכל ריבוע בן באופן אינדיבידואלי על הערך הנוכחי שלו (\"X\", \"O\", או null). כבר הגדרנו את מערך הריבועים squares בבנאי הלוח, ואנו נשנה את מתודת renderSquare של הלוח כדי לקרוא ממנו:
renderSquare(i) {\n return <Square value={this.state.squares[i]} />; }כל ריבוע יקבל כעת props value אשר יהיה אחד מן הערכים 'X', 'O', או null עבור ריבועים ריקים.
כעת, אנחנו צריכים לשנות את מה שקורה כאשר ריבוע כלשהו נלחץ. קומפוננטת הלוח עכשיו שומרת אילו ריבועים מולאו. אנחנו צריכים ליצור דרך לריבוע לעדכן את ה-state של הלוח. מאחר שה-state נחשב פרטי לקומפוננטה המגדירה אותו, אין באפשרותנו לעדכן את ה-state של הלוח ישירות מהריבוע.
\nבמקום זאת, נעביר למטה פונקציה מהלוח לריבוע, ונדאג לכך שריבוע יקרא לפונקציה זו כאשר הריבוע נלחץ. נשנה את המתודה renderSquare בלוח למתודה הבאה:
renderSquare(i) {\n return (\n <Square\n value={this.state.squares[i]}\n onClick={() => this.handleClick(i)} />\n );\n }\n\nשימו לב
\nאנו מחלקים את האלמנט שהוחזר למספר שורות לשיפור הקריאות, ומוסיפים סוגריים כדי ש-JavaScript לא תוסיף נקודה-פסיק לאחר ה-
\nreturnותשבור את הקוד שלנו.
עכשיו אנחנו מעבירים למטה שני props מהלוח לריבוע: value ו-onClick. ה-props onClick היא פונקציה שאליה יכול ריבוע לקרוא כאשר לוחצים עליו. נערוך את השינויים הבאים בריבוע:
- \n
- נחליף את
this.state.valueעםthis.props.valueבמתודתrenderשל ריבוע \n - נחליף את
this.setState()עםthis.props.onClick()במתודתrenderשל ריבוע \n - נמחק את הבנאי
constructorמריבוע מכיון שריבוע כבר לא עוקב אחר ה-state של המשחק \n
לאחר ביצוע שינויים אלו, קומפוננטת הריבוע נראית כך:
\nclass Square extends React.Component { render() { return (\n <button\n className=\"square\"\n onClick={() => this.props.onClick()} >\n {this.props.value} </button>\n );\n }\n}כאשר לוחצים על ריבוע, נקראת פונקציית onClick שמסופקת על ידי הלוח. הנה סקירה של איך התנהגות זו מושגת:
- \n
- ה-prop
onClickבקומפוננטה המובנה של ה-DOM<button>גורם ל-React להגדיר מאזין לאירועי לחיצות. \n - כאשר לוחצים על הכפתור, React יקרא למטפל האירועים
onClickהמוגדר במתודהrender()של ריבוע. \n - מטפל אירוע זה קורא ל-
this.props.onClick(). ה-propsonClickשל ריבוע הוגדר על ידי הלוח. \n - מאחר שהלוח העביר את
onClick={() => this.handleClick(i)}לריבוע, הריבוע קורא ל-this.handleClick(i)של הלוח בעת לחיצה עליו. \n - עדיין לא הגדרנו את המתודה
handleClick(), ולכן שהקוד שלנו קורס. אם תלחצו על ריבוע עכשיו, אתם אמורים לראות מסך שגיאה אדום שאומר משהו כמו “this.handleClick is not a function”. \n
\n\nשימו לב
\nלתכונה
\nonClickשל אלמנט<button>של ה-DOM יש משמעות מיוחדת עבור React מכיוון שהיא קומפוננטה מובנית. עבור קומפוננטות מותאמות אישית כמו ריבוע, הגדרת השמות תלויה בנו. אנו יכולים להגדיר כל שם ל-proponClickשל ריבוע או למתודתhandleClickשל לוח, והקוד יעבוד באותו אופן. ב-React, זוהי קונבנציה להשתמש בשמות כמוon[Event]עבור props אשר מייצגים אירועים ו-handle[Event]עבור המתודות אשר מטפלות באירועים.
כאשר אנו מנסים ללחוץ על ריבוע, אנחנו אמורים לקבל שגיאה כי עדיין לא הגדרנו את handleClick. כעת נוסיף את handleClick למחלקה לוח:
class Board extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n squares: Array(9).fill(null),\n };\n }\n\n handleClick(i) { const squares = this.state.squares.slice(); squares[i] = 'X'; this.setState({squares: squares}); }\n renderSquare(i) {\n return (\n <Square\n value={this.state.squares[i]}\n onClick={() => this.handleClick(i)}\n />\n );\n }\n\n render() {\n const status = 'Next player: X';\n\n return (\n <div>\n <div className=\"status\">{status}</div>\n <div className=\"board-row\">\n {this.renderSquare(0)}\n {this.renderSquare(1)}\n {this.renderSquare(2)}\n </div>\n <div className=\"board-row\">\n {this.renderSquare(3)}\n {this.renderSquare(4)}\n {this.renderSquare(5)}\n </div>\n <div className=\"board-row\">\n {this.renderSquare(6)}\n {this.renderSquare(7)}\n {this.renderSquare(8)}\n </div>\n </div>\n );\n }\n}לאחר ביצוע שינויים אלה, נוכל שוב ללחוץ על הריבועים כדי למלא אותם, כפי שיכלנו קודם. למרות זאת, כעת ה-state מאוחסן בקומפוננטת הלוח במקום בקומפוננטות הריבועים עצמם. כאשר ה-state של הלוח משתנה, קומפוננטות הריבוע מרונדרות מחדש באופן אוטומטי. שמירת מצב כל הריבועים בקומפוננטת הלוח תאפשר לו לקבוע את הזוכה בעתיד.
\nמאחר שקומפוננטות הריבוע אינן מתחזקות state יותר, קומפוננטות הריבוע מקבלות ערכים מקומפוננטת הלוח ומעדכנות את קומפוננטת הלוח כאשר לוחצים עליהן. במונחי React, קומפוננטות הריבוע הן כעת קומפוננטות מבוקרות. הלוח הוא בעל שליטה מלאה עליהן.
\nשימו לב כיצד ב-handleClick אנו קוראים ל-.slice() כדי לייצר עותק של מערך squares על מנת לשנותו במקום לשנות את המערך הקיים. נסביר מדוע אנו יוצרים עותק של מערך squares בחלק הבא.
מהי החשיבות של אי-יכולת השתנות
\nבדוגמת הקוד הקודמת, הצענו ליצור עותק של המערך squares על ידי שימוש במתודת slice() במקום שינוי המערך הקיים. כעת נדון בהיעדר יכולת שינוי (immutability) ומדוע חשוב ללמוד יכולת זו.
יש בדרך כלל שתי גישות לשינוי נתונים. הגישה הראשונה היא לשנות את הנתונים על ידי שינוי ישיר של ערכי הנתונים. הגישה השנייה היא להחליף את הנתונים עם עותק חדש שבו יש את השינויים הרצויים.
\nשינוי נתונים עם מוטציה
\nvar player = {score: 1, name: 'Jeff'};\nplayer.score = 2;\n// Now player is {score: 2, name: 'Jeff'}שינוי נתונים ללא מוטציה
\nvar player = {score: 1, name: 'Jeff'};\n\nvar newPlayer = Object.assign({}, player, {score: 2});\n// Now player is unchanged, but newPlayer is {score: 2, name: 'Jeff'}\n\n// Or if you are using object spread syntax, you can write:\n// var newPlayer = {...player, score: 2};התוצאה הסופית היא זהה, אך על ידי העתקה ללא מוטציה (או שינוי הנתונים הבסיסיים) ישירות, אנו מרוויחים מספר יתרונות המתוארים בהמשך.
\nפיצ’רים מורכבים הופכים לפשוטים
\nאי-יכולת השתנות הופכת פיצ’רים מורכבים להרבה יותר קלים ליישום. מאוחר יותר במדריך זה, נוכל ליישם פיצ’ר של “נסיעה בזמן” (“time travel”) המאפשר לנו לסקור את היסטוריית משחק האיקס-עיגול ו”לקפוץ בחזרה” למהלכים קודמים במשחק. פונקציונליות זו אינה ספציפית למשחקים — היכולת לבטל ולבצע מחדש פעולות מסוימות היא דרישה נפוצה בתוכנות. הימנעות ממוטציה ישירה של נתונים מאפשרת לנו לשמור על גירסאות קודמות של היסטוריית המשחק ללא שינוי, ולהשתמש בהן שוב במועד מאוחר יותר.
\nזיהוי שינויים
\nזיהוי שינויים באובייקטים משתנים היא קשה מכיוון שהם משתנים ישירות. זיהוי זה מחייב את האובייקט המשתנה להיות מושווה לעותקים קודמים של עצמו ומעבר על עץ האובייקט כולו.
\nזיהוי שינויים באובייקטים בלתי ניתנים לשינוי הוא הרבה יותר קל. אם האובייקט הבלתי משתנה שאליו אנחנו מתייחסים שונה מהקודם, אזי האובייקט השתנה.
\nההחלטה מתי לרנדר מחדש ב-React
\nהיתרון העיקרי של אי-יכולת השתנות הוא שהיא עוזרת לנו לבנות קומפוננטות טהורות (pure components) ב-React. נתונים בלתי ניתנים לשינוי מאפשרים לקבוע בקלות אם בוצעו שינויים, דבר אשר מסייע לקבוע מתי קומפוננטה דורשת רינדור מחדש.
\nאתם יכולים ללמוד עוד על shouldComponentUpdate() וכיצד ניתן לבנות קומפוננטות טהורות על ידי קריאת אופטימיזציה של ביצועים.
קומפוננטות פונקציה
\nכעת נשנה את הריבוע כך שיהיה קומפוננטת פונקציה (function component).
\nב-React, קומפוננטות פונקציה הן דרך פשוטה יותר לכתוב קומפוננטות המכילות רק מתודת render ואין להן state משלהן. במקום להגדיר מחלקה המרחיבה את React.Component, אנו יכולים לכתוב פונקציה שמקבלת props כקלט ומחזירה את מה שצריך להיות מרונדר. קומפוננטות פונקציה הן פחות מייגעות לכתיבה מאשר מחלקות, וקומפוננטות רבות יכולות לבוא לידי ביטוי בדרך זו.
החליפו את מחלקת ריבוע בפונקציה הבאה:
\nfunction Square(props) {\n return (\n <button className=\"square\" onClick={props.onClick}>\n {props.value}\n </button>\n );\n}החלפנו את this.props ב-props בשתי הפעמים שהוא מופיע.
\n\nשימו לב
\nכאשר שינינו את הריבוע והפכנו אותו לקומפוננטת פונקציה, שינינו גם את
\nonClick={() => this.props.onClick()}לגירסה קצרה יותרonClick={props.onClick}(שימו לב לחיסרון בסוגריים משני הצדדים).
חלוקה לתורות
\nעכשיו אנחנו צריכים לתקן פגם ברור במשחק האיקס-עיגול שלנו: ה-”O”ים לא יכולים להיות מסומנים על הלוח.
\nאנו נקבע את המהלך הראשון להיות “X” כברירת מחדל. אנו יכולים להגדיר את ברירת המחדל הזו על ידי שינוי ה-state ההתחלתי בבנאי הלוח שלנו:
\nclass Board extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n squares: Array(9).fill(null),\n xIsNext: true, };\n }בכל פעם ששחקן מבצע מהלך, xIsNext (בוליאני) יתהפך כדי לקבוע איזה שחקן משחק בתור הבא ומצב המשחק יישמר. אנו נעדכן את הפונקציה handleClick של הלוח כדי להפוך את הערך של xIsNext:
handleClick(i) {\n const squares = this.state.squares.slice();\n squares[i] = this.state.xIsNext ? 'X' : 'O'; this.setState({\n squares: squares,\n xIsNext: !this.state.xIsNext, });\n }עם שינוי זה, “X”ים ו”O”ים יכולים להתחלף בתורות. נסו זאת!
\n בואו נשנה גם את טקסט שורת המצב (ה-”status”) בפונקציית render של הלוח כך שתציג איזה שחקן משחק את התור הבא:
render() {\n const status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');\n return (\n // ההמשך לא השתנהלאחר החלת שינויים אלה, קומפוננטת הלוח שלכם אמורה להיראות כך:
\nclass Board extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n squares: Array(9).fill(null),\n xIsNext: true, };\n }\n\n handleClick(i) {\n const squares = this.state.squares.slice(); squares[i] = this.state.xIsNext ? 'X' : 'O'; this.setState({ squares: squares, xIsNext: !this.state.xIsNext, }); }\n\n renderSquare(i) {\n return (\n <Square\n value={this.state.squares[i]}\n onClick={() => this.handleClick(i)}\n />\n );\n }\n\n render() {\n const status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');\n return (\n <div>\n <div className=\"status\">{status}</div>\n <div className=\"board-row\">\n {this.renderSquare(0)}\n {this.renderSquare(1)}\n {this.renderSquare(2)}\n </div>\n <div className=\"board-row\">\n {this.renderSquare(3)}\n {this.renderSquare(4)}\n {this.renderSquare(5)}\n </div>\n <div className=\"board-row\">\n {this.renderSquare(6)}\n {this.renderSquare(7)}\n {this.renderSquare(8)}\n </div>\n </div>\n );\n }\n}הכרזת הזוכה
\nעכשיו שאנחנו כבר מראים איזה שחקן הבא בתור, אנחנו צריכים להראות גם כאשר המשחק הסתיים ואין יותר תורות לעשות. העתיקו את פונקצית העזר הבאה והדביקו אותה בסוף הקובץ:
\nfunction calculateWinner(squares) {\n const lines = [\n [0, 1, 2],\n [3, 4, 5],\n [6, 7, 8],\n [0, 3, 6],\n [1, 4, 7],\n [2, 5, 8],\n [0, 4, 8],\n [2, 4, 6],\n ];\n for (let i = 0; i < lines.length; i++) {\n const [a, b, c] = lines[i];\n if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {\n return squares[a];\n }\n }\n return null;\n}בהינתן מערך של 9 ריבועים, פונקציה זו תבדוק מי הזוכה ותחזיר 'X', 'O', או null בהתאמה.
נקרא לפונקציה calculateWinner(squares) מתוך הפונקציה render של הלוח כדי לבדוק אם שחקן זכה. אם שחקן זכה, אנו יכולים להציג טקסט כגון “הזוכה: X” או “הזוכה: O”. אנו מחליפים את הצהרת “שורת המצב” (status) בפונקציה render של הלוח באמצעות קוד זה:
render() {\n const winner = calculateWinner(this.state.squares); let status; if (winner) { status = 'Winner: ' + winner; } else { status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O'); }\n return (\n // the rest has not changedכעת אנו יכולים לשנות את הפונקציה handleClick של הלוח כדי שתחזור מהר יותר על ידי התעלמות מקליק אם מישהו זכה במשחק או אם ריבוע כבר מלא:
handleClick(i) {\n const squares = this.state.squares.slice();\n if (calculateWinner(squares) || squares[i]) { return; } squares[i] = this.state.xIsNext ? 'X' : 'O';\n this.setState({\n squares: squares,\n xIsNext: !this.state.xIsNext,\n });\n }מזל טוב! עכשיו יש לנו משחק איקס-עיגול עובד. וזה עתה גם למדתם את היסודות של React. אז אתם כנראה המנצחים האמיתיים כאן.
\nהוספת מסע בזמן
\nבתור תרגיל אחרון, בואו נאפשר “לחזור אחורה בזמן” (time travel) למהלכים הקודמים במשחק.
\nאחסון היסטוריה של מהלכים
\nאם היינו משנים ערכים במערך squares, יישום הנסיעה בזמן היה קשה מאוד.
לעומת זאת, מאחר שהשתמשנו ב-slice() כדי ליצור עותק חדש של מערך הריבועים squares לאחר כל מהלך, והתייחסנו אליו כבלתי ניתן לשינוי. הדבר יאפשר לנו לאחסן כל גרסה קודמת של מערך הריבועים squares, ולנווט בין התורות שכבר התרחשו.
נשמור את מערכי הריבועים squares הקודמים במערך אחר שלו נקרא היסטוריה (history). מערך ההיסטוריה מייצג את כל מצבי הלוח, מהצעד הראשון ועד האחרון, ויש לו צורה כזאת:
history = [\n // Before first move\n {\n squares: [\n null, null, null,\n null, null, null,\n null, null, null,\n ]\n },\n // After first move\n {\n squares: [\n null, null, null,\n null, 'X', null,\n null, null, null,\n ]\n },\n // After second move\n {\n squares: [\n null, null, null,\n null, 'X', null,\n null, null, 'O',\n ]\n },\n // ...\n]עכשיו אנחנו צריכים להחליט איזה קומפוננטה צריכה להיות הבעלים של הסטוריית המצב (history).
הרמת ה-State למעלה, שוב
\nנרצה שקומפוננטת המשחק ברמה העליונה ביותר תציג רשימה של מהלכים קודמים. היא תזדקק לגישה למשתנה ההיסטוריה history כדי לעשות זאת, לכן נציב את היסטוריית המצבים history בקומפוננטת המשחק ברמה העליונה.
הצבת מצב ההיסטוריה history בקומפוננטת המשחק מאפשרת לנו להסיר את מצב הריבועים squares מהבן שלה, קומפוננטת הלוח. בדיוק כמו ש“הרמנו את ה-state למעלה” מקומפוננטת הריבוע לתוך קומפוננטת הלוח, עכשיו נרים אותו מהלוח לתוך הרמה העליונה שהיא קומפוננטת המשחק. זה נותן לקומפוננטת המשחק שליטה מלאה בנתוני הלוח, ומאפשר לה להנחות את הלוח לרנדר תורים קודמים ממתוך ההיסטוריה history.
ראשית, עלינו להגדיר את ה-state הראשוני של קומפוננטת המשחק בתוך הבנאי שלה:
\nclass Game extends React.Component {\n constructor(props) { super(props); this.state = { history: [{ squares: Array(9).fill(null), }], xIsNext: true, }; }\n render() {\n return (\n <div className=\"game\">\n <div className=\"game-board\">\n <Board />\n </div>\n <div className=\"game-info\">\n <div>{/* status */}</div>\n <ol>{/* TODO */}</ol>\n </div>\n </div>\n );\n }\n}הדבר הבא שיהיה עלינו לעשות הוא לדאוג שקומפוננטת הלוח תקבל את props הריבועים (squares) ו-onClick מקומפוננטת המשחק. מכיוון שיש לנו כעת מנהל אירוע לחיצה יחיד בלוח עבור מספר רב של ריבועים, נצטרך להעביר את המיקום של כל ריבוע לתוך מנהל האירוע onClick כדי לציין איזה ריבוע נלחץ. לפניכם השלבים הנדרשים כדי לשנות את קומפוננטת הלוח:
- \n
- מחיקת הבנאי
constructorמהלוח. \n - החלפת
this.state.squares[i]ב-this.props.squares[i]בפונקצייתrenderSquareשל הלוח. \n - החלפת
this.handleClick(i)ב-this.props.onClick(i)בפונקצייתrenderSquareשל הלוח. \n
קומפוננטת הלוח נראית עכשיו כך:
\nclass Board extends React.Component {\n handleClick(i) {\n const squares = this.state.squares.slice();\n if (calculateWinner(squares) || squares[i]) {\n return;\n }\n squares[i] = this.state.xIsNext ? 'X' : 'O';\n this.setState({\n squares: squares,\n xIsNext: !this.state.xIsNext,\n });\n }\n\n renderSquare(i) {\n return (\n <Square\n value={this.props.squares[i]} onClick={() => this.props.onClick(i)} />\n );\n }\n\n render() {\n const winner = calculateWinner(this.state.squares);\n let status;\n if (winner) {\n status = 'Winner: ' + winner;\n } else {\n status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');\n }\n\n return (\n <div>\n <div className=\"status\">{status}</div>\n <div className=\"board-row\">\n {this.renderSquare(0)}\n {this.renderSquare(1)}\n {this.renderSquare(2)}\n </div>\n <div className=\"board-row\">\n {this.renderSquare(3)}\n {this.renderSquare(4)}\n {this.renderSquare(5)}\n </div>\n <div className=\"board-row\">\n {this.renderSquare(6)}\n {this.renderSquare(7)}\n {this.renderSquare(8)}\n </div>\n </div>\n );\n }\n}אנו נעדכן את הפונקציה render של קומפוננטת המשחק כך שתשתמש בערך ההיסטוריה העדכני ביותר כדי לקבוע ולהציג את מצב המשחק:
render() {\n const history = this.state.history; const current = history[history.length - 1]; const winner = calculateWinner(current.squares); let status; if (winner) { status = 'Winner: ' + winner; } else { status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O'); }\n return (\n <div className=\"game\">\n <div className=\"game-board\">\n <Board squares={current.squares} onClick={(i) => this.handleClick(i)} /> </div>\n <div className=\"game-info\">\n <div>{status}</div> <ol>{/* TODO */}</ol>\n </div>\n </div>\n );\n }מאחר שקומפוננטת המשחק מרנדרת עכשיו את מצב המשחק, אנו יכולים להסיר את הקוד התואם ממתודת render של הלוח. לאחר שכתוב הקוד, הפונקציה render של הלוח נראית כך:
render() { return ( <div> <div className=\"board-row\"> {this.renderSquare(0)}\n {this.renderSquare(1)}\n {this.renderSquare(2)}\n </div>\n <div className=\"board-row\">\n {this.renderSquare(3)}\n {this.renderSquare(4)}\n {this.renderSquare(5)}\n </div>\n <div className=\"board-row\">\n {this.renderSquare(6)}\n {this.renderSquare(7)}\n {this.renderSquare(8)}\n </div>\n </div>\n );\n }לסיום, אנחנו צריכים להעביר את המתודה handleClick מקומפוננטת הלוח אל קומפוננטת המשחק. אנחנו צריכים גם לשנות את handleClick כי ה-state של קומפוננטת המשחק הוא בעל מבנה בצורה שונה. בתוך מתודת handleClick של המשחק, אנו משרשרים ערכי היסטוריה חדשים לתוך ההיסטוריה history.
handleClick(i) {\n const history = this.state.history; const current = history[history.length - 1]; const squares = current.squares.slice(); if (calculateWinner(squares) || squares[i]) {\n return;\n }\n squares[i] = this.state.xIsNext ? 'X' : 'O';\n this.setState({\n history: history.concat([{ squares: squares, }]), xIsNext: !this.state.xIsNext,\n });\n }\n\nשימו לב
\nשלא כמו המתודה
\npush()של מערך שיתכן שאתם מכירים טוב יותר, המתודהconcat()אינה משנה את המערך המקורי, לכן אנו מעדיפים אותה.
בשלב זה, קומפוננטת הלוח צריכה רק את מתודות ה-renderSquare ו-render. ה-state של המשחק והמתודה handleClick צריכים להיות בקומפוננטת המשחק.
הצגת המהלכים הקודמים
\nמכיוון שאנו מקליטים את ההיסטוריה של משחק האיקס-עיגול, אנו יכולים כעת להציג אותה לשחקן כרשימה של מהלכים קודמים.
\nלמדנו מוקדם יותר כי קומפוננטות React הן אובייקטי JavaScript מדרגה ראשונה; אנחנו יכולים להעביר אותם בין מחלקות ופונקציות ביישומים שלנו. כדי לרנדר פריטים מרובים ב- React, אנו יכולים להשתמש במערך של קומפוננטות React.
\nב-JavaScript, למערכים יש את מתודת map() אשר נעשה בה שימוש לעתים קרובות כדי למפות מידע למידע אחר, למשל:
const numbers = [1, 2, 3];\nconst doubled = numbers.map(x => x * 2); // [2, 4, 6]על ידי שימוש במתודה map, אנו יכולים למפות את היסטוריית המהלכים שלנו לקומפוננטות React המייצגות לחצנים על המסך, ולהציג רשימה של לחצנים כדי “לקפוץ” למהלכים קודמים.
בואו נמפה בעזרת map את ההיסטוריה history במתודה render של המשחק:
render() {\n const history = this.state.history;\n const current = history[history.length - 1];\n const winner = calculateWinner(current.squares);\n\n const moves = history.map((step, move) => { const desc = move ? 'Go to move #' + move : 'Go to game start'; return ( <li> <button onClick={() => this.jumpTo(move)}>{desc}</button> </li> ); });\n let status;\n if (winner) {\n status = 'Winner: ' + winner;\n } else {\n status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');\n }\n\n return (\n <div className=\"game\">\n <div className=\"game-board\">\n <Board\n squares={current.squares}\n onClick={(i) => this.handleClick(i)}\n />\n </div>\n <div className=\"game-info\">\n <div>{status}</div>\n <ol>{moves}</ol> </div>\n </div>\n );\n }כשאנחנו עוברים על המערך history, הערך במשתנה step הוא הערך הנוכחי שבאלמנט history, והערך של move הוא המפתח הנוכחי של האלמנט history. אנחנו מעוניינים רק בmove פה, לכן המשתנה step לא מוקצה.
עבור כל מהלך בהיסטוריית משחק האיקס-עיגול, אנו יוצרים פריט רשימה <li> המכיל כפתור <button>. לכפתור יש מנהל אירוע onClick אשר קורא למתודה הנקראת this.jumpTo(). לא יישמנו את המתודה jumpTo() עדיין. לעת עתה, אנחנו צריכים לראות רשימה של המהלכים שהתרחשו במשחק ואזהרה במסוף כלי הפיתוח (developer tools console) שאומרת:
\n\nWarning:\nEach child in an array or iterator should have a unique “key” prop. Check the render method of “Game”.
\n
תרגום:
\n\n\nאזהרה:\nכל ילד במערך או איטרטור צריך להיות בעל “מפתח” ייחודי. בדוק את מתודת רנדר של “משחק”.
\n
בואו נדבר על משמעות האזהרה למעלה.
\nבחירת מפתח
\nכאשר אנו מרנדרים רשימה, React מאחסן מידע על כל פריט רשימה שרונדר. כאשר אנו מעדכנים רשימה, React צריכה לקבוע מה השתנה. יכולנו להוסיף, להסיר, לסדר מחדש או לעדכן את הפריטים ברשימה.
\nתארו לעצמכם מעבר ממצב
\n<li>Alexa: 7 tasks left</li>\n<li>Ben: 5 tasks left</li>למצב
\n<li>Ben: 9 tasks left</li>\n<li>Claudia: 8 tasks left</li>\n<li>Alexa: 5 tasks left</li>בנוסף לספירות המעודכנות, בן-אדם שקורא קוד זה בוודאי יגיד שהחלפנו את הסדר של אלקסה ובן והכניסנו את קלאודיה בין אלקסה ובן. לעומת זאת, React היא תוכנת מחשב ואינה יודעת מה התכוונו. מכיוון ש-React אינה יכולה לדעת את כוונותינו, אנו צריכים לציין props מפתח (key) עבור כל פריט ברשימה כדי להבדיל כל פריט רשימה מהאחים שלו. אפשרות אחת היא להשתמש במחרוזות alexa, ben, claudia. אם היינו מציגים נתונים ממסד נתונים, היינו יכולים להשתמש במזהי מסד הנתונים של Alexa, Ben ו-Claudia.
<li key={user.id}>{user.name}: {user.taskCount} tasks left</li>כאשר רשימה מרונדרת מחדש, React לוקחת כל מפתח של פריט ברשימה ומחפשת עבור מפתח תואם בפריטים ברשימה הקודמת. אם הרשימה הנוכחית כוללת מפתח שלא היה קיים קודם לכן, React יוצרת קומפוננטה חדשה. אם ברשימה הנוכחית חסר מפתח שהיה קיים ברשימה הקודמת, React משמידה את הקומפוננטה הקודמת. אם שני מפתחות תואמים, הקומפוננטה המתאימה מועברת. מפתחות מספרים ל-React על הזהות של כל קומפוננטה, דבר המאפשר ל-React לשמור על ה-state בין רינדורים מחדש. אם מפתח של קומפוננטה משתנה, הקומפוננטה תושמד ותיווצר מחדש עם state חדש.
\nה-props key (מפתח) הוא props מיוחד ושמור ב- React (יחד עם ref, תכונה מתקדמת יותר). כאשר נוצר אלמנט, React מחלץ את ה-props key ומאחסן את המפתח ישירות על האלמנט המוחזר. למרות ש-key נראה כאילו הוא שייך ל-props, לא ניתן לפנות אל key באמצעות this.props.key. React משתמשת אוטומטית ב-key כדי להחליט אילו קומפוננטות לעדכן. קומפוננטה לא תוכל לתשאל על ה-key שלה.
מומלץ מאוד להקצות מפתחות הולמים בכל פעם שאתם בונה רשימות דינמיות. אם אין לכם מפתח הולם, מומלץ לשקול ארגון מחדש של הנתונים שלכם כך שיהיו לכם כאלו.
\nאם לא צוין מפתח, React תציג אזהרה ותשתמש באינדקס של המערך כמפתח כברירת מחדל. שימוש באינדקס המערך כמפתח הוא בעייתי בעת ניסיון לבצע סידור מחדש של פריטי רשימה או הוספה/הסרה של פריטי רשימה. הגדרת key={i} במפורש משתיקה את האזהרה אבל משאירה את אותן בעיות כמו אינדקסים של מערך והיא לא מומלצת ברוב המקרים.
מפתחות לא צריכים להיות ייחודיים גלובלית; הם רק צריכים להיות ייחודיים בין קומפוננטות לבין האחים שלהן.
\nמימוש מסע בזמן
\nבהיסטוריה של משחק האיקס-עיגול, לכל מהלך קודם יש מזהה ייחודי הקשור אליו: זהו המספר הסידורי של המהלך. המהלכים לעולם אינם מסודרים מחדש, נמחקים, או מוכנסים באמצע, לכן בטוח להשתמש באינדקס המהלך כמפתח.
\nבמתודת render של קומפוננטת המשחק, נוכל להוסיף את המפתח כ-<li key={move}> והאזהרה של React בנוגע למפתחות אמורה להיעלם:
const moves = history.map((step, move) => {\n const desc = move ?\n 'Go to move #' + move :\n 'Go to game start';\n return (\n <li key={move}> <button onClick={() => this.jumpTo(move)}>{desc}</button>\n </li>\n );\n });לחיצה על כל אחד מכפתורי פריטי הרשימה זורקת שגיאה מכיוון שמתודת jumpTo אינה מוגדרת. לפני שאנו מיישמים את jumpTo, נוסיף את מספר התור stepNumber ל-state של קומפוננטת המשחק כדי לציין באיזה צעד אנו צופים כעת.
ראשית, הוסיפו את stepNumber: 0 ל-state ההתחלתי בבנאי של המשחק:
class Game extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n history: [{\n squares: Array(9).fill(null),\n }],\n stepNumber: 0, xIsNext: true,\n };\n }בשלב הבא, נגדיר את מתודת jumpTo במשחק כדי לעדכון את מספר הצעד stepNumber. בנוסף נקבע את xIsNext ל-true אם המספר שאנו משנים את stepNumber להיות הוא זוגי:
handleClick(i) {\n // המתודה לא השתנתה\n }\n\n jumpTo(step) { this.setState({ stepNumber: step, xIsNext: (step % 2) === 0, }); }\n render() {\n // המתודה לא השתנתה\n }<<<<<<< HEAD\nנשים לב כי במתודה jumpTo, לא עדכנו את מאפיין ההיסטוריה של ה-state. זה מכיון שעדכונים ב-state קורים רק למאפיינים שמצויינים בקריאה של המתודה setState, מה שמשאיר את שאר המאפיינים כפי שהם. למידע נוסף ראה את הדוקומנטציה\n=======\nNotice in jumpTo method, we haven’t updated history property of the state. That is because state updates are merged or in more simple words React will update only the properties mentioned in setState method leaving the remaining state as is. For more info see the documentation.
\n\n\n\n\n\n\n\n\n\n\n\n\n\n84ad3308338e2bb819f4f24fa8e9dfeeffaa970b
\n
כעת נערוך מספר שינויים במתודת handleClick של המשחק אשר נקראת כאשר השחקן לוחץ על ריבוע.
מצב stepNumber שהוספנו משקף את המהלך המוצג למשתמש כעת. לאחר שנעשה מהלך חדש, עלינו לעדכן את stepNumber על-ידי הוספת stepNumber: history.length כחלק מהארגומנטים של this.setState. זה מבטיח שאנחנו לא נתקע כשאנחנו מראים את אותו מהלך אחרי שמהלך חדש כבר בוצע.
<<<<<<< HEAD\nבנוסף נחליף את הקריאה מ-this.state.history עם this.state.history.slice(0, this.state.stepNumber + 1). זה מבטיח שאם אנחנו “חוזרים אחורה בזמן” ולאחר מכן עושים מהלך חדש מנקודה זו, אנו זורקים את כל ההיסטוריה “העתידית” שעכשיו תיהפך לשגויה.\n=======\nWe will also replace reading this.state.history with this.state.history.slice(0, this.state.stepNumber + 1). This ensures that if we “go back in time” and then make a new move from that point, we throw away all the “future” history that would now be incorrect.
\n\n\n\n\n\n\n\n\n\n\n\n\n\n84ad3308338e2bb819f4f24fa8e9dfeeffaa970b
\n
handleClick(i) {\n const history = this.state.history.slice(0, this.state.stepNumber + 1); const current = history[history.length - 1];\n const squares = current.squares.slice();\n if (calculateWinner(squares) || squares[i]) {\n return;\n }\n squares[i] = this.state.xIsNext ? 'X' : 'O';\n this.setState({\n history: history.concat([{\n squares: squares\n }]),\n stepNumber: history.length, xIsNext: !this.state.xIsNext,\n });\n }לסיום, נשנה את מתודת render של קומפוננטת המשחק מרינדור קבוע של המהלך האחרון לרינדור של המהלך שבחור כעת לפי stepNumber:
render() {\n const history = this.state.history;\n const current = history[this.state.stepNumber]; const winner = calculateWinner(current.squares);\n\n // the rest has not changedאם נלחץ על כל צעד בהיסטורית המשחק, לוח האיקס-עיגול צריך להתעדכן באופן מיידי כדי להראות איך הלוח נראה לאחר שצעד זה התרחש.
\n\nלסיום
\nברכותינו! יצרתם משחק איקס-עיגול אשר:
\n- \n
- מאפשר לכם לשחק איקס-עיגול, \n
- מציין מתי ששחקן ניצח במשחק, \n
- שומר הסטוריית משחק ככל שהמשחק מתקדם, \n
- מאפשר לשחקנים לסקור את היסטוריית המשחק ולראות גרסאות קודמות של לוח המשחק. \n
עבודה טובה! אנו מקווים כי עכשיו אתם מרגישים שיש לכם הבנה טובה על איך עובד React.
\nבדקו את התוצאה הסופית כאן: תוצאה סופית.
\nאם יש לכם זמן נוסף או שתרצו לתרגל את מיומנויות React החדשות שלכם, הנה כמה רעיונות לשיפורים שאתם יכולים לעשות למשחק האיקס-עיגול אשר מוצגים בסדר קושי עולה:
\n- \n
- הציגו את המיקום עבור כל מהלך בתבנית (עמודה, שורה) ברשימת ההיסטוריה של המהלכים. \n
- הדגישו את הפריט שבחור כעת ברשימת המהלכים. \n
- שכתבו את הלוח כך שישתמש בשתי לולאות כדי לייצר את הריבועים במקום שיהיו כתובים בקידוד קשיח (hardcoded). \n
- הוספת כפתור “החלפה” המאפשר למיין את המהלכים בסדר עולה או יורד. \n
- כאשר מישהו זוכה, הדגישו את שלושת הריבועים שגרמו לניצחון. \n
- כאשר אין זוכה, הציגו הודעה על כך שהתוצאה היא תיקו. \n
במהלך מדריך זה, נגענו בקונספטים של React כולל אלמנטים, קומפוננטות, props, ו-state. לקבלת הסבר מפורט יותר על כל אחד מהנושאים הללו, עיינו בשאר התיעוד. כדי ללמוד עוד אודות הגדרת קומפוננטות, עיינו ב-React.Component API reference.