You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: content/tutorial/tutorial.md
+5-5Lines changed: 5 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -153,7 +153,7 @@ class ShoppingList extends React.Component {
153
153
נגיע לתגיות המצחיקות שמזכירות XML בהמשך. אנו משתמשים בקומפוננטות כדי לומר ל-React מה אנחנו רוצים לראות על המסך. כאשר הנתונים שלנו ישתנו, React יעדכן וירנדר מחדש את הקומפוננטות שלנו.
154
154
155
155
156
-
כאן, ShoppingList היא **מחלקת קומפוננטת React**, או **מסוג קומפוננטת React**. קומפוננטה לוקחת פרמטרים, הנקראים `props` (פרופס, קיצור עבור "מאפיינים", properties), ומחזיר היררכיה של תצוגות (views) להצגה דרך המתודה `render`.
156
+
כאן, ShoppingList היא **מחלקת קומפוננטת React**, או **מסוג קומפוננטת React**. קומפוננטה מקבלת פרמטרים, הנקראים `props` (פרופס, קיצור עבור "מאפיינים", properties), ומחזירה היררכיה של תצוגות (views) להצגה דרך המתודה `render`.
157
157
158
158
המתודה `render` מחזירה *תיאור* של מה שאתם רוצים לראות על המסך. React לוקחת את התיאור ומציגה את התוצאה. בפרט, `render` מחזירה **אלמנט React**, שהוא תיאור מופשט של מה שצריך לרנדר. רוב מפתחי React משתמשים בתחביר מיוחד בשם "JSX" שהופך את המבנים האלה לקלים יותר לכתיבה. התחביר `<div />` משתנה בזמן הבנייה (build time) ל-`React.createElement('div')`. הדוגמה שלמעלה שקולה לקוד:
159
159
@@ -358,7 +358,7 @@ class Square extends React.Component {
358
358
359
359
אנחנו יכולים לחשוב כי הלוח צריך רק לשאול כל ריבוע על ה-state שלו. למרות שגישה זו אפשרית ב-React, אנו נרתעים ממנה משום ששימוש בה הופך את הקוד להיות קשה להבנה, רגיש לבאגים וקשה לשכתוב. במקום זאת, הגישה הטובה יותר היא לאחסן את ה-state של המשחק בקומפוננטת האב לוח במקום בכל ריבוע. קומפוננטת הלוח יכולה להגיד לכל ריבוע מה להציג על ידי העברת prop, [בדיוק כמו שעשינו כאשר העברנו מספר לכל ריבוע](#passing-data-through-props).
360
360
361
-
**כדי לאסוף נתונים ממספר ילדים, או כדי לאפשר לשני קומפוננטות ילדים לתקשר אחת עם השניה, עלינו להכריז על state משותף בקומפוננטת האב שלהם במקום. קומפוננטת האב יכולה להעביר את ה-state שלה בחזרה לילדים באמצעות שימוש ב-props; פעולה זו שומרת על קומפוננטות הילדים מסונכרנות זו עם זו ועם קומפוננטת האב.**
361
+
**כדי לאסוף נתונים ממספר ילדים, או כדי לאפשר לשתי קומפוננטות ילדים לתקשר אחת עם השניה, עלינו להכריז על state משותף בקומפוננטת האב שלהם במקום. קומפוננטת האב יכולה להעביר את ה-state שלה בחזרה לילדים באמצעות שימוש ב-props; פעולה זו שומרת על קומפוננטות הילדים מסונכרנות זו עם זו ועם קומפוננטת האב.**
362
362
363
363
הרמת ה-state לקומפוננטת האב היא פעולה נפוצה כאשר משכתבים קומפוננטות React -- בואו ניקח הזדמנות זו כדי לנסות זאת.
364
364
@@ -435,7 +435,7 @@ class Board extends React.Component {
435
435
* נחליף את `this.setState()` עם `this.props.onClick()` במתודת `render` של ריבוע
436
436
* נמחק את הבנאי `constructor` מריבוע מכיון שריבוע כבר לא עוקב אחר ה-state של המשחק
437
437
438
-
לאחר ביצוע שינויים אלו, קומפוננטת הריבוע נראה כך:
438
+
לאחר ביצוע שינויים אלו, קומפוננטת הריבוע נראית כך:
439
439
440
440
```javascript{1,2,6,8}
441
441
class Square extends React.Component {
@@ -462,7 +462,7 @@ class Square extends React.Component {
462
462
463
463
>שימו לב
464
464
>
465
-
>לתכונה `onClick` של אלמנט `<button>` של ה-DOM יש משמעות מיוחדת עבור React מכיוון שהיא קומפוננטה מובנה. עבור קומפוננטות מותאמות אישית כמו ריבוע, הגדרת השמות תלויה בנו. אנו יכולים להגדיר כל שם ל-prop `onClick` של ריבוע או למתודת `handleClick` של לוח, והקוד יעבוד באותו אופן. ב-React, זוהי קונבנציה להשתמש בשמות כמו `on[Event]` עבור props אשר מייצגים אירועים ו-`handle[Event]` עבור המתודות אשר מטפלות באירועים.
465
+
>לתכונה `onClick` של אלמנט `<button>` של ה-DOM יש משמעות מיוחדת עבור React מכיוון שהיא קומפוננטה מובנית. עבור קומפוננטות מותאמות אישית כמו ריבוע, הגדרת השמות תלויה בנו. אנו יכולים להגדיר כל שם ל-prop `onClick` של ריבוע או למתודת `handleClick` של לוח, והקוד יעבוד באותו אופן. ב-React, זוהי קונבנציה להשתמש בשמות כמו `on[Event]` עבור props אשר מייצגים אירועים ו-`handle[Event]` עבור המתודות אשר מטפלות באירועים.
466
466
467
467
כאשר אנו מנסים ללחוץ על ריבוע, אנחנו אמורים לקבל שגיאה כי עדיין לא הגדרנו את `handleClick`. כעת נוסיף את `handleClick` למחלקה לוח:
#### ההחלטה מתי לרנדר מחדש ב-React {#determining-when-to-re-render-in-react}
565
565
566
-
היתרון העיקרי של אי-יכולת השתנות הוא שהיא עוזר לנו לבנות _קומפוננטות טהורות (pure components)_ ב-React. נתונים בלתי ניתנים לשינוי מאפשרים לקבוע בקלות אם בוצעו שינויים, דבר אשר מסייע לקבוע מתי קומפוננטה דורשת רינדור מחדש.
566
+
היתרון העיקרי של אי-יכולת השתנות הוא שהיא עוזרת לנו לבנות _קומפוננטות טהורות (pure components)_ ב-React. נתונים בלתי ניתנים לשינוי מאפשרים לקבוע בקלות אם בוצעו שינויים, דבר אשר מסייע לקבוע מתי קומפוננטה דורשת רינדור מחדש.
567
567
568
568
אתם יכולים ללמוד עוד על `shouldComponentUpdate()` וכיצד ניתן לבנות *קומפוננטות טהורות* על ידי קריאת [אופטימיזציה של ביצועים](/docs/optimizing-performance.html#examples).
0 commit comments