diff --git a/content/docs/hooks-custom.md b/content/docs/hooks-custom.md index ba51b51f1..ac3fc66da 100644 --- a/content/docs/hooks-custom.md +++ b/content/docs/hooks-custom.md @@ -69,9 +69,9 @@ function FriendListItem(props) { ## חילוץ Hook מותאם אישית {#extracting-a-custom-hook} -כשאנו רוצים לשתף לוגיקה בין שתי פונקציות ג'אווהסקריפט, אנו מחלצים אותה לפונקציה שלישית. שתי הקומפוננטות וה-Hooks הם פונקציות, אז זה עובד גם בשבילם! +כשאנו רוצים לשתף לוגיקה בין שתי פונקציות JavaScript, אנו מחלצים אותה לפונקציה שלישית. שתי הקומפוננטות וה-Hooks הם פונקציות, אז זה עובד גם בשבילם! -**Hook מותאם אישית הוא פונקציית ג'אווהסקריפט ששמה מתחיל עם "use" והיא יכולה לקרוא ל-Hooks אחרים.** לדוגמה, `useFriendStatus` היא ה-Hook המותאם אישית הראשון שלנו: +**Hook מותאם אישית הוא פונקציית JavaScript ששמה מתחיל עם "use" והיא יכולה לקרוא ל-Hooks אחרים.** לדוגמה, `useFriendStatus` היא ה-Hook המותאם אישית הראשון שלנו: ```js{3} import { useState, useEffect } from 'react'; diff --git a/content/docs/hooks-effect.md b/content/docs/hooks-effect.md index 982d191b5..52a0d8a7e 100644 --- a/content/docs/hooks-effect.md +++ b/content/docs/hooks-effect.md @@ -116,7 +116,7 @@ function Example() { **מה useEffect עושה?** על ידי שימוש ב-Hook הזה, אנו אומרים לריאקט שהקומפוננטה שלך צריכה לעשות משהו לאחר הרינדור. ריאקט תזכור את הפונקציה שהעברת (נתייחס אל זה כה- effect שלנו), ונקרא לה לאחר ביצוע עדכוני ה-DOM. ב-effect הזה, אנו קובעים את כותרת העמוד, אבל נוכל בנוסף לבצע אחזור מידע או לקרוא ל- API הכרחי אחר. -**מדוע קוראים ל- useEffect בתוך קומפוננטה?** הצבת `useEffect` בתוך הקומפוננטה נותנת לנו גישה למשתנה- `count ` state (או כל prop אחר) ישר מה-effect. אנו לא צריכים API מיוחד על מנת לקרוא אותו – זה כבר בתוך ה- scope של הפונקציה. Hooks משתמשים ב- closures ונמנעים מהצגת APIs ספציפיים של ריאקט היכן שג'אווהסקריפט נותנת פתרון. +**מדוע קוראים ל- useEffect בתוך קומפוננטה?** הצבת `useEffect` בתוך הקומפוננטה נותנת לנו גישה למשתנה- `count ` state (או כל prop אחר) ישר מה-effect. אנו לא צריכים API מיוחד על מנת לקרוא אותו – זה כבר בתוך ה- scope של הפונקציה. Hooks משתמשים ב- closures ונמנעים מהצגת APIs ספציפיים של ריאקט היכן ש-JavaScript נותנת פתרון. **האם useEffect רץ אחרי כל רינדור?** כן! כברירת מחדל, זה רץ גם אחרי הרינדור הראשון *וגם* אחרי כל עדכון. (נדבר אחר כך על [להתאים אישית את זה](#tip-optimizing-performance-by-skipping-effects).) במקום לחשוב במונחים של "mounting" ו-"עדכון", יכול להיות שיהיה לך יותר קל לחשוב ש-effects קורים "אחרי רינדור". ריאקט מבטיח שה-DOM עודכן כאשר זה מריץ את ה- effects. @@ -136,7 +136,7 @@ function Example() { אנו מצהירים על המשתנה state `count`, ואז אנו אומרים לריאקט שאנחנו צריכים להשתמש ב- effect. נעביר פונקציה ל- `useEffect`. הפונקציה שאנו מעבירים היא ה-effect שלנו. בתוך ה- effect שלנו, נקבע את כותרת העמוד על ידי שימוש ב- `document.title` שהוא חלק מה-API של הדפדפן. נוכל לקרוא את ה-`count` האחרון בתוך ה- effect בגלל שהוא בתוך ה-scope של הפונקציה שלנו. כשריאקט מרנדר את הקומפוננטה שלנו, הוא יזכור את ה- effect שבו השתמשנו, ואז יריץ את ה- effect לאחר שיעדכן את ה-DOM. זה קורה לכל רינדור, כולל הראשון. -מפתחי ג'אווהסקריפט מנוסים אולי ישימו לב שהפונקציה שמועברת ל- `useEffect` הולכת להיות שונה לכל רינדור. זה נעשה בכוונה. למעשה, זה מה שנותן לנו לקרוא את הערך `count` מתוך ה- effect מבלי לדאוג שהוא לא יהיה עדכני. כל זמן שאנו מרנדרים מחדש, אנחנו מתזמנים effect _אחר_, שמחליף את קודמו. במידה מסוימת, זה גורם ל- effects להתנהג יותר כמו חלק מתוצאת הרינדור – כל effect "שייך" לרינדור מסוים. נראה יותר ברור למה זה שימושי [בהמשך העמוד](#explanation-why-effects-run-on-each-update). +מפתחי JavaScript מנוסים אולי ישימו לב שהפונקציה שמועברת ל- `useEffect` הולכת להיות שונה לכל רינדור. זה נעשה בכוונה. למעשה, זה מה שנותן לנו לקרוא את הערך `count` מתוך ה- effect מבלי לדאוג שהוא לא יהיה עדכני. כל זמן שאנו מרנדרים מחדש, אנחנו מתזמנים effect _אחר_, שמחליף את קודמו. במידה מסוימת, זה גורם ל- effects להתנהג יותר כמו חלק מתוצאת הרינדור – כל effect "שייך" לרינדור מסוים. נראה יותר ברור למה זה שימושי [בהמשך העמוד](#explanation-why-effects-run-on-each-update). >טיפ > diff --git a/content/docs/hooks-overview.md b/content/docs/hooks-overview.md index 1a29c51cf..653bf9c55 100644 --- a/content/docs/hooks-overview.md +++ b/content/docs/hooks-overview.md @@ -161,10 +161,10 @@ Hooks נותנים לך לארגן תופעות לוואי בקומפוננטה ## ✌️ חוקי Hooks {#rules-of-hooks} -Hooks הם פונקציות ג'אווהסקריפט, אך הם מטילים שני חוקים נוספים: +Hooks הם פונקציות JavaScript, אך הם מטילים שני חוקים נוספים: * ניתן לקרוא ל-Hooks **רק ברמה העליונה**. אל תקרא ל-Hooks בתוך לולאות, פקודות תנאי, או פונקציות מקוננות. -* קרא ל-Hooks **רק מתוך קומפוננטות פונקציה של React**. אל תקרא ל-Hooks מתוך פונקציות ג'אווהסקריפט רגילות. (יש רק מקום אחד נוסף שניתן לקרוא ל-Hooks ממנו -- Hooks מותאמים אישית משלך. נלמד עליהם בעוד רגע.) +* קרא ל-Hooks **רק מתוך קומפוננטות פונקציה של React**. אל תקרא ל-Hooks מתוך פונקציות JavaScript רגילות. (יש רק מקום אחד נוסף שניתן לקרוא ל-Hooks ממנו -- Hooks מותאמים אישית משלך. נלמד עליהם בעוד רגע.) אנחנו מספקים [תוסף linting](https://www.npmjs.com/package/eslint-plugin-react-hooks) שאוכף חוקים אלו אוטומטית. אנו מבינים שחוקים אלו עלולים להיראות כמגבילים או מבלבלים בהתחלה, אך הם חיוניים כדי לגרום ל-Hooks לעבוד היטב. diff --git a/content/docs/hooks-reference.md b/content/docs/hooks-reference.md index 2d6075240..9ab6c433e 100644 --- a/content/docs/hooks-reference.md +++ b/content/docs/hooks-reference.md @@ -381,7 +381,7 @@ function TextInputWithFocusButton() { למרות זאת, `useRef()` שימושי ליותר מתכונת ה-`ref`. הוא [שימושי לשמירת כל ערך שניתן לשינוי](/docs/hooks-faq.html#is-there-something-like-instance-variables) בדומה לדרך שהיית משתמש ב-instance fields במחלקות. -זה עובד בגלל ש`useRef()` יוצר אובייקט ג'אווהסקריפט פשוט. ההבדל היחיד בין `useRef()` ויצירת אובייקט `{current: …}` בעצמך היא ש-`useRef()` ייתן לך את אותו אובייקט ref בכל רינדור. +זה עובד בגלל ש`useRef()` יוצר אובייקט JavaScript פשוט. ההבדל היחיד בין `useRef()` ויצירת אובייקט `{current: …}` בעצמך היא ש-`useRef()` ייתן לך את אותו אובייקט ref בכל רינדור. זכור ש-`useRef()` *לא* מודיע לך כשהתוכן שלו משתנה. שינוי של המאפיין `.current` לא גורם לרינדור מחדש. אם אתה רוצה להריץ קוד כש-React מצרף או מנתק ref מ-DOM node, אולי תרצה להשתמש ב-[callback ref](/docs/hooks-faq.html#how-can-i-measure-a-dom-node) במקום. @@ -419,7 +419,7 @@ FancyInput = forwardRef(FancyInput); > > אם אתה מזיז קוד מקומפוננטת מחלקה, שים לב ש-`useLayoutEffect` יורה באותו קצב כמו `componentDidMount` ו-`componentDidUpdate`. לעומת זאת, **אנו ממליצים להתחיל עם `useEffect` קודם** ולנסות את `useLayoutEffect` רק אם זה יוצר בעיה. > ->אם אתה משתמש ב-server rendering, שים לב *שגם* `useLayoutEffect` וגם `useEffect` יכולים לרוץ עד שהג'אווהסקריפט הורד. זאת הסיבה ש-React מזהיר כשקומפוננטה שהיא server-rendered מכילה `useLayoutEffect`. על מנת לתקן זאת, או שתעביר את הלוגיקה ל-`useEffect` (אם זה לא נחוץ לרינדור הראשון), או המתן עם הצגת הקומפוננטה עד לאחר רינדור הקליינט (אם ה-HTML נראה שבור עד ש-`useLayoutEffect` רץ). +>אם אתה משתמש ב-server rendering, שים לב *שגם* `useLayoutEffect` וגם `useEffect` יכולים לרוץ עד שה-Javascript הורד. זאת הסיבה ש-React מזהיר כשקומפוננטה שהיא server-rendered מכילה `useLayoutEffect`. על מנת לתקן זאת, או שתעביר את הלוגיקה ל-`useEffect` (אם זה לא נחוץ לרינדור הראשון), או המתן עם הצגת הקומפוננטה עד לאחר רינדור הקליינט (אם ה-HTML נראה שבור עד ש-`useLayoutEffect` רץ). > >על מנת להדיר קומפוננטה שצריכה layout effects מ-server-rendered HTML, רנדר אותה בתנאי עם `showChild && ` ועכב את הצגתה עם `useEffect(() => { setShowChild(true); }, [])`. בדרך זו, ממשק המשתמש לא מופיע שבור לפני הידרציה. diff --git a/content/docs/hooks-rules.md b/content/docs/hooks-rules.md index 682f0d29f..07ac6eb40 100644 --- a/content/docs/hooks-rules.md +++ b/content/docs/hooks-rules.md @@ -8,7 +8,7 @@ prev: hooks-effect.html *Hooks* הם תוספת חדשה ב- React 16.8. הם נותנים לנו להשתמש ב- state ופיצ'רים אחרים של ריאקט מבלי לכתוב מחלקה. -Hooks הם פונקציות ג'אווהסקריפט, אבל אתה צריך לנהוג על פי שני חוקים כשאתה משתמש בהם. אנו מספקים [פלאגין linting](https://www.npmjs.com/package/eslint-plugin-react-hooks) שאוכף חוקים אלו אוטומטית: +Hooks הם פונקציות JavaScript, אבל אתה צריך לנהוג על פי שני חוקים כשאתה משתמש בהם. אנו מספקים [פלאגין linting](https://www.npmjs.com/package/eslint-plugin-react-hooks) שאוכף חוקים אלו אוטומטית: ### ניתן לקרוא ל- Hooks רק ברמה העליונה {#only-call-hooks-at-the-top-level} @@ -16,7 +16,7 @@ Hooks הם פונקציות ג'אווהסקריפט, אבל אתה צריך לנ ###ניתן לקרוא ל- Hooks רק מתוך פונקציות ריאקט{#only-call-hooks-from-react-functions} -**אל תקרא ל- Hooks מתוך פונקציות ג'אווהסקריפט רגילות.** במקום זאת, אתה יכול: +**אל תקרא ל- Hooks מתוך פונקציות JavaScript רגילות.** במקום זאת, אתה יכול: * ✅ לקרוא ל- Hooks מתוך קומפוננטות פונקציה של ריאקט. * ✅ לקרוא ל- Hooks מתוך Hooks מותאמים אישית( נלמד עליהם [בעמוד הבא](/docs/hooks-custom.html)). diff --git a/content/docs/hooks-state.md b/content/docs/hooks-state.md index a602ff855..06a5bcaf0 100644 --- a/content/docs/hooks-state.md +++ b/content/docs/hooks-state.md @@ -232,7 +232,7 @@ function Example() { const [fruit, setFruit] = useState('banana'); ``` -Syntax ג'אווהסקריפט זה נקרא ["array destructuring"](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Array_destructuring). זה אומר שאנחנו מכינים שני משתנים חדשים `fruit` ו- `setFruit`, ו- `fruit` יהיה שווה לערך הראשון שמוחזר מ- `useState`, ו- `setFruit` הוא השני. זה מקביל לקוד הבא: +Syntax JavaScript זה נקרא ["array destructuring"](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Array_destructuring). זה אומר שאנחנו מכינים שני משתנים חדשים `fruit` ו- `setFruit`, ו- `fruit` יהיה שווה לערך הראשון שמוחזר מ- `useState`, ו- `setFruit` הוא השני. זה מקביל לקוד הבא: ```js var fruitStateVariable = useState('banana'); // מחזיר זוג diff --git a/content/home/examples/a-simple-component.md b/content/home/examples/a-simple-component.md index 1aa18a2b6..e4d0918d1 100644 --- a/content/home/examples/a-simple-component.md +++ b/content/home/examples/a-simple-component.md @@ -6,4 +6,4 @@ domid: hello-example קומפוננטות ריאקטיות מממשות מתודת `render()` הלוקחת קלט מידע ומחזירה מה להציג. הדוגמא הזאת משתמשת בתחביר הדומה לXML ונקרא JSX. קלט מידע המועבר לקומפוננטה יהיה נגיש ל`render()` באמצעות `this.props`. -**JSX הוא אופציונלי ולא חובה כדי להשתמש ב React.** נסה את [Babel REPL](babel://es5-syntax-example) כדי לראות את הקוד ג'אווהסקריפט הגולמי שמיוצר על ידי שלב הקומפילציה של JSX. +**JSX הוא אופציונלי ולא חובה כדי להשתמש ב React.** נסה את [Babel REPL](babel://es5-syntax-example) כדי לראות את הקוד JavaScript הגולמי שמיוצר על ידי שלב הקומפילציה של JSX. diff --git a/content/home/marketing/component-based.md b/content/home/marketing/component-based.md index 146c87394..076d19f89 100644 --- a/content/home/marketing/component-based.md +++ b/content/home/marketing/component-based.md @@ -5,4 +5,4 @@ order: 1 בנה קומפונטות מוכמסות המנהלות את הstate .שלהן ולאחר מכן הרכב אותן יחד לבניית ממשקי משתמש מורכבים -כיוון שהלוגיקה של הקומפוננטות כתובה בג'אווהסקריפט במקום בטמפלטים, אתה יכול להעביר מידע עשיר דרך האפליקציה ולהשאיר את הstate מחוץ לDOM. +כיוון שהלוגיקה של הקומפוננטות כתובה ב-JavaScript במקום בטמפלטים, אתה יכול להעביר מידע עשיר דרך האפליקציה ולהשאיר את הstate מחוץ לDOM.