From b91966ed15aa188ae978a22c4e76c06ce7e7fe40 Mon Sep 17 00:00:00 2001 From: Anton Akhatov Date: Mon, 4 Mar 2019 22:55:14 +0300 Subject: [PATCH 1/9] composition-vs-inheritance.md --- content/docs/composition-vs-inheritance.md | 60 +++++++++++----------- 1 file changed, 30 insertions(+), 30 deletions(-) diff --git a/content/docs/composition-vs-inheritance.md b/content/docs/composition-vs-inheritance.md index c86735ef7..be4d1e2d9 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: Композиция против наследования 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} +## Изолирование {#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". +Некоторые компоненты не знают заранее свои дочерние компоненты. Это особенно характерно для таких компонентов, как `Sidebar` или `Dialog`, которые представляют из себя как бы «контейнер». -We recommend that such components use the special `children` prop to pass children elements directly into their output: +Для таких компонентов мы рекомендуем использовать специальный проп `children`, который передаст дочерние элементы сразу в вывод: ```js{4} function FancyBorder(props) { @@ -28,28 +28,28 @@ function FancyBorder(props) { } ``` -This lets other components pass arbitrary children to them by nesting the JSX: +Это позволит передать компоненту произвольные дочерние элементы, вложив их в JSX: ```js{4-9} function WelcomeDialog() { return (

- Welcome + Добро пожаловать

- Thank you for visiting our spacecraft! + Спасибо, что посетили наш космический корабль!

); } ``` -**[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` в виде пропа `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-элементы, как `` и `` являются просто объектами, поэтому их можно передать в виде пропсов, как и любые другие данные. Этот подход может напомнить о «слотах» в других библиотеках, однако, в React нет никаких ограничений на то, что можно передать в качестве пропсов. -## Specialization {#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 это можно сделать через композицию, где «частный» вариант компонента рендерит более «общий» и настраивает его с помощью пропсов: ```js{5,8,16-18} function Dialog(props) { @@ -105,15 +105,15 @@ function Dialog(props) { function WelcomeDialog() { return ( + title="Добро пожаловать" + message="Спасибо, что посетили наш космический корабль!" /> ); } ``` -[**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) { @@ -140,12 +140,12 @@ class SignUpDialog extends React.Component { render() { return ( - + ); @@ -156,17 +156,17 @@ class SignUpDialog extends React.Component { } handleSignUp() { - alert(`Welcome aboard, ${this.state.login}!`); + alert(`Добро пожаловать на борт, ${this.state.login}!`); } } ``` -[**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. +В Facebook мы используем 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. +Пропсы и композиция дают вам всю гибкость, необходимую для настройки внешнего вида и поведения компонента явным и безопасным способом. Помните, что компоненты могут принимать произвольные пропсы, включая примитивные значения, 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. +Если вы хотите переиспользовать не связанные с внешним видом функции между компонентами, извлеките их в отдельный JavaScript-модуль. Импортируйте его в компонент и используйте эту функцию, объект или класс без расширения. From 9ca6dc69209bf9ddea02aef4444c3aca21cdbbb0 Mon Sep 17 00:00:00 2001 From: Anton Akhatov Date: Mon, 4 Mar 2019 23:50:29 +0300 Subject: [PATCH 2/9] =?UTF-8?q?=D0=B8=D0=B3=D1=80=D0=B0=20=D1=81=D0=BE=20?= =?UTF-8?q?=D1=81=D0=BC=D1=8B=D1=81=D0=BB=D0=BE=D0=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/docs/composition-vs-inheritance.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/docs/composition-vs-inheritance.md b/content/docs/composition-vs-inheritance.md index be4d1e2d9..78c364ec9 100644 --- a/content/docs/composition-vs-inheritance.md +++ b/content/docs/composition-vs-inheritance.md @@ -12,9 +12,9 @@ React имеет мощную модель композиции, поэтому В этой главе мы рассмотрим несколько проблем, которые новички в React решают наследованием и попробуем решить их с помощью композиции. -## Изолирование {#containment} +## Вставка {#containment} -Некоторые компоненты не знают заранее свои дочерние компоненты. Это особенно характерно для таких компонентов, как `Sidebar` или `Dialog`, которые представляют из себя как бы «контейнер». +Некоторые компоненты не знают заранее свои дочерние компоненты. Это особенно характерно для таких компонентов, как `Sidebar` или `Dialog`, которые представляют из себя как бы «коробку», в которую можно что-то положить. Для таких компонентов мы рекомендуем использовать специальный проп `children`, который передаст дочерние элементы сразу в вывод: From 26f761f5b57c9fc41769da6a0a266491d17ecd25 Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Tue, 5 Mar 2019 00:05:57 +0300 Subject: [PATCH 3/9] Update content/docs/composition-vs-inheritance.md Co-Authored-By: gcor --- 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 78c364ec9..f1b1beeb5 100644 --- a/content/docs/composition-vs-inheritance.md +++ b/content/docs/composition-vs-inheritance.md @@ -163,7 +163,7 @@ class SignUpDialog extends React.Component { [**Посмотреть на CodePen**](https://codepen.io/gaearon/pen/gwZbYa?editors=0010) -## Так что насчет наследования? {#so-what-about-inheritance} +## Так что насчёт наследования? {#so-what-about-inheritance} В Facebook мы используем React в тысячах компонентов, и мы не находили случаев, когда мы бы рекомендовали создавать иерархии наследования компонентов. From 65f5f2da0d93b9655389ab820ec8d113d736d3be Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Tue, 5 Mar 2019 11:53:13 +0300 Subject: [PATCH 4/9] Update content/docs/composition-vs-inheritance.md Co-Authored-By: gcor --- 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 f1b1beeb5..4c8596c54 100644 --- a/content/docs/composition-vs-inheritance.md +++ b/content/docs/composition-vs-inheritance.md @@ -14,7 +14,7 @@ React имеет мощную модель композиции, поэтому ## Вставка {#containment} -Некоторые компоненты не знают заранее свои дочерние компоненты. Это особенно характерно для таких компонентов, как `Sidebar` или `Dialog`, которые представляют из себя как бы «коробку», в которую можно что-то положить. +Некоторые компоненты не знают своих потомков заранее. Это особенно характерно для таких компонентов, как `Sidebar` или `Dialog`, которые представляют из себя как бы «коробку», в которую можно что-то положить. Для таких компонентов мы рекомендуем использовать специальный проп `children`, который передаст дочерние элементы сразу в вывод: From 7f433c9b7452272b9be1c624d17ceeed608e6229 Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Tue, 5 Mar 2019 11:55:40 +0300 Subject: [PATCH 5/9] Update content/docs/composition-vs-inheritance.md Co-Authored-By: gcor --- 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 4c8596c54..756495c65 100644 --- a/content/docs/composition-vs-inheritance.md +++ b/content/docs/composition-vs-inheritance.md @@ -47,7 +47,7 @@ function WelcomeDialog() { **[Посмотреть на CodePen](https://codepen.io/gaearon/pen/ozqNOV?editors=0010)** -Всё, что находится внутри JSX-тега ``, передаётся в компонент `FancyBorder` в виде пропа `children`. Поскольку `FancyBorder` рендерит `{props.children}` внутри `
`, все переданные элементы отображаются в окончательном выводе. +Всё, что находится внутри JSX-тега ``, передаётся в компонент `FancyBorder` через проп `children`. Поскольку `FancyBorder` рендерит `{props.children}` внутри `
`, все переданные элементы отображаются в конечном выводе. Иногда в компоненте необходимо иметь несколько мест для вставки. В таком случае можно придумать свой формат, а не использовать `children`: From 06c0150ea3cf83502285a9b359ac0f1c1980d7f2 Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Tue, 5 Mar 2019 11:55:59 +0300 Subject: [PATCH 6/9] Update content/docs/composition-vs-inheritance.md Co-Authored-By: gcor --- 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 756495c65..987b2917f 100644 --- a/content/docs/composition-vs-inheritance.md +++ b/content/docs/composition-vs-inheritance.md @@ -80,7 +80,7 @@ function App() { [**Посмотреть на CodePen**](https://codepen.io/gaearon/pen/gwZOJp?editors=0010) -Такие React-элементы, как `` и `` являются просто объектами, поэтому их можно передать в виде пропсов, как и любые другие данные. Этот подход может напомнить о «слотах» в других библиотеках, однако, в React нет никаких ограничений на то, что можно передать в качестве пропсов. +Такие React-элементы, как `` и `` являются просто объектами, поэтому их можно передать в виде пропсов, как и любые другие данные. Этот подход может напоминать понятие «слотов» в других библиотеках, однако, в React нет никаких ограничений на то, что можно передать в качестве пропсов. ## Специализация {#specialization} From 15298bd4036c6aa86ceb3d69985aac81ab3c3036 Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Tue, 5 Mar 2019 11:56:20 +0300 Subject: [PATCH 7/9] Update content/docs/composition-vs-inheritance.md Co-Authored-By: gcor --- 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 987b2917f..4f42e2e70 100644 --- a/content/docs/composition-vs-inheritance.md +++ b/content/docs/composition-vs-inheritance.md @@ -169,4 +169,4 @@ class SignUpDialog extends React.Component { Пропсы и композиция дают вам всю гибкость, необходимую для настройки внешнего вида и поведения компонента явным и безопасным способом. Помните, что компоненты могут принимать произвольные пропсы, включая примитивные значения, React-элементы или функции. -Если вы хотите переиспользовать не связанные с внешним видом функции между компонентами, извлеките их в отдельный JavaScript-модуль. Импортируйте его в компонент и используйте эту функцию, объект или класс без расширения. +Если вы хотите переиспользовать не связанные с внешним видом функции между компонентами, извлеките их в отдельный JavaScript-модуль. Импортируйте его в компонент и используйте эту функцию, объект или класс, не расширяя их. From 1a3d8d77d8becb0636a5dd9478797486f6bc07b2 Mon Sep 17 00:00:00 2001 From: Anton Ahatov Date: Tue, 5 Mar 2019 12:14:04 +0300 Subject: [PATCH 8/9] Update content/docs/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 4f42e2e70..7b1d4220b 100644 --- a/content/docs/composition-vs-inheritance.md +++ b/content/docs/composition-vs-inheritance.md @@ -16,7 +16,7 @@ React имеет мощную модель композиции, поэтому Некоторые компоненты не знают своих потомков заранее. Это особенно характерно для таких компонентов, как `Sidebar` или `Dialog`, которые представляют из себя как бы «коробку», в которую можно что-то положить. -Для таких компонентов мы рекомендуем использовать специальный проп `children`, который передаст дочерние элементы сразу в вывод: +Для таких компонентов мы рекомендуем использовать специальный проп `children`, который передаст дочерние элементы сразу на вывод: ```js{4} function FancyBorder(props) { From 5b071d659d8e9a37e88ee4f2580c00fbb7d22615 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Sun, 10 Mar 2019 05:16:18 +0300 Subject: [PATCH 9/9] =?UTF-8?q?composition-vs-inheritance:=20=D0=BD=D0=B5?= =?UTF-8?q?=D0=B1=D0=BE=D0=BB=D1=8C=D1=88=D0=B8=D0=B5=20=D0=BF=D1=80=D0=B0?= =?UTF-8?q?=D0=B2=D0=BA=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/docs/composition-vs-inheritance.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/docs/composition-vs-inheritance.md b/content/docs/composition-vs-inheritance.md index 7b1d4220b..d7e254bb5 100644 --- a/content/docs/composition-vs-inheritance.md +++ b/content/docs/composition-vs-inheritance.md @@ -165,8 +165,8 @@ class SignUpDialog extends React.Component { ## Так что насчёт наследования? {#so-what-about-inheritance} -В Facebook мы используем React в тысячах компонентов, и мы не находили случаев, когда мы бы рекомендовали создавать иерархии наследования компонентов. +В Facebook мы используем React в тысячах компонентов, и не находили случаев, когда бы рекомендовали создавать иерархии наследования компонентов. Пропсы и композиция дают вам всю гибкость, необходимую для настройки внешнего вида и поведения компонента явным и безопасным способом. Помните, что компоненты могут принимать произвольные пропсы, включая примитивные значения, React-элементы или функции. -Если вы хотите переиспользовать не связанные с внешним видом функции между компонентами, извлеките их в отдельный JavaScript-модуль. Импортируйте его в компонент и используйте эту функцию, объект или класс, не расширяя их. +Если вы хотите переиспользовать не связанную с внешним видом функциональность между компонентами, извлеките её в отдельный JavaScript-модуль. Импортируйте его в компонент и используйте эту функцию, объект или класс, не расширяя их.