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/docs/hooks-effect.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -195,7 +195,7 @@ class FriendStatus extends React.Component {
195
195
196
196
### דוגמה עם שימוש ב- Hooks {#example-using-hooks-1}
197
197
198
-
הבא נראה איך נוכל לכתוב את קומפוננטה זו בשימוש של Hooks.
198
+
הבה נראה איך נוכל לכתוב את קומפוננטה זו בשימוש של Hooks.
199
199
200
200
יכול להיות שאתה חושב שנצטרך effect נפרד על מנת לבצע את הניקוי. אולם קוד שמיועד להוספה ולהסרה של subscription כל כך קשור ש- `useEffect` מתוכנן להשאיר אותו ביחד. אם ה-effect שלך מחזיר פונקציה, ריאקט יריץ אותה כשיגיע הזמן לנקות:
Copy file name to clipboardExpand all lines: content/docs/hooks-intro.md
+9-9Lines changed: 9 additions & 9 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -5,7 +5,7 @@ permalink: docs/hooks-intro.html
5
5
next: hooks-overview.html
6
6
---
7
7
8
-
*Hooks* הם תוספת חדשה בריאקט 16.8. הם נותנים לנו להשתמש בסטייט ובתכונות אחרות של ריאקט מבלי לכתוב קלאסים.
8
+
*Hooks* הם תוספת חדשה בריאקט 16.8. הם נותנים לנו להשתמש בסטייט ובתכונות אחרות של ריאקט מבלי לכתוב מחלקות.
9
9
10
10
```js{4,5}
11
11
import React, { useState } from 'react';
@@ -50,7 +50,7 @@ function Example() {
50
50
***תואמים לאחור ב100%**. הם לא גורמים לbreaking changes.
51
51
***זמינים עכשיו**. ניתן לכתוב הוקים לאחר שחרור גרסה 16.8.0.
52
52
53
-
**אין תוכניות להסיר את הקלאסים מריאקט**. ניתן לקרוא בהרחבה על האימוץ ההדרגתי של הוקים [בחלק התחתון](#gradual-adoption-strategy) של עמוד זה.
53
+
**אין תוכניות להסיר את המחלקות מריאקט**. ניתן לקרוא בהרחבה על האימוץ ההדרגתי של הוקים [בחלק התחתון](#gradual-adoption-strategy) של עמוד זה.
54
54
55
55
**ההוקים לא משנים שום דבר בקונספטים העיקריים של ריאקט**. אדרבא, הם מספקים API ישיר יותר לקונספטים בריאקט שאנו מכירים: props, state, context, refs ומעגל החיים(lifecycle). כפי שנראה בהמשך, הוקים מאפשרים לנו דרך חדשה וחזקה לשלב בין הקונספטים הללו.
56
56
@@ -74,33 +74,33 @@ function Example() {
74
74
75
75
במקרים רבים זה לא אפשרי להפריד קומפוננטות אלו לקומפוננטות קטנות יוצר מכיוון שהלוגיקה נמצאת בכל מקום. בנוסף זה קשה להריץ טסטים עליהם. זאת אחת הסיבות שמפתחים רבים מעדיפים לשלב את ריאקט עם ספריית ניהול סטייט חיצונית. למרות זאת, השילוב גורם לעיתים ליותר מדי אבסטרקציה, דורש לקפוץ בין קבצים שונים, ומקשה על שימוש חוזר של קומפוננטות.
76
76
77
-
על מנת לפתור זאת, **הוקים נותנים לנו לפצל חלקים קשורים של קומפוננטה לפונקציות קטנות יותר (לדוגמה setup לsubscription או fetch למידע)**, במקום להיות מוכרחים לפצל בתוך מתודות lifecycle בקלאס. ניתן גם לנהל את הסטייט המקומי של הקומפוננטה עם reducer.
77
+
על מנת לפתור זאת, **הוקים נותנים לנו לפצל חלקים קשורים של קומפוננטה לפונקציות קטנות יותר (לדוגמה setup לsubscription או fetch למידע)**, במקום להיות מוכרחים לפצל בתוך מתודות lifecycle במחלקה. ניתן גם לנהל את הסטייט המקומי של הקומפוננטה עם reducer.
78
78
79
79
נדון על כך בהרחבה [בשימוש בEffect Hook](/docs/hooks-effect.html#tip-use-multiple-effects-to-separate-concerns)
80
80
81
-
### קלאסים מבלבלים גם אנשים וגם מחשבים {#classes-confuse-both-people-and-machines}
81
+
### מחלקות מבלבלות גם אנשים וגם מחשבים {#classes-confuse-both-people-and-machines}
82
82
83
-
בנוסף לעשיית קוד קשה יותר לשימוש חוזר ולארגון שלו, מצאנו שקלאסים יכולים להיות מקשה ללימוד ריאקט. צריך להבין איך `this` עובד בJavaScript, מה ששונה מאוד מרוב שפות התכנות. בנוסף חייב לזכור לעשות bind לevent handlers. בלי שימוש [בפלאגינים לא יציבים של syntax](https://babeljs.io/docs/en/babel-plugin-transform-class-properties/), הקוד מאוד ארוך. אנשים שלומדים ריאקט יכולים להסתדר עם קונספטים כמו props, state ו-flow של מידע מלמעלה למטה בקומפוננטות, אבל עדיין מתקשים עם קלאסים. ההבחנה בין קומפוננטות קלאס לקומפוננטות פונקציה בריאקט ומתי להשתמש בכל אחת מוביל לחילוקי דעות אפילו בין מפתחי ריאקט מנוסים.
83
+
בנוסף לעשיית קוד קשה יותר לשימוש חוזר ולארגון שלו, מצאנו שמחלקות עלולות להוות חסם ללימוד ריאקט. צריך להבין איך `this` עובד בJavaScript, מה ששונה מאוד מרוב שפות התכנות. בנוסף חייב לזכור לעשות bind לevent handlers. בלי שימוש [בפלאגינים לא יציבים של syntax](https://babeljs.io/docs/en/babel-plugin-transform-class-properties/), הקוד מאוד ארוך. אנשים שלומדים ריאקט יכולים להסתדר עם קונספטים כמו props, state ו-flow של מידע מלמעלה למטה בקומפוננטות, אבל עדיין מתקשים עם מחלקות. ההבחנה בין קומפוננטות מחלקה לקומפוננטות פונקציה בריאקט ומתי להשתמש בכל אחת מוביל לחילוקי דעות אפילו בין מפתחי ריאקט מנוסים.
84
84
85
-
בנוסף, ריאקט כבר קיימת יותר מ5 שנים, ואנחנו רוצים שתישאר רלוונטית גם ל5 השנים הבאות. כפי ש[Svelte](https://svelte.dev/), [Angular](https://angular.io/), [Glimmer](https://glimmerjs.com/), ואחרים הראו, יש ל[קומפילציה מבעוד מועד של קומפוננטות](https://en.wikipedia.org/wiki/Ahead-of-time_compilation) הרבה פוטנציאל. במיוחד אם זה לא מוגבל לtemplates. לאחרונה, התנסנו עם [component folding](https://github.com/facebook/react/issues/7323) באמצעות [Prepack](https://prepack.io/), וראינו תוצאות מבטיחות. לעומת זאת, מצאנו שקומפוננטות קלאס יכולות לעודד שימושים שמחלישים את שיפורים אלו. קלאסים גם גורמים לבעיות בכלים של היום. למשל, minifying של קלאסים לא עובד בצורה טובה, וגורם לפיצ׳רים כמו hot reloading לבעיות יציבות. אנחנו רוצים לאפשר API שנותן לעשות אופטימיזציות לקוד.
85
+
בנוסף, ריאקט כבר קיימת יותר מ5 שנים, ואנחנו רוצים שתישאר רלוונטית גם ל5 השנים הבאות. כפי ש[Svelte](https://svelte.dev/), [Angular](https://angular.io/), [Glimmer](https://glimmerjs.com/), ואחרים הראו, יש ל[קומפילציה מבעוד מועד של קומפוננטות](https://en.wikipedia.org/wiki/Ahead-of-time_compilation) הרבה פוטנציאל. במיוחד אם זה לא מוגבל לtemplates. לאחרונה, התנסנו עם [component folding](https://github.com/facebook/react/issues/7323) באמצעות [Prepack](https://prepack.io/), וראינו תוצאות מבטיחות. לעומת זאת, מצאנו שקומפוננטות מחלקה יכולות לעודד שימושים שמחלישים את שיפורים אלו. מחלקות גם גורמות לבעיות בכלים של היום. למשל, minifying של מחלקות לא עובד בצורה טובה, וגורם לפיצ׳רים כמו hot reloading לבעיות יציבות. אנחנו רוצים לאפשר API שנותן לעשות אופטימיזציות לקוד.
86
86
87
-
כדי לפתור בעיות אלו, **הוקים נותנים לנו להשתמש ביותר פיצ׳רים של ריאקט מבלי לכתוב קלאסים.** באופן תיאורטי, קומפוננטות ריאקט תמיד היו קרובות לפונקציות. הוקים נותנים גישה לescape hatches מבלי ללמוד טכניקות מסובכות של תכנות פונקציונלי.
87
+
כדי לפתור בעיות אלו, **הוקים נותנים לנו להשתמש ביותר פיצ׳רים של ריאקט מבלי לכתוב מחלקות.** באופן תיאורטי, קומפוננטות ריאקט תמיד היו קרובות לפונקציות. הוקים נותנים גישה לescape hatches מבלי ללמוד טכניקות מסובכות של תכנות פונקציונלי.
88
88
89
89
>דוגמאות
90
90
>
91
91
> [הצצה ל-Hooks](/docs/hooks-overview.html) הוא התחלה טובה ללמידה של הוקים.
אנחנו יודעים שמפתחי ריאקט ממוקדים בהוצאת מוצרים ושאין להם זמן לקרוא על כל API שיוצא. הוקים הם חדשים, ויכול להיות שעדיף לחכות מעט לעוד דוגמאות ומדריכים לפני ששוקלים ללמוד או להשתמש בהם.
98
98
99
99
אנחנו גם מבינים שהרף להוספת קונספט מרכזי חדש בריאקט הוא גבוה. לקוראים סקרנים, הכנו [RFC מפורט](https://github.com/reactjs/rfcs/pull/68) שצולל יותר עמוק למניע שמאחורי ההוקים, ונותן פרספקטיבה נוספת על החלטות העיצוב שלהם.
100
100
101
101
**באופן מכריע, Hooks עובדים לצד קוד קיים אז אתה יכול לאמץ אותם בהדרגה.** אין צורך למהר לעבור ל-Hooks. אנו ממליצים להמנע מכל "שכתוב גדול", במיוחד עבור קומפוננטת מחלקה מסובכת קיימת. זה לוקח קצת זמן בשינוי מחשבתי להתחיל "לחשוב ב-Hooks". מנסיונינו, זה הכי טוב להתרגל להשתמש בהתחלה ב-Hooks בקומפוננטה חדשה ולא קריטית, ולהבטיח שכולם בצוות שלך מרגישים בנוח איתם. אחרי שניסיתם את Hooks בבקשה תרגישו חופשי [לשלוח אלינו משוב](https://github.com/facebook/react/issues/new), חיובי או שלילי.
102
102
103
-
אנחנו מתכננים שהוקים יכסו את כל מקרי השימוש בקלאסים, אבל **נמשיך לתמוך בקומפוננטות קלאסים לעתיד הנראה לעין**. בפייסבוק, יש לנו עשרות אלפי קופוננטות שכתובות כקלאסים, ואין לנו שום תוכנית לשכתב אותם. במקום זאת, אנחנו מתחילים להשתמש בהוקים בקוד חדש לצד הקלאסים.
103
+
אנחנו מתכננים שהוקים יכסו את כל מקרי השימוש במחלקות, אבל **נמשיך לתמוך בקומפוננטות מחלקות לעתיד הנראה לעין**. בפייסבוק, יש לנו עשרות אלפי קומפוננטות שכתובות כמחלקות, ואין לנו שום תוכנית לשכתב אותן. במקום זאת, אנחנו מתחילים להשתמש בהוקים בקוד חדש לצד המחלקות.
0 commit comments