React и TypeScript: Практическое руководство. Быстрый старт

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

Компоненты в React могут быть разделены на два типа:

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

– Классовые компоненты: Это классы, которые наследуются от React.Component и могут содержать состояние (state) и методы жизненного цикла.

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

Однако, начиная с версии React 16.8, появились хуки (например, useState), которые обеспечивают функциональным компонентам возможности, ранее доступные только классовым компонентам.

Функциональные компоненты с хуками обычно имеют несколько преимуществ:

– Краткость кода. Функциональные компоненты с использованием хуков обычно более компактны и могут быть проще для понимания.

– Читаемость. Хуки обеспечивают локальное состояние и другие возможности функциональным компонентам, что делает код более декларативным и легко читаемым.

– Проще тестирование. Функциональные компоненты обычно более просты в тестировании. Вы можете тестировать их, используя библиотеки тестирования, такие как Jest, без создания экземпляра класса.

Однако, есть сценарии, в которых классовые компоненты могут быть предпочтительными:

– Жизненный цикл компонентов. Если вам нужен доступ к методам жизненного цикла (например, componentDidMount, componentDidUpdate), то классовые компоненты могут быть более подходящим выбором.

– Классовые свойства. В классовых компонентах вы можете использовать классовые свойства для хранения данных без необходимости использования this.setState.

– Интеграция с библиотеками. Некоторые сторонние библиотеки и устаревший код могут предпочитать использование классовых компонентов.

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

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

3.2 Создание функционального компонента

Давайте создадим простой функциональный компонент в React.

– В вашем проекте React откройте папку src.

– Внутри папки src создайте новый файл с расширением.