React описывается как «библиотека JavaScipt для создания пользовательских интерфейсов». React — одна из самых, если не самая популярная библиотека JavaScript, поэтому я настоятельно рекомендую окунуться в бильярд. React использует компоненты, которые по сути представляют собой настраиваемые и повторно используемые фрагменты HTML-элементов, которые позволяют пользователю быстро создавать пользовательские интерфейсы для внешнего интерфейса вашего приложения. Имея эти отдельные компоненты, мы можем разбить код на повторно используемые части, которые улучшают читабельность. React разбивает свои компоненты на отдельные категории: классовые, чистые и функциональные.

Класс

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

Компонент класса с голыми костями будет выглядеть так:

Чистый

Чистый компонент в React не имеет доступа к методу жизненного цикла shouldComponentUpdate. Тем не менее, он выполняет поверхностное сравнение старого и нового реквизита. Синтаксис чистого компонента почти точно такой же, как у компонента класса. Единственная разница? Вместо импорта Component мы импортируем PureComponent. Использование компонента Pure — хорошая идея, если ваш компонент не требует тонкой настройки обновления.

Посмотрите ниже, чтобы увидеть небольшую разницу в синтаксисе:

Функциональный

Функциональный компонент — наименее сложный из трех, которые мы рассматриваем в этом блоге. Функциональный компонент не будет «расширять» Component и не будет использовать render. Вместо этого он возвращает JSX. Так как функциональные компоненты не "расширяются" Component, они не будут наследовать то, что необходимо для хранения состояния, но может получать реквизиты в качестве аргумента. Функциональные компоненты меньше полагаются на логику и больше на отображение того, что вы им говорите. Функциональные компоненты лучше всего использовать как легкие компоненты, но их можно усложнить, если того требует ситуация.

Боковая панель быстрого доступа
JSX (JavaScript XML) позволяет нам легко писать и добавлять HTML в React путем преобразования тегов HTML в элементы React.

БОНУС

Возможно, вы слышали слова «контейнер» и/или «презентационные» компоненты. О них полезно знать! Презентационные и контейнерные компоненты не являются разными типами компонентов; вместо этого они позволяют взглянуть на ваше приложение React и организовать его.
Давайте более подробно рассмотрим, как мы можем реализовать это мышление при создании собственного приложения React.

Контейнеры

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

презентационный

Презентационный компонент связан только с отображением контента на странице. Они не отягощены логикой и не отдают государству время суток (не хотят этим заниматься).

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

Благодаря тому, что React заставляет нас разделять наш код на компоненты, мы прекращаем разделение наших задач, мгновенно делая наш код лучше. Понимание компонентов и того, как они взаимодействуют друг с другом, имеет решающее значение для понимания и использования библиотеки React. Я надеюсь, что эта информация поможет вам в вашем путешествии по React!

Первоначально опубликовано на https://dev.to 21 марта 2021 г.