diff --git a/guide/russian/react-native/functional-vs-class-components/index.md b/guide/russian/react-native/functional-vs-class-components/index.md index db64109f347..daa8b57c7c1 100644 --- a/guide/russian/react-native/functional-vs-class-components/index.md +++ b/guide/russian/react-native/functional-vs-class-components/index.md @@ -1,14 +1,14 @@ --- title: Functional vs Class Components -localeTitle: Функциональные компоненты класса +localeTitle: Функциональные компоненты vs компоненты на классах --- -## React Native - Функциональные компоненты класса +## React Native - Функциональные компоненты vs компоненты на классах -В React Native существуют два основных типа компонентов, которые составляют _функциональные компоненты приложения_ и _компоненты класса_ . Они структурированы так же, как и в обычном приложении React для Интернета. +В React Native существуют два основных типа компонентов, из которых складывается приложение - _функциональные компоненты_ и _компоненты на классах_ . Они структурированы таким же образом, как и в обычном приложении React для веба. -### Компоненты класса +### Компоненты на классах -Компоненты класса - это классы JavaScript ES2015, которые расширяют базовый класс от React, называемого `Component` . +Компоненты на классах - это классы JavaScript ES2015, которые расширяют базовый класс из React, который называется `Component` . ```js class App extends Component { @@ -20,11 +20,11 @@ class App extends Component { } ``` -Это дает классу `App` доступ к жизненным циклам React, таким как `render` а также функции state / props от родителя. +Это дает классу `App` доступ к методам жизненного цикла React, таким как `render`, а также к state/props функциональности от родителя. ### Функциональные компоненты -Функциональные компоненты проще. Они не управляют своим собственным состоянием или имеют доступ к методам жизненного цикла, предоставленным React Native. Это буквально простые старые функции JavaScript. Они также известны как компоненты без гражданства. +Функциональные компоненты проще. Они не управляют своим собственным состоянием и не имеют доступ к методам жизненного цикла, предоставляемым React Native. Это буквально просто старые JavaScript функции. Они также известны как компоненты без состояния (stateless). ```js const PageOne = () => { @@ -34,6 +34,12 @@ const PageOne = () => { } ``` -### Резюме +Мы делаем здесь не так уж и много. `App` это компонент на классе, который рендерит `FirstComponent`, который является только функциональным компонентом, возвращающим `SecondComponent` внутрь `View`. -Компоненты класса используются в качестве компонентов контейнера для управления состоянием и переноса дочерних компонентов. Функциональные компоненты обычно используются только для целей отображения - эти компоненты вызывают функции от родительских компонентов для обработки пользовательских взаимодействий или обновлений состояния. \ No newline at end of file +Очевидно, если целью было просто отрендерить `Text` компонент, который пишет "Hello World", вам не был бы нужен ни `FirstComponent`, ни `SecondComponent`. Но целью этого примера является демонстрация, как могут выглядеть вложенные функциональные компоненты. + +Иногда для собственной конфигурации функциональные компоненты могут содержать много разметки. Например, `TextInput` компонент может быть кастомизирован множеством атрибутов, так что вы можете пожелать создать кастомные компоненты с различными полями, вроде email, пароля, имени пользователя и так далее. Это мощный концепт, понимая который вы сможете переиспользововать эти кастомные компоненты по всему вашему приложению. + +### Итог + +Компоненты на классах используются в качестве контейнеров для управления состоянием и для оборачивания вокруг дочерних компонентов. Функциональные компоненты обычно используются только для целей рендеринга - эти компоненты вызывают функции из родительских компонентов для обработки взаимодействия с пользователем или для обновления состояния.