Skip to content
Permalink
Browse files

Docs composition vs inheritance (#27)

* Complete first cycle of composition-vs-inheritance

* complete second cycle of translation

* fix spelling errors

* apply review comments

* apply review comments

* apply review comments
  • Loading branch information...
SurenAt93 committed Mar 25, 2019
1 parent d6ebd78 commit 0ba6b642cb6a753a190a1d717a79b4860f70af12
Showing with 31 additions and 31 deletions.
  1. +30 −30 content/docs/composition-vs-inheritance.md
  2. +1 −1 content/docs/nav.yml
@@ -1,22 +1,22 @@
---
id: composition-vs-inheritance
title: Composition vs Inheritance
title: Կոմպոզիցիան ընդդեմ Ժառանգականության
permalink: docs/composition-vs-inheritance.html
redirect_from:
- "docs/multiple-components.html"
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` prop\` փոխանցելու զավակ էլեմենտներին անմիջապես նրանց ելքային արժեքներին.

```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 (
<FancyBorder color="blue">
<h1 className="Dialog-title">
Welcome
Բարի գալուստ
</h1>
<p className="Dialog-message">
Thank you for visiting our spacecraft!
Շնորհակալություն մեր տիեզերանավ հաճախելու համար։
</p>
</FancyBorder>
);
}
```

**[Try it on CodePen](https://codepen.io/gaearon/pen/ozqNOV?editors=0010)**
[**Փորձել CodePen-ում**](https://codepen.io/gaearon/pen/ozqNOV?editors=0010)

Anything inside the `<FancyBorder>` JSX tag gets passed into the `FancyBorder` component as a `children` prop. Since `FancyBorder` renders `{props.children}` inside a `<div>`, the passed elements appear in the final output.
`<FancyBorder>` JSX թեգի մեջ գտնվող ամեն ինչ փոխանցվում է `FancyBorder` կոմպոնենտին որպես `children` prop։ Քանի որ `FancyBorder`-ը արտապատկերում է `{props.children}``<div>`-ի մեջ, փոխանցված էլեմենտները հայտնվում են վերջնական ելքային արժեքում։

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 `<Contacts />` and `<Chat />` 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 էլեմենտները, ինչպիսիք են `<Contacts />`-ը և `<Chat />`-ը ուղղակի օբյեկներ են. այսպիսով դուք կարող եք փոխանցել նրանց որպես props ուրիշ ցանկացած տվյալի նման։ Այս մոտեցումը կարող է ձեզ հիշեցնել ուրիշ գրադարաններում «slot»-երի գաղափարը, սակայն այստեղ չկան սահմանափակումներ, թե ինչ կփոխանցեք React-ում որպես props։

## 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-ում սա նույնպես ձեռք է բերվում կոմպոզիցիայով, որտեղ ավելի «սպեցիֆիկ» կոմպոնենտը արտապատկերում է ավելի «ընդհանուր» կոմպոնենտի և կարգավորում է այն prop-երով.

```js{5,8,16-18}
function Dialog(props) {
@@ -105,15 +105,15 @@ function Dialog(props) {
function WelcomeDialog() {
return (
<Dialog
title="Welcome"
message="Thank you for visiting our spacecraft!" />
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 (
<Dialog title="Mars Exploration Program"
message="How should we refer to you?">
<Dialog title="Մարսի հետազոտական ծրագիր"
message="Ինչպե՞ս կարող ենք ձեզ դիմել">
<input value={this.state.login}
onChange={this.handleChange} />
<button onClick={this.handleSignUp}>
Sign Me Up!
Գրանցեք ինձ
</button>
</Dialog>
);
@@ -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.
Prop-երը և կոմպոզիցիան ձեզ տալիս են այն բոլոր ճկունությունը, որի կարիքը դուք ունեք կոմպոնենտի տեսքը և պահվածքը բացահայտ եղանակով կարգավորելու համար։ Հիշեք, որ կոմպոնենտները կարող են ընդունել կամայական prop-եր, այդ թվում տարրական արժեքներ, 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.
Եթե դուք ցանկանում ենք վերաօգտագործել ոչ UI-ական ֆունկցիոնալություն կոմպոնենտների միջև, մենք կառաջարկենք տարանջատել այն առանձին JavaScrtipt մոդուլի։ Կոմպոնենտները կարող են ներկրել(import) դա և օգտագործել այդ ֆունկցիան, օբյեկտը կամ կլասը առանց ընդլայնելու այն։
@@ -32,7 +32,7 @@
- id: lifting-state-up
title: Lifting State Up
- id: composition-vs-inheritance
title: Composition vs Inheritance
title: Կոմպոզիցիան ընդդեմ ժառանգականության
- id: thinking-in-react
title: Thinking In React
- title: Խորացված ուղեցույց

0 comments on commit 0ba6b64

Please sign in to comment.
You can’t perform that action at this time.