JS27 января, 2020

Как создать компонент в Реакт?

Существует два основных способа создания компонентов в Реакт.

1. Классовый компонент

Появление в Javascript ES6 классов позволило создавать классовые компоненты более простым способом. 

Классовый компонент представляет собой класс, наследуемый от React.Component, внутри которого как минимум должен быть определен метод render. Все остальные методы (в том числе и конструктор) являются необязательными.

Классовые компоненты лучше всего использовать, когда нужно хранить состояние внутри компонента, или нужно использовать методы жизненного цикла.

Пример:

class Button extends React.Component {
    render() {
        return <button>{this.props.name}</button>;
    }
}

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

Функциональный компонент — это компонент, реализованный в виде функции. На вход функции подаются пропы, а возвращает она Реакт элементы.

До недавнего времени функциональные компоненты рекомендовалось использовать, если нет необходимости хранить состояние компонента или использовать методы жизненного цикла. Однако с появлением хуков в версии Реакта 16.8 функциональные компоненты стали иметь больше возможностей.

Пример:

function Button(props) {
    return <button>{props.name}</button>;
}