Компоненты в React

Компонента или компонент – это функция либо класс (наследующийся от React.component и имеющий метод render), которые вызываются в виде тега и возвращают JSX. Исходя из этого все компоненты можно поделить на функциональные и классовые.

Сейчас React постепенно отходит от применения классовых компонент, жизненные циклы которых теперь позволяют реализовывать хуки. Но классы все же пока еще используются либо просто остаются во многих проектах, сделанных ранее.

Примеры:

1. Функциональная компонента:

const Header = () => {
  return  (
    <header className={s.header}>
        <img src='https://site.ru/header.jpg' />
      </header>
    )
}

2. Классовая компонента:

class Man extends React.Component {
    constructor(props) {
        super(props); // если своих пропсов нет, а только наследуемые (super), то конструктор можно не писать
        name: isValidElement;
    }
    nameMethodOne = () => {
        alert('Hello, my name is ' + this.name)
    }

    render() {
      return (
        ...
      )
}

Важное отличие в том, что функциональная компонента отрисовывается вся заново (ре-рендериться) каждый раз при изменениях. А классовая компоненте работает иначе. React создает на базе нее объект, который выступает в роли посредника, и взаемодействует дальше с ним. При этом конструктор загружается только один раз вместе со страницой, а затем перезапускается лишь метод render при изменениях.

Виды компонент за предназначением

Презентационная

Презентационная – чистая компонента (без каких либо дополнительных функций), принимающая пропсы и колбеки, предназначеная просто для возвращения JSX и отрисовки страницы.

Синтаксис

Файл с такой компонентой называют с большой буквы (как и любой другой) и с раширением .js или .jsx и обычно одним словом, например: Users.jsx, Post.jsx, News.jsx, Header.jsx и т.д.

Контейнерная

Контейнерная компонента – “оболочка” для презентационной компоненты, предназначением которой является делать “грязную работ”, т.е. общаться со стейтом (при использовании редакса) либо слать запросы на сервер, что позволяет презентационной компоненте оставаться чистой. Контейнерная компонента передает пропсы и колбеки в презентационную.

Синтаксис

Подключается к стейту редакса контейнерная компонента при помощи функции connect, чтобы диспатчить (передавать) в стейт нужные данные и отрисовывая презентационную компоненту. Это последняя строчка в кода в контейнерной компоненте, отображающая само подключение:

export default connect(mapStateToProps, mapDispatchToProps) (NamePresentatioComponent);

Над презентационной компонетной может быть более одной контейнерной. Например, одна из которых общается со стейтом, а вторая посылает AJAX-запросы на сервер:

Название файла с контейнерной компонентой можно создать из названия соответствующей презентационной компоненты и слова Container. Например: UsersContainer.jsx, PostContainer.jsx, NewsContainer.jsx и т.д.