Пример вложенности компонентов:

import React from ’react’

function Header () {

return

Заголовок

}

function Sidebar () {

return (

)

}

function App () {

return (

)

}

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

}

export default UserComponent

Теперь вы хотите добавить к этому компоненту возможность загрузки данных о пользователе из сети. Для этого мы можем использовать HOC:

import React, {Component} from ’react’;

const withDataFetching = (WrappedComponent) => {

return class extends Component {

constructor (props) {

super (props);

this.

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 (

{…this.props}

data={this.state. data}

loading={this.state.