greatbody
/
freeCodeCamp
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Update index.md (#30378)

pull/30403/merge
Denis Kurgan 2019-05-08 11:06:57 +03:00 committed by Gregory Gubarev
parent 7670cfa94f
commit be64029374
1 changed files with 15 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
guide/russian/react-native/functional-vs-class-components/index.md
View File

@ -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`.
Компоненты класса используются в качестве компонентов контейнера для управления состоянием и переноса дочерних компонентов. Функциональные компоненты обычно используются только для целей отображения - эти компоненты вызывают функции от родительских компонентов для обработки пользовательских взаимодействий или обновлений состояния.
Очевидно, если целью было просто отрендерить `Text` компонент, который пишет "Hello World", вам не был бы нужен ни `FirstComponent`, ни `SecondComponent`. Но целью этого примера является демонстрация, как могут выглядеть вложенные функциональные компоненты.
Иногда для собственной конфигурации функциональные компоненты могут содержать много разметки. Например, `TextInput` компонент может быть кастомизирован множеством атрибутов, так что вы можете пожелать создать кастомные компоненты с различными полями, вроде email, пароля, имени пользователя и так далее. Это мощный концепт, понимая который вы сможете переиспользововать эти кастомные компоненты по всему вашему приложению.
### Итог
Компоненты на классах используются в качестве контейнеров для управления состоянием и для оборачивания вокруг дочерних компонентов. Функциональные компоненты обычно используются только для целей рендеринга - эти компоненты вызывают функции из родительских компонентов для обработки взаимодействия с пользователем или для обновления состояния.