что способствует упрощению управления стилями.
Пример вложенности компонентов:
import React from ’react’
function Header () {
return <h1> Заголовок </h1>
}
function Sidebar () {
return (
<div>
<h2> Боковая панель </h2>
</div>
)
}
function App () {
return (
<div>
<Header />
<Sidebar />
<p> Основное содержание </p>
</div>
)
}
export default App
В этом примере Header и Sidebar являются дочерними компонентами, вложенными в компонент App. Это позволяет легко организовывать структуру интерфейса и создавать компоненты, которые можно переиспользовать.
5.4 Компонент высшего порядка
Компонент высшего порядка (Higher Order Component, HOC) в React – это функция, которая принимает компонент и возвращает новый компонент с дополнительной функциональностью.
Допустим, у вас есть компонент, но вам нужно добавить ему какие-то общие функции или свойства, которые могли бы понадобиться в разных частях приложения. Вместо того чтобы копировать и вставлять один и тот же код в разные места, вы можете использовать HOC. Эта функция «обернет» компонент, добавив к нему нужные функции или свойства.
Другими словами, HOC позволяет повторно использовать код и легко расширять функциональность компонентов.
Например, если у вас есть компонент для отображения информации о пользователе, а вы хотите добавить к нему функцию загрузки данных из сети, HOC может помочь сделать это без необходимости изменения самого компонента.
Пример: у вас есть компонент UserComponent, который отображает имя пользователя:
import React from ’react’
const UserComponent = (props) => {
return <div> Привет, {props.name}! </div>;
}
export default UserComponent
Теперь вы хотите добавить к этому компоненту возможность загрузки данных о пользователе из сети. Для этого мы можем использовать HOC:
import React, {Component} from ’react’;
const withDataFetching = (WrappedComponent) => {
return class extends Component {
constructor (props) {
super (props);
this.state = {
data: null,
loading: true,
}
}
async componentDidMount () {
try {
const response = await fetch(this.props. url)
const data = await response. json ()
this.setState ({data, loading: false})
} catch (error) {
console.error («Ошибка:», error)
this.setState ({loading: false})
}
}
render () {
return (
<WrappedComponent
{…this.props}
data={this.state. data}
loading={this.state. loading}
/>
)
}
}
}
export default withDataFetching
Здесь мы должны создать HOC withDataFetching, который загружает данные из указанного URL и передает их в обернутый компонент. После этого мы можем использовать его с нашим UserComponent:
import React from ’react’
import withDataFetching