---
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, пароля, имени пользователя и так далее. Это мощный концепт, понимая который вы сможете переиспользововать эти кастомные компоненты по всему вашему приложению.

### Итог

Компоненты на классах используются в качестве контейнеров для управления состоянием и для оборачивания вокруг дочерних компонентов. Функциональные компоненты обычно используются только для целей рендеринга - эти компоненты вызывают функции из родительских компонентов для обработки взаимодействия с пользователем или для обновления состояния.