связанных с созданием экземпляров классов.
– Легко тестируемы. Функциональные компоненты часто более легко поддаются модульному тестированию, так как их поведение зависит только от входных данных (props) и их вывода (возвращаемого JSX).
Пример функционального компонента:
import React from ’react’
function MyComponent () {
return <h1> Привет, это мой первый компонент! </h1>
}
export default MyComponent
Функциональные компоненты являются предпочтительным способом создания компонентов в React.
– Классовый компонент определен как класс JavaScript и расширяет базовый класс React.Component. Классовые компоненты имеют следующие ключевые характеристики:
– Состояние (State). Классовые компоненты имеют доступ к локальному состоянию, которое может быть использовано для хранения и управления данными, изменяющимися во времени. Состояние компонента может быть изменено с помощью метода setState, и изменения состояния приводят к перерисовке компонента.
– Жизненный цикл (Lifecycle). Классовые компоненты поддерживают разнообразные методы жизненного цикла, такие как componentDidMount, componentDidUpdate, и componentWillUnmount. Жизненный цикл компонента – это специальные методы, которые вызываются в разные моменты времени в жизни компонента. Например, componentDidMount вызывается после того, как компонент был добавлен к DOM. Эти методы позволяют выполнять действия при монтировании, обновлении и размонтировании компонента.
– Пропсы (Props). Классовые компоненты могут принимать входные данные, передаваемые через свойство props. Пропсы представляют собой данные, которые компонент может использовать для настройки своего поведения или отображения.
– Контекст (Context). Классовые компоненты могут использовать механизм контекста React для передачи данных глубоко в иерархии компонентов без необходимости передавать пропсы через каждый уровень.
Пример классового компонента:
import React, {Component} from ’react’
class MyComponent extends Component {
render () {
return <h1> Привет, это мой компонент! </h1>
}
}
export default MyComponent
5.2 Использование компонентов
Чтобы использовать компонент в другом компоненте или приложении, вы должны его импортировать и затем использовать как тег JSX.
Пример использования функционального компонента:
import React from ’react’
import MyComponent from». /MyComponent’
function App () {
return (
<div>
<h1> Мое приложение React </h1>
<MyComponent />
</div>
);
}
export default App
5.3 Вложенность компонентов
Одним из сильных сторон React является возможность вложения компонентов друг в друга для создания более сложных интерфейсов путем объединения более простых компонентов в более крупные структуры. Вложенность компонентов помогает в организации кода, повторном использовании и поддерживаемости приложения. Вот некоторые важные аспекты вложенности компонентов в React:
– Иерархия компонентов. В React компоненты