46 lines
4.0 KiB
Markdown
46 lines
4.0 KiB
Markdown
---
|
||
title: Functional vs Class Components
|
||
localeTitle: Функциональные компоненты vs компоненты на классах
|
||
---
|
||
## React Native - Функциональные компоненты vs компоненты на классах
|
||
|
||
В React Native существуют два основных типа компонентов, из которых складывается приложение - _функциональные компоненты_ и _компоненты на классах_ . Они структурированы таким же образом, как и в обычном приложении React для веба.
|
||
|
||
### Компоненты на классах
|
||
|
||
Компоненты на классах - это классы JavaScript ES2015, которые расширяют базовый класс из React, который называется `Component` .
|
||
|
||
```js
|
||
class App extends Component {
|
||
render () {
|
||
return (
|
||
<Text>Hello World!</Text>
|
||
)
|
||
}
|
||
}
|
||
```
|
||
|
||
Это дает классу `App` доступ к методам жизненного цикла React, таким как `render`, а также к state/props функциональности от родителя.
|
||
|
||
### Функциональные компоненты
|
||
|
||
Функциональные компоненты проще. Они не управляют своим собственным состоянием и не имеют доступ к методам жизненного цикла, предоставляемым React Native. Это буквально просто старые JavaScript функции. Они также известны как компоненты без состояния (stateless).
|
||
|
||
```js
|
||
const PageOne = () => {
|
||
return (
|
||
<h1>Page One</h1>
|
||
);
|
||
}
|
||
```
|
||
|
||
Мы делаем здесь не так уж и много. `App` это компонент на классе, который рендерит `FirstComponent`, который является только функциональным компонентом, возвращающим `SecondComponent` внутрь `View`.
|
||
|
||
Очевидно, если целью было просто отрендерить `Text` компонент, который пишет "Hello World", вам не был бы нужен ни `FirstComponent`, ни `SecondComponent`. Но целью этого примера является демонстрация, как могут выглядеть вложенные функциональные компоненты.
|
||
|
||
Иногда для собственной конфигурации функциональные компоненты могут содержать много разметки. Например, `TextInput` компонент может быть кастомизирован множеством атрибутов, так что вы можете пожелать создать кастомные компоненты с различными полями, вроде email, пароля, имени пользователя и так далее. Это мощный концепт, понимая который вы сможете переиспользововать эти кастомные компоненты по всему вашему приложению.
|
||
|
||
### Итог
|
||
|
||
Компоненты на классах используются в качестве контейнеров для управления состоянием и для оборачивания вокруг дочерних компонентов. Функциональные компоненты обычно используются только для целей рендеринга - эти компоненты вызывают функции из родительских компонентов для обработки взаимодействия с пользователем или для обновления состояния.
|