– Классовые компоненты: Это классы, которые наследуются от React.Component и могут содержать состояние (state) и методы жизненного цикла.
Выбор между классовыми и функциональными компонентами в React зависит от конкретных требований проекта и предпочтений разработчика. Однако, начиная с версии React 16.8, появились хуки (например, useState), которые обеспечивают функциональным компонентам возможности, ранее доступные только классовым компонентам.
Функциональные компоненты с хуками обычно имеют несколько преимуществ:
– Краткость кода. Функциональные компоненты с использованием хуков обычно более компактны и могут быть проще для понимания.
– Читаемость. Хуки обеспечивают локальное состояние и другие возможности функциональным компонентам, что делает код более декларативным и легко читаемым.
– Проще тестирование. Функциональные компоненты обычно более просты в тестировании. Вы можете тестировать их, используя библиотеки тестирования, такие как Jest, без создания экземпляра класса.
Однако, есть сценарии, в которых классовые компоненты могут быть предпочтительными:
– Жизненный цикл компонентов. Если вам нужен доступ к методам жизненного цикла (например, componentDidMount, componentDidUpdate), то классовые компоненты могут быть более подходящим выбором.
– Классовые свойства. В классовых компонентах вы можете использовать классовые свойства для хранения данных без необходимости использования this.setState.
– Интеграция с библиотеками. Некоторые сторонние библиотеки и устаревший код могут предпочитать использование классовых компонентов.
В конечном итоге, выбор между классовыми и функциональными компонентами зависит от вашего стиля кодирования, требований проекта и командных предпочтений. В современных проектах, особенно если вы начинаете новый проект или обновляете старый, функциональные компоненты с хуками обычно являются более современным и предпочтительным вариантом.
3.2 Создание функционального компонента
Давайте создадим простой функциональный компонент в React.
– В вашем проекте React откройте папку src.
– Внутри папки src создайте новый файл с расширением. tsx (например, MyComponent. tsx).
– Откройте созданный файл в вашем редакторе кода.
– Напишите следующий код, чтобы создать простой функциональный компонент:
import React from ’react’
function MyComponent () {
return (
Привет, это мой первый компонент React!
)
}
export default MyComponent;
Давайте разберемся, что произошло:
– Мы импортировали библиотеку React.
– Создали функциональный компонент MyComponent, который возвращает JSX.
– Вернули JSX, который представляет собой div с заголовком. Несмотря на схожесть с HTML, JSX является спецификацией React, применяемой для создания пользовательского интерфейса.
– Использовали export default, чтобы сделать компонент доступным для импорта в других частях вашего приложения.
3.3 Использование компонента в приложении
Теперь, когда у нас есть компонент, давайте научимся его использовать.
Откройте файл src/App. tsx (не забудьте переименовать js в tsx).
Импортируйте ваш компонент в этот файл:
import React from ’react’
import MyComponent from». /MyComponent’
function App () {
return (
Мое приложение React
<MyComponent />
);
}
export default App
Теперь ваш компонент MyComponent будет отображаться внутри компонента App.
