From c2d086b085d9649def350b9292ba53d08e1a8358 Mon Sep 17 00:00:00 2001 From: Dor Moshe Date: Mon, 4 Mar 2019 08:05:05 +0200 Subject: [PATCH 1/4] Update composition-vs-inheritance.md --- content/docs/composition-vs-inheritance.md | 40 +++++++++++----------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/content/docs/composition-vs-inheritance.md b/content/docs/composition-vs-inheritance.md index c86735ef7..bfabf3729 100644 --- a/content/docs/composition-vs-inheritance.md +++ b/content/docs/composition-vs-inheritance.md @@ -1,6 +1,6 @@ --- id: composition-vs-inheritance -title: Composition vs Inheritance +title: הכלה vs הורשה permalink: docs/composition-vs-inheritance.html redirect_from: - "docs/multiple-components.html" @@ -8,15 +8,15 @@ prev: lifting-state-up.html next: thinking-in-react.html --- -React has a powerful composition model, and we recommend using composition instead of inheritance to reuse code between components. +React היא בעלת מודל הכלה רב עוצמה ואנו ממליצים להשתמש בהכלה במקום הורשה על מנת לבצע שימוש חוזר בקוד בין קומפוננטות. -In this section, we will consider a few problems where developers new to React often reach for inheritance, and show how we can solve them with composition. +בפרק זה נעסוק במספר בעיות שמתכנתי React חדשים בוחרים לעיתים קרובות להשתמש בהורשה ונציג איך ניתן לפתור בעיות אלו באמצעות הכלה. ## Containment {#containment} -Some components don't know their children ahead of time. This is especially common for components like `Sidebar` or `Dialog` that represent generic "boxes". +ישנן קומפוננטות אשר אינן מכירות את ילדיהן מראש. מצב זה נפוץ בעיקר בקומפוננטות כמו `סרגל צידי` או `דיאלוג` אשר מציגות קופסאות גנריות. -We recommend that such components use the special `children` prop to pass children elements directly into their output: +אנו ממליצים שקומפוננטות כאלו יעשו שימוש בprop `children` על מנת להעביר אלמנטי ילדים ישירות כפלט שלהן: ```js{4} function FancyBorder(props) { @@ -28,7 +28,7 @@ function FancyBorder(props) { } ``` -This lets other components pass arbitrary children to them by nesting the JSX: +דבר זה מאפשר לקומפוננטות אחרות להעביר אלמנטי ילדים שרירותיים על ידי קינון הJSX: ```js{4-9} function WelcomeDialog() { @@ -45,11 +45,11 @@ function WelcomeDialog() { } ``` -**[Try it on CodePen](https://codepen.io/gaearon/pen/ozqNOV?editors=0010)** +**[נסה זאת בCodePen](https://codepen.io/gaearon/pen/ozqNOV?editors=0010)** -Anything inside the `` JSX tag gets passed into the `FancyBorder` component as a `children` prop. Since `FancyBorder` renders `{props.children}` inside a `
`, the passed elements appear in the final output. +כל דבר בתוך תגית הJSX של `` מועבר לקומפוננטה `FancyBorder` כprop בשם `children`. מכיוון ש`FancyBorder` מרנדר `{props.children}` בתוך אלמנט ה`
`, האלמנטים המועברים מופיעים בפלט הסופי. -While this is less common, sometimes you might need multiple "holes" in a component. In such cases you may come up with your own convention instead of using `children`: +לעיתים באופן פחות נפוץ נדרשים מספר ״חורים״ בקומפוננטה. במקרים הללו אתה יכול לבחור בקונבנציה שלך במקום להשתמש ב`children`: ```js{5,8,18,21} function SplitPane(props) { @@ -78,15 +78,15 @@ function App() { } ``` -[**Try it on CodePen**](https://codepen.io/gaearon/pen/gwZOJp?editors=0010) +[**נסה זאת בCodePen**](https://codepen.io/gaearon/pen/gwZOJp?editors=0010) -React elements like `` and `` are just objects, so you can pass them as props like any other data. This approach may remind you of "slots" in other libraries but there are no limitations on what you can pass as props in React. +אלמנטי React כמו `` ו`` הם פשוט אובייקטים, אז אתה יכול להעביר אותם כprops כמו כל מידע אחר. גישה זאת יכולה להזכיר ״slots" בספריות אחרות, אבל אין הגבלות לגבי מה שניתן להעביר כprops בReact. ## Specialization {#specialization} -Sometimes we think about components as being "special cases" of other components. For example, we might say that a `WelcomeDialog` is a special case of `Dialog`. +לעיתים אנו חושבים על קומפוננטות כ״מקרים מיוחדים״ של קומפוננטות אחרות. לדוגמא, אנחנו יכולים להגיד ש`WelcomeDialog` הוא מקרה מיוחד של `Dialog`. -In React, this is also achieved by composition, where a more "specific" component renders a more "generic" one and configures it with props: +בReact, זה מושג גם על ידי הכלה, היכן שקומפוננטה ״ספציפית״ מרנדרת קומפוננטה ״גנרית״ יותר ומקנפגת אותה עם props: ```js{5,8,16-18} function Dialog(props) { @@ -111,9 +111,9 @@ function WelcomeDialog() { } ``` -[**Try it on CodePen**](https://codepen.io/gaearon/pen/kkEaOZ?editors=0010) +[**נסה זאת בCodePen**](https://codepen.io/gaearon/pen/kkEaOZ?editors=0010) -Composition works equally well for components defined as classes: +הכלה עובדת טוב בצורה שווה עבור קומפוננטות המוגדרות כמחלקות: ```js{10,27-31} function Dialog(props) { @@ -161,12 +161,12 @@ class SignUpDialog extends React.Component { } ``` -[**Try it on CodePen**](https://codepen.io/gaearon/pen/gwZbYa?editors=0010) +[**נסה זאת בCodePen**](https://codepen.io/gaearon/pen/gwZbYa?editors=0010) -## So What About Inheritance? {#so-what-about-inheritance} +## אז מה לגבי הורשה? {#so-what-about-inheritance} -At Facebook, we use React in thousands of components, and we haven't found any use cases where we would recommend creating component inheritance hierarchies. +בפייסבוק אנחנו משתמשים בReact באלפי קומפוננטות, ולא מצאנו שימושים כלשהם בהם אנו ממליצים על יצירת היררכיית הורשת קומפוננטות. -Props and composition give you all the flexibility you need to customize a component's look and behavior in an explicit and safe way. Remember that components may accept arbitrary props, including primitive values, React elements, or functions. +Props והכלה נותנים את כל הגמישות שצריך על מנת להתאים נראות והתנהגות של קומפוננטה בצורה מפורשת ובטוחה יותר. זכור כי קומפוננטות יכולות לקבל props שרירותיים, כולל ערכים פרימיטיביים, אלמנטי React או פונקציות. -If you want to reuse non-UI functionality between components, we suggest extracting it into a separate JavaScript module. The components may import it and use that function, object, or a class, without extending it. +אם ברצונך לבצע שימוש חוזר בפונקציונליות, שאינה של ממשק משתמש, אנו מציעים להוציא אותה למודול ג׳אווה סקריפטי נפרד. הקומפוננטות יכולות לייבא זאת ולהשתמש בפונקציה, באובייקט או במחלקה מבלי להרחיב אותם. From 354c1bee3acc7c487dcb551f49d9ecb08411afa9 Mon Sep 17 00:00:00 2001 From: Dor Moshe Date: Mon, 4 Mar 2019 08:05:33 +0200 Subject: [PATCH 2/4] Update composition-vs-inheritance.md --- content/docs/composition-vs-inheritance.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/composition-vs-inheritance.md b/content/docs/composition-vs-inheritance.md index bfabf3729..63cd23860 100644 --- a/content/docs/composition-vs-inheritance.md +++ b/content/docs/composition-vs-inheritance.md @@ -1,6 +1,6 @@ --- id: composition-vs-inheritance -title: הכלה vs הורשה +title: הכלה לעומת הורשה permalink: docs/composition-vs-inheritance.html redirect_from: - "docs/multiple-components.html" From 1ec184678e6cf77f90a9ba976db4b1351c132395 Mon Sep 17 00:00:00 2001 From: Dor Moshe Date: Sun, 10 Mar 2019 09:04:06 +0200 Subject: [PATCH 3/4] Update composition-vs-inheritance.md --- content/docs/composition-vs-inheritance.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/content/docs/composition-vs-inheritance.md b/content/docs/composition-vs-inheritance.md index 63cd23860..00ba7cb1b 100644 --- a/content/docs/composition-vs-inheritance.md +++ b/content/docs/composition-vs-inheritance.md @@ -10,11 +10,11 @@ next: thinking-in-react.html React היא בעלת מודל הכלה רב עוצמה ואנו ממליצים להשתמש בהכלה במקום הורשה על מנת לבצע שימוש חוזר בקוד בין קומפוננטות. -בפרק זה נעסוק במספר בעיות שמתכנתי React חדשים בוחרים לעיתים קרובות להשתמש בהורשה ונציג איך ניתן לפתור בעיות אלו באמצעות הכלה. +בפרק זה נעסוק במספר בעיות שקורות כאשר מתכנתי React חדשים בוחרים לעיתים קרובות להשתמש בהורשה ונציג איך ניתן לפתור בעיות אלו באמצעות הכלה. ## Containment {#containment} -ישנן קומפוננטות אשר אינן מכירות את ילדיהן מראש. מצב זה נפוץ בעיקר בקומפוננטות כמו `סרגל צידי` או `דיאלוג` אשר מציגות קופסאות גנריות. +ישנן קומפוננטות אשר אינן מכירות את ילדיהן מראש. מצב זה נפוץ בעיקר בקומפוננטות כמו `Sidebar` או `Dialog` אשר מציגות קופסאות גנריות. אנו ממליצים שקומפוננטות כאלו יעשו שימוש בprop `children` על מנת להעביר אלמנטי ילדים ישירות כפלט שלהן: @@ -47,9 +47,9 @@ function WelcomeDialog() { **[נסה זאת בCodePen](https://codepen.io/gaearon/pen/ozqNOV?editors=0010)** -כל דבר בתוך תגית הJSX של `` מועבר לקומפוננטה `FancyBorder` כprop בשם `children`. מכיוון ש`FancyBorder` מרנדר `{props.children}` בתוך אלמנט ה`
`, האלמנטים המועברים מופיעים בפלט הסופי. +כל דבר בתוך תגית הJSX של `` מועבר לקומפוננטה `FancyBorder`-כprop בשם `children`.-מכיוון ש`FancyBorder` מרנדר `{props.children}` בתוך אלמנט ה`
`, האלמנטים המועברים מופיעים בפלט הסופי. -לעיתים באופן פחות נפוץ נדרשים מספר ״חורים״ בקומפוננטה. במקרים הללו אתה יכול לבחור בקונבנציה שלך במקום להשתמש ב`children`: +לעיתים באופן פחות נפוץ נדרשים מספר ״חורים״ בקומפוננטה. במקרים הללו אתה יכול לבחור בקונבנציה שלך במקום להשתמש ב-`children`: ```js{5,8,18,21} function SplitPane(props) { @@ -80,13 +80,13 @@ function App() { [**נסה זאת בCodePen**](https://codepen.io/gaearon/pen/gwZOJp?editors=0010) -אלמנטי React כמו `` ו`` הם פשוט אובייקטים, אז אתה יכול להעביר אותם כprops כמו כל מידע אחר. גישה זאת יכולה להזכיר ״slots" בספריות אחרות, אבל אין הגבלות לגבי מה שניתן להעביר כprops בReact. +אלמנטי React כמו `` ו`` הם פשוט אובייקטים, אז אתה יכול להעביר אותם כ-props כמו כל מידע אחר. גישה זאת יכולה להזכיר ״slots" בספריות אחרות, אבל אין הגבלות לגבי מה שניתן להעביר כ-props -בReact. ## Specialization {#specialization} -לעיתים אנו חושבים על קומפוננטות כ״מקרים מיוחדים״ של קומפוננטות אחרות. לדוגמא, אנחנו יכולים להגיד ש`WelcomeDialog` הוא מקרה מיוחד של `Dialog`. +לעיתים אנו חושבים על קומפוננטות כ״מקרים מיוחדים״ של קומפוננטות אחרות. לדוגמא, אנחנו יכולים להגיד ש-`WelcomeDialog` הוא מקרה מיוחד של `Dialog`. -בReact, זה מושג גם על ידי הכלה, היכן שקומפוננטה ״ספציפית״ מרנדרת קומפוננטה ״גנרית״ יותר ומקנפגת אותה עם props: +-בReact, זה מושג גם על ידי הכלה, היכן שקומפוננטה ״ספציפית״ מרנדרת קומפוננטה ״גנרית״ יותר ומקנפגת אותה עם props: ```js{5,8,16-18} function Dialog(props) { @@ -165,8 +165,8 @@ class SignUpDialog extends React.Component { ## אז מה לגבי הורשה? {#so-what-about-inheritance} -בפייסבוק אנחנו משתמשים בReact באלפי קומפוננטות, ולא מצאנו שימושים כלשהם בהם אנו ממליצים על יצירת היררכיית הורשת קומפוננטות. +בפייסבוק אנחנו משתמשים ב-React באלפי קומפוננטות, ולא מצאנו שימושים כלשהם בהם אנו ממליצים על יצירת היררכיית הורשת קומפוננטות. Props והכלה נותנים את כל הגמישות שצריך על מנת להתאים נראות והתנהגות של קומפוננטה בצורה מפורשת ובטוחה יותר. זכור כי קומפוננטות יכולות לקבל props שרירותיים, כולל ערכים פרימיטיביים, אלמנטי React או פונקציות. -אם ברצונך לבצע שימוש חוזר בפונקציונליות, שאינה של ממשק משתמש, אנו מציעים להוציא אותה למודול ג׳אווה סקריפטי נפרד. הקומפוננטות יכולות לייבא זאת ולהשתמש בפונקציה, באובייקט או במחלקה מבלי להרחיב אותם. +אם ברצונך לבצע שימוש חוזר בפונקציונליות, שאינה של ממשק משתמש, אנו מציעים להוציא אותה למודול JavaScript נפרד. הקומפוננטות יכולות לייבא זאת ולהשתמש בפונקציה, באובייקט או במחלקה מבלי להרחיב אותם. From 7984607060963922d63ffe5845c84f97b1241483 Mon Sep 17 00:00:00 2001 From: Dor Moshe Date: Sun, 10 Mar 2019 09:05:04 +0200 Subject: [PATCH 4/4] Update composition-vs-inheritance.md --- content/docs/composition-vs-inheritance.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/content/docs/composition-vs-inheritance.md b/content/docs/composition-vs-inheritance.md index 00ba7cb1b..8ac178666 100644 --- a/content/docs/composition-vs-inheritance.md +++ b/content/docs/composition-vs-inheritance.md @@ -28,7 +28,7 @@ function FancyBorder(props) { } ``` -דבר זה מאפשר לקומפוננטות אחרות להעביר אלמנטי ילדים שרירותיים על ידי קינון הJSX: +דבר זה מאפשר לקומפוננטות אחרות להעביר אלמנטי ילדים שרירותיים על ידי קינון ה-JSX: ```js{4-9} function WelcomeDialog() { @@ -45,9 +45,9 @@ function WelcomeDialog() { } ``` -**[נסה זאת בCodePen](https://codepen.io/gaearon/pen/ozqNOV?editors=0010)** +**[נסה זאת ב-CodePen](https://codepen.io/gaearon/pen/ozqNOV?editors=0010)** -כל דבר בתוך תגית הJSX של `` מועבר לקומפוננטה `FancyBorder`-כprop בשם `children`.-מכיוון ש`FancyBorder` מרנדר `{props.children}` בתוך אלמנט ה`
`, האלמנטים המועברים מופיעים בפלט הסופי. +כל דבר בתוך תגית ה-JSX של `` מועבר לקומפוננטה `FancyBorder`-כprop בשם `children`.-מכיוון ש`FancyBorder` מרנדר `{props.children}` בתוך אלמנט ה-`
`, האלמנטים המועברים מופיעים בפלט הסופי. לעיתים באופן פחות נפוץ נדרשים מספר ״חורים״ בקומפוננטה. במקרים הללו אתה יכול לבחור בקונבנציה שלך במקום להשתמש ב-`children`: @@ -78,7 +78,7 @@ function App() { } ``` -[**נסה זאת בCodePen**](https://codepen.io/gaearon/pen/gwZOJp?editors=0010) +[**נסה זאת ב-CodePen**](https://codepen.io/gaearon/pen/gwZOJp?editors=0010) אלמנטי React כמו `` ו`` הם פשוט אובייקטים, אז אתה יכול להעביר אותם כ-props כמו כל מידע אחר. גישה זאת יכולה להזכיר ״slots" בספריות אחרות, אבל אין הגבלות לגבי מה שניתן להעביר כ-props -בReact. @@ -111,7 +111,7 @@ function WelcomeDialog() { } ``` -[**נסה זאת בCodePen**](https://codepen.io/gaearon/pen/kkEaOZ?editors=0010) +[**נסה זאת ב-CodePen**](https://codepen.io/gaearon/pen/kkEaOZ?editors=0010) הכלה עובדת טוב בצורה שווה עבור קומפוננטות המוגדרות כמחלקות: @@ -161,7 +161,7 @@ class SignUpDialog extends React.Component { } ``` -[**נסה זאת בCodePen**](https://codepen.io/gaearon/pen/gwZbYa?editors=0010) +[**נסה זאת ב-CodePen**](https://codepen.io/gaearon/pen/gwZbYa?editors=0010) ## אז מה לגבי הורשה? {#so-what-about-inheritance}