Если вы только начинаете работать с React, эта статья поможет вам узнать о компонентах! Узнайте, что такое компоненты, их типы, как их экспортировать и импортировать и когда какие использовать!

Помните, как писать базовый HTML-файл? Как вы привыкли добавлять весь контент на одну страницу, а затем связывать страницы вместе с помощью тегов привязки. Все, что вы видите на index.html, является кодом, присутствующим в файле index.html.

React помогает упростить вам задачу, вводя компоненты. Это повторно используемые блоки кода, которые можно включить в ваш основной компонент/файл и упростить создание Одностраничных приложений (SPA). SPA — это отдельный документ, который один раз загружается в браузере. Вы можете перезагрузить компоненты, не отправляя весь запрос документа.

В React есть два типа компонентов.

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

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

Посмотрите на фрагмент кода выше. Это простой функциональный компонент. Это не что иное, как функция JavaScript — функция HelloFC1(). Внутри него мы возвращаем код JSX.

Ключевое слово export используется для экспорта функционального компонента в основной файл — App.js или любой другой компонент, куда мы хотим импортировать компонент. Это называется именованным экспортом, потому что мы не используем ключевое слово по умолчанию вместе с экспортом.

Именованный экспорт обычно означает, что вы должны импортировать компонент, используя его исходное имя в файле в качестве идентификатора. При вызове именованного экспорта вам нужно будет заключить имя в фигурные скобки.

Чтобы вызвать именованный экспорт в App.js, используйте следующий оператор импорта. Вы также можете использовать псевдоним для переименования идентификатора.

Рекомендуется использовать именованный экспорт, когда вы будете импортировать компонент несколько раз. Вы можете объединить множество мелких компонентов в один файл и импортировать под одним именем.

Давайте теперь посмотрим, что такое экспорт по умолчанию. Когда вы добавляете ключевое слово по умолчанию в оператор экспорта, оно попадает в категорию экспорта по умолчанию. Вы можете либо экспортировать его в конец файла, либо использовать в самом объявлении компонента.

OR

Все модули могут иметь только один экспорт по умолчанию. Вам не нужно включать фигурные скобки при импорте компонента. Используйте экспорт по умолчанию, когда файл экспортирует только одну вещь или его нужно импортировать только один раз. Вы можете использовать любой идентификатор при импорте экспортируемого компонента по умолчанию.

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

Чтобы создать компонент класса, следуйте приведенной ниже структуре:

Приведенный выше код является именованным компонентом класса экспорта. Эквивалентный экспорт по умолчанию может выглядеть так:

Правила именованного экспорта и экспорта по умолчанию аналогичны как для класса, так и для функциональных компонентов. Давайте сосредоточимся на части { Component }.

Компонент класса расширяет Component из библиотеки React. Это дает вашему компоненту класса функциональные возможности React.component.

Метод render() — это метод жизненного цикла по умолчанию для компонентов класса, который используется для возврата одного дочернего компонента из родительского в дочерний компонент в React.

Какой компонент использовать?

До 2016 года компоненты классов были предпочтительнее функциональных компонентов, поскольку они давали разработчику возможность обрабатывать изменения состояния в компоненте. Однако после введения хуков в 2016 году мы можем обрабатывать изменения состояния и в функциональных компонентах. Итак, на данный момент можно написать все ваши компоненты, используя функциональные компоненты. Функциональные компоненты требуют меньше кода в синтаксисе, чем компоненты класса, и менее сложны, чем компоненты класса, поскольку компоненты класса являются экземплярами React.Component и требуют конструктора и других сложных функций обработки состояния. Для вас, как новичка, давайте посмотрим, как эти два компонента имеют различный синтаксис и структуру. Для более подробного ознакомления ознакомьтесь с этой статьей.

Разделение пользовательского интерфейса на компоненты в библиотеке React помогает нам использовать другие важные концепции условного рендеринга и компонентов более высокого порядка. Следите за этими статьями!