freeCodeCamp/guide/russian/react-native/functional-vs-class-components/index.md

title, localeTitle

title	localeTitle
Functional vs Class Components	Функциональные компоненты vs компоненты на классах

React Native - Функциональные компоненты vs компоненты на классах

В React Native существуют два основных типа компонентов, из которых складывается приложение - функциональные компоненты и компоненты на классах . Они структурированы таким же образом, как и в обычном приложении React для веба.

Компоненты на классах

Компоненты на классах - это классы JavaScript ES2015, которые расширяют базовый класс из React, который называется Component .

class App extends Component { 
    render () { 
        return ( 
            <Text>Hello World!</Text> 
        ) 
    } 
 } 

Это дает классу App доступ к методам жизненного цикла React, таким как render, а также к state/props функциональности от родителя.

Функциональные компоненты

Функциональные компоненты проще. Они не управляют своим собственным состоянием и не имеют доступ к методам жизненного цикла, предоставляемым React Native. Это буквально просто старые JavaScript функции. Они также известны как компоненты без состояния (stateless).

const PageOne = () => { 
    return ( 
        <h1>Page One</h1> 
    ); 
 } 

Мы делаем здесь не так уж и много. App это компонент на классе, который рендерит FirstComponent, который является только функциональным компонентом, возвращающим SecondComponent внутрь View.

Очевидно, если целью было просто отрендерить Text компонент, который пишет "Hello World", вам не был бы нужен ни FirstComponent, ни SecondComponent. Но целью этого примера является демонстрация, как могут выглядеть вложенные функциональные компоненты.

Иногда для собственной конфигурации функциональные компоненты могут содержать много разметки. Например, TextInput компонент может быть кастомизирован множеством атрибутов, так что вы можете пожелать создать кастомные компоненты с различными полями, вроде email, пароля, имени пользователя и так далее. Это мощный концепт, понимая который вы сможете переиспользововать эти кастомные компоненты по всему вашему приложению.

Итог

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