Update index.md (#30378)
parent
7670cfa94f
commit
be64029374
|
@ -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, пароля, имени пользователя и так далее. Это мощный концепт, понимая который вы сможете переиспользововать эти кастомные компоненты по всему вашему приложению.
|
||||
|
||||
### Итог
|
||||
|
||||
Компоненты на классах используются в качестве контейнеров для управления состоянием и для оборачивания вокруг дочерних компонентов. Функциональные компоненты обычно используются только для целей рендеринга - эти компоненты вызывают функции из родительских компонентов для обработки взаимодействия с пользователем или для обновления состояния.
|
||||
|
|
Loading…
Reference in New Issue