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

В React существуют в основном два типа компонентов:

*   Функциональные компоненты
*   Компоненты с использованием классов

## Функциональные компоненты
 
*   Функциональные компоненты - это обыкновенные функции JavaScript. Они обычно создаются с помощью стрелочных функций, но также могут быть созданы с помощью ключевого слова `function`.
*   Иногда они называются «простыми» или «без состояния», поскольку они просто принимают данные и отображают их в какой-либо форме; то есть они в основном отвечают за отрисовку пользовательского интерфейса.
*   React методы жизненного цикла (например, `componentDidMount` ) не могут использоваться в функциональных компонентах.
*   В функциональных компонентах не используется метод рендеринга (`render`).
*   Они в основном отвечают за отображение пользовательского интерфейса и обычно являются только презентационными (например, компонент Button).
*   Функциональные компоненты могут принимать и использовать свойства (props).
*   Функциональные компоненты являются более предпочтительными для использования в вашем коде, если вам не нужно использовать состояние React.

```js
import React from "react"; 
 
 const Person = props => ( 
  <div> 
    <h1>Hello, {props.name}</h1> 
  </div> 
 ); 
 
 export default Person; 
```

## Компоненты с использованием классов

*   Компоненты с классами используют ключевое слово class из ES6 и расширяют класс `Component` в React.
*   Иногда они называются «умными» или «с состоянием», поскольку они предназначены для реализации логики и состояние приложения.
*   Методы жизненного цикла React могут использоваться внутри компонентов класса (например, `componentDidMount` ).
*   Вы передаете свойства (props) вниз к классовым компонентам и получаете доступ к соответствующим свойствам с помощью `this.props`

```js
import React, { Component } from "react"; 
 
 class Person extends Component { 
  constructor(props){ 
    super(props); 
    this.state = { 
      myState: true; 
    } 
  } 
 
  render() { 
    return ( 
      <div> 
        <h1>Hello Person</h1> 
      </div> 
    ); 
  } 
 } 
 
 export default Person; 
```

## Дополнительная информация

*   [React компоненты](https://reactjs.org/docs/components-and-props.html)
*   [Функциональные компоненты класса vs компоненты с использованием классов](https://react.christmas/16)
*   [Компоненты с состоянием vs компонентов без состояния](https://code.tutsplus.com/tutorials/stateful-vs-stateless-functional-components-in-react--cms-29541)
*   [Состояние и жизненный цикл](https://reactjs.org/docs/state-and-lifecycle.html)